How to publish Blazor WebAssembly application to GitHub pages using GitHub Action

#blazor #dotnet #githubactions #aspnetcore

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.

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.

Now a YAML file will be created, name the file as per your wish.

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.

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.

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.

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

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

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

The full GitHub Action workflow steps are as follows.

In case, you want to do auto deploy your app then I suggest you to check out PublishSPAforGitHubPages.Build nuget package, which performs post publish process to deploy your application to GitHub pages.

Thanks for reading. Happy coding!!