How to publish Blazor WebAssembly application to GitHub pages using GitHub Action
Tags: blazor, dotnet, githubactions, aspnetcore
Published: 2021-05-31 15:38:10

In this post, I am going to show how to add a GitHub Action to your repository that would auto-publish your Blazor WebAssembly application to the GitHub page.

> This post is going to be focused on creating GitHub Action and publishing the Blazor WebAssembly application. If you are not familiar with creating the Blazor application, you could go through it [here](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/intro).

## Create GitHub Action workflow
The first step is to create GitHub Action for your Github repository in which your Blazor WebAssembly application resides. You can create the Github Action workflow in the Actions tab of the repository.
![Create GitHub actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqhsgb3t2t5tnp5dkz46.png)
Now a YAML file will be created, name the file as per your wish.
![Template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96fvhrwtrbq45aorxei2.png)
In the YAML file, we are going to provide the below workflow steps to build and publish the WASM application to GitHub pages.

## Set up
Now we are going to do the initial setup. In the initial setup, I am providing the name and setting an environment variable to use inside other workflow steps.
```yaml
name: Deploy Blazor WASM to GitHub Page
env:
  PUBLISH_DIR: bin/Release/net5.0/publish/wwwroot

# Controls when the action will run
on:
  push:
    branches: [ master ]
```
* **name**: Name of the GitHub action workflow
* **env -> PUBLISH_DIR**: Denotes the folder in which our application will be published during publish command.
* **on – > push –> branches**: Specifies that the workflow steps should be executed when pushed to the main branch. 

## Publish the application
The next workflow step is to publish the application. It can be done using the below code.
```yaml
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    - name: Publish application
      run: dotnet publish -c Release
```
* **name**: Name of the workflow step.
* **run**: Runs any shell command. We are publishing our Blazor application in release mode here.

## Rewrite the base element's href attribute
In the published application, the base element's href value is set to **\**. Since the GitHub page is published and served under our repository name, the repository name should be given as base element's href value. It can be done using a simple GitHub Action written by [SteveSanderson](https://github.com/SteveSandersonMS).

```yaml
    # base href url value should be changed so that resources like CSS and scripts can load properly. 
    - name: Rewrite base href
      if: success()
      uses: SteveSandersonMS/ghaction-rewrite-base-href@v1
      with:
        html_path: ${{ env.PUBLISH_DIR }}/index.html
        base_href: REPOSITORY_NAME
``` 
* **name**: Name of the step.
* **if**: Continue if only the above workflow steps passed.
* **uses**: Use GitHub Action by [SteveSanderson](https://github.com/SteveSandersonMS) to rewrite the base URL. It will be called with two parameters. 
  * **html_path**: Path of the index.html file
  * **base_href**: Replacement value for base href attribute.

## Add .nojekyll file
With the base href value is re-written, we are all set to push the published folder to the GitHub page. But there is another stumble that needs to be addressed. GitHub pages don’t serve files from folders starting with an underscore(_).

So the files under the folder **_framework** and **_content** in our published folder will not served by the GitHub pages and the application will break. To resolve this problem we need to add the _.nojekyll_ file to our folder using the below step.

```yaml
    # add .nojekyll file to tell GitHub pages to not treat this as a Jekyll project. 
   # Allow files and folders starting with an underscore.
    - name: Add .nojekyll file
      run: touch ${{ env.PUBLISH_DIR }}/.nojekyll
```

## Commit to GitHub page branch
Now push the published directory to the GitHub page branch using the below workflow step.

```yaml
    - name: Commit to GitHub pages Repo
      if: success()
      uses: crazy-max/ghaction-github-pages@v1.5.1
      with:
        target_branch: gh-pages
        build_dir: ${{ env.PUBLISH_DIR }}
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```
You can see that the **target_branch** parameter is set to **gh-pages** so we need to set the GitHub pages source branch as **gh-pages** in the **Settings -> Pages** section.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jd4drgbi4rxvnp1g1uuf.png)
The full GitHub Action workflow steps are as follows.
{% gist  https://gist.github.com/Madhust/2d68feca9e50a635dd61577b50afe94b 
%}

> In case, you want to do auto deploy your app then I suggest you to check out [PublishSPAforGitHubPages.Build](https://www.nuget.org/packages/PublishSPAforGitHubPages.Build/) nuget package, which performs post publish process to deploy your application to GitHub pages. 

Thanks for reading. Happy coding!!