skip to Main Content

I have a strange issue, where my styling is broken when I try to host my blazor WASM project using Nginx. I tried to follow a couple of different guides and they were similar and had same issue for me.

I have the code here: https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient

When I debug locally or publish locally and serve from dotnet serve I get the following:

enter image description here

But when I publish and try to run it within docker using Nginx I get this:

enter image description here

My buttons are still there, but I can’t see them since they are white.

My dockerfile is pretty simple:

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app
COPY . ./
RUN dotnet publish -c Release -o output
FROM nginx:alpine
WORKDIR /var/www/web
COPY --from=build-env /app/output/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

My nginx config

events { }
http {
    include mime.types;
    types {
        application/wasm wasm;
    }

    server {
        listen 80;

        # Here, we set the location for Nginx to serve the files
        # by looking for index.html
        location / {
            root /var/www/web;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

I can’t find any "not found" or similar in network tab.

Edit:

When comparing both running side by side, I was not able to find CSS for linear-gradient, which is the purple side of the menu. Digging a bit deeper, it seems all CSS in MainLayout.razor.css was not being found.

https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css

When running locally:

enter image description here

When running using Docker+Nginx

enter image description here

So seems to me, the CSS is missing somehow???

Edit 2:

The build hash for CSS seems to not match after deploy.
So I found the CSS file linked on my Page to be like the following:

enter image description here

But my HTML doesn’t match that. It looks like this:

enter image description here

Don’t know how that can break during build and deploy for Docker+Nginx??? Is there something I am doing wrong in my dockerfile???

2

Answers


  1. Chosen as BEST ANSWER

    After way to long time spending debugging this issue, I finally got it working. I found this project: https://github.com/waelkdouh/DockerizedClientSideBlazor/ and started comparing. Only thing different I could see, what he had a .dockerignore I made a copy of it and it all started working. Have no idea what was the issue. Can't see how any of the files listed could break the CSS.....


  2. I’ve run into this issue before as well.
    Delete your bin a obj folders.
    There seems to be some caching issues where the generated scope in scoped css wont match between debug and release.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search