dockernginx.net-coreblazor-webassembly

Blazor WASM styling missing when hosted in docker using nginx

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???

Solution

  • 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.....