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:
But when I publish and try to run it within docker using Nginx I get this:
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.
When running locally:
When running using Docker+Nginx
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:
But my HTML doesn’t match that. It looks like this:
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
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.....
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.