Welcome to my first post on how to set up a Blazor WASM project with Nginx and Docker. I hope that after reading this guide, you'll be able to set up your own blazor project. You can check out the git repository on Gitlab and Github
Table Of Contents
- Introduction to Blazor
- Creating a Blazor App
- Creating Dockerfile
- Creating Nginx Conf
- Running Blazor App
Introduction to Blazor
Blazor is a framework that enables developers to develop modern web applications using .NET and C# without the need for Javascript. No plugin is needed as it can run on any modern web browsers on any devices. Let's move on and start building our application.
Creating a Blazor WASM Project
Open up Visual Studio and create a Blazor App
Follow the image below and click on create
Creating Dockerfile
- Create a
Dockerfile
in root folder - The code below is the dockerfile configuration ```dockerfile
Here, we include the dotnet core SDK as the base to build our app
FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env
Setting the work directory for our app
WORKDIR /BlazorApp1
We copy the .csproj of our app to root and
restore the dependencies of the project.
COPY /BlazorApp1/BlazorApp1.csproj .
RUN dotnet restore "BlazorApp1.csproj"
We proceed by copying all the contents in
the main project folder to root and build it
COPY /BlazorApp1 .
RUN dotnet build "BlazorApp1.csproj" -c Release -o /build
Once we're done building, we'll publish the project
to the publish folder
FROM build-env AS publish
RUN dotnet publish "BlazorApp1.csproj" -c Release -o /publish
We then get the base image for Nginx and set the
work directory
FROM nginx:alpine AS final
WORKDIR /usr/share/nginx/html
We'll copy all the contents from wwwroot in the publish
folder into nginx/html for nginx to serve. The destination
should be the same as what you set in the nginx.conf.
COPY --from=publish /publish/wwwroot /usr/local/webapp/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
Creating a Nginx Conf <a name="chapter-3"></a>
- Create a
nginx.conf
in the root folder
```nginx.conf
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 /usr/local/webapp/nginx/html;
try_files $uri $uri/ /index.html =404;
}
}
}
Running Blazor App
Once you're done with all the configurations, you should be able to run your web app on the browser.
- You'll first need to build the project by running
docker build -t blazor-wasm .
-
docker build
tells docker that you're planning to build the project.-t
indicates that you're going to set a tag/name for your build andblazor-wasm
is the name of your build and.
is the path for your build.
-
- Once the build is successfully done, run
docker run -p 8080:80 --name webapp blazor-wasm
-
docker run
tells docker that you're going to run your web application.-p 8080:80
sets the port for hosting your web app.--name webapp
sets the name for your docker container.blazor-wasm
is the name of your image that you just created when runningdocker build
-
- Go to
http://localhost:8080
and you should be able to see your web application on the browser.
I hope that after reading this guide, you are able to run your own Blazor app in docker. A special thanks to Chris Sainty for helping me understand how to containerise my Blazor app with Docker and Nginx. You can check out his article here
Top comments (0)