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

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