I am trying to run a new blank blazor server web app (created by visual studio 2022) with dotnet 8 inside a docker container. While the app runs perfectly but the styles are total mess. Seems like the scoped generated css are not working. Here is my docker file:
# Use .NET 8 SDK image for development
FROM mcr.microsoft/dotnet/sdk:8.0 AS dev
# Set working directory inside the container
WORKDIR /app
# Copy only the project file(s) to leverage Docker cache
COPY *.csproj ./
RUN dotnet restore
# Copy the rest of the application files
COPY . ./
# Install dependencies for watch mode
RUN dotnet dev-certs https --trust
# Expose the Blazor Server port
EXPOSE 5000
EXPOSE 5001
# Set the entrypoint to run in watch mode
ENTRYPOINT ["dotnet", "watch", "run", "--no-hot-reload", "--urls", ":5000;:5001"]
I run this command then the app works perfectly on port 5000
docker run -it --rm -p 5000:5000 -p 5001:5001
Here is my App.razor's head section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorDemo.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
Here styles of app.css files are picked by the browser though, something is wrong with the generated BlazorDemo.styles.css styles.
I can only see two errors in the console saying "websocket connection failed (on two ports)"
Here is the output I see :