Hosting Blazor on Netlify using Github Actions (Part 3 of Series) 
Tags: dotnet, webassembly, github, netlify
Published: 2020-01-05 14:06:26


This series introduces hosting Blazor WebAssembly on Netlify using Github Actions. Previously, in [part 1](https://dev.to/ramhemasri/hosting-blazor-on-netlify-using-github-actions-part-1-of-series-3a1k), we have created a Blazor WebAssembly Project using Visual Studio 2019 and in [part 2](https://dev.to/ramhemasri/hosting-blazor-on-netlify-using-github-actions-part-2-of-series-3k7a) we used Visual Studio 2019 to set up Github Project. In this last part we will use Github Actions to push our Blazor WebAssembly to Netlify.

## Creating Netlify tokens for Github actions
**_You should never expose these tokens_**
Github actions require your Netlify personal access token and site API ID  to push the Blazor WebAssembly. 
User personal access token can be created by going to your [Netlify settings page](https://app.netlify.com/user/applications/personal). When you navigate to the **Create a new personal access token** page, enter **NETLIFY_AUTH_TOKEN** in the text box and click **Generate Token** button. <img src="https://thepracticaldev.s3.amazonaws.com/i/putvj7mlydm3x3jf9oui.png" width="400" height="400" alt="Netlify Auth Token">
Netlify site API ID is unique to every site. We can easily create a site by dragging a folder with index.html page on to Netlify. 
<img src="https://thepracticaldev.s3.amazonaws.com/i/wwbjd6lkf1nqgoc10ue1.gif" width="400" height="400" alt="Netlify Site">
After site is successfully created, go to **Site Settings** and you can take a note of **API ID** under site information.
<img src="https://thepracticaldev.s3.amazonaws.com/i/sgwe5sh97hiobi0rhfie.PNG" width="400" height="400" alt="Netlify Site ID">
Go to your github repository settings created in part 2 and add the secrets. You have to add the two token and API ID generated on Netlify as **NETLIFY_AUTH_TOKEN** and **NETLIFY_SITE_ID**.
![Github secrets](https://thepracticaldev.s3.amazonaws.com/i/q080nueum8p9arji4zuk.png) 

## Setting up Github Actions
1. Click on Actions tab in your Github repository
<img src="https://thepracticaldev.s3.amazonaws.com/i/j42ysltny23b5dq0ns8c.png" width="400" height="400" alt="Github Actions">
2. Scroll down and click on **Workflows for Python, Maven,Docker and more** <img src="https://thepracticaldev.s3.amazonaws.com/i/hc532yza6z27ief6kdtw.png" width="400" height="400" alt="More Workflows"> 
3. The previous step will bring more workflows. Scroll until you find **.Net Core** and click on **Set up this workflow**. We require .Net workflow for building Blazor WebAssembly.<img src="https://thepracticaldev.s3.amazonaws.com/i/hj22mzxv7yhkwhoqs5z2.png" width="400" height="400" alt=".Net workflow">
4. Github creates **dotnetcore.yml** in your Blazor project repository.<img src="https://thepracticaldev.s3.amazonaws.com/i/cqrjfasjnf079uip57f1.png" width="400" height="400" alt="dotnetcore.yml">
5. Edit your dotnetcore.yml as below and commit your changes. This triggers github workflow and publishes your Blazor site to Netlify.
    ```yml
    
    name: BlazorOnNetlify #your workflow name
    on: [push] #on push to your branch run this workflow
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v1
        - name: Setup .NET Core
          uses: actions/setup-dotnet@v1
          with:
            dotnet-version: 3.1.100 #Blazor WebAssembly requires 3.1.100
        - name: Build with dotnet
          run: dotnet build --configuration Release
        - name: Publish Blazor webassembly using dotnet 
    #create Blazor WebAssembly dist output folder in the project directory
          run: dotnet publish -c Release --no-build -o ./
        - name: Publish generated Blazor webassembly to Netlify
          uses: netlify/actions/cli@master #uses Netlify Cli actions
          env: # these environment variables are added in github secrets
              NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
              NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          with:
              args: deploy --dir=BlazorOnNetlify/dist --prod #push dist folder to Netlify
              secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]' 
    ``` 
6. Github workflow status is available in Actions tab
![Github workflow status](https://thepracticaldev.s3.amazonaws.com/i/o7tm9fqu6sey6t4jttgn.png)

## Status Badges

Status badges are useful to know your workflow and netlify deployment statuses. These can be added to your Github Readme file. 
![BlazorOnNetlify status](https://thepracticaldev.s3.amazonaws.com/i/6ftln60obmvkziifjrze.png)
Github status badge can be created from using the following markdown
```
[![Actions Status](https://github.com/{owner}/{repo}/workflows/{workflow_name}/badge.svg)](https://github.com/{owner}/{repo}/actions)
```
Netlify status badge can be found under your Blazor **Site Settings**
![Netlify status badge](https://thepracticaldev.s3.amazonaws.com/i/6lttcgd9ete6178o5r74.png)


## Refernces
[Configuring Github Workflow](https://help.github.com/en/actions/automating-your-workflow-with-github-actions/configuring-a-workflow)
[Blazor WebAssembly](https://docs.microsoft.com/en-gb/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly)
[WebAssembly](https://webassembly.org/)