How to setup Blazor App with Nginx and Docker

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

1. Create a Dockerfile in root folder
2. The code below is the dockerfile configuration

# 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

1. Create a nginx.conf in the root folder

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.

1. 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 and blazor-wasm is the name of your build and . is the path for your build.
2. 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 running docker build
3. 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