How to setup Blazor App with Nginx and Docker
Tags: docker, webassembly, blazor, csharp
Published: 2020-09-06 07:08:44

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](https://gitlab.com/helloitsm3/blazor-template) and [Github](https://github.com/helloitsm3/blazor-wasm-template)

## Table Of Contents
* [Introduction to Blazor](#introduction)
* [Creating a Blazor App](#chapter-1)
* [Creating Dockerfile](#chapter-2)
* [Creating Nginx Conf](#chapter-3)
* [Running Blazor App](#chapter-4)


## **Introduction to Blazor <a name="introduction"></a>**
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 <a name="chapter-1"></a>**

Open up Visual Studio and create a Blazor App

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5oijjlulh18k229m6iwc.PNG)

Follow the image below and click on create

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/athcavofozu6m0m67u2c.png)


## **Creating Dockerfile <a name="chapter-2"></a>**
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>**
1. 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 <a name="chapter-4"></a>**
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eykk9ul8231ggsvc7i2v.PNG)


I hope that after reading this guide, you are able to run your own Blazor app in docker. A special thanks to [Chris Sainty](https://chrissainty.com) for helping me understand how to containerise my Blazor app with Docker and Nginx. You can check out his article [here](https://chrissainty.com/containerising-blazor-applications-with-docker-containerising-a-blazor-webassembly-app/)