27 November 2022
deploy Blazor Wasm Github Page

How to deploy a Blazor Webassembly app on Github Pages

After spending half a day setting up a CI/CD with Github Actions in order to get a demo of a Blazor Webassembly component, I decided to make myself this public memo. I have reviewed a lot of blogs, which have proposed a number of solutions more or less functional. The problem is that most of them are out of date.

So here is a solution to create a very simple Github Action workflow for a Blazor WASM .NET6 application

Prerequisites

  • Already have your repository of an SPA application. Here a Blazor WebAssembly

1° Create a token

Go to this page to create your token for your repo: https://github.com/settings/tokens . At this time a Beta function is available. This one imposes a deadline.

Tokens cannot have a name starting with GITHUB…. so let’s take PUBLISH_TOKEN or whatever you prefer:

2° Copy your token

In the repository, click on SETTINGS, then SECRETS/ACTIONS and give a name to your TOKEN :

3° Creation of a Workflow

Now we will add a file for our yaml script to automate the deployment: From the home page of our repository, we click on ADD FILE / CREATE NEW FILE and write: .github/workflows/ci.yml

Once this file is added, we edit it to paste this script by modifying the PUBLISH_FOLDER variable:

https://github.com/tossnet/Blazor-Color-Picker/blob/master/.github/workflows/ci.yml

name: ‘Publish application’
on: push

jobs:
build:
if: github.event_name == ‘push’ || (github.event_name == ‘pull_request’ && github.event.action != ‘closed’)
runs-on: ubuntu-latest

env:
PUBLISH_FOLDER: Blazor-Color-Picker/bin/Release/net6.0/publish/wwwroot

name: Build and Deploy Job
steps:
– name: Set the name of the repo in env variable
run:
echo “REPO_NAME=${{ github.event.repository.name }}” >> $GITHUB_ENV

– uses: actions/checkout@v2

– uses: actions/setup-dotnet@v3
with:
dotnet-version: ‘6.0.x’

– name: Dotnet Publish
run:
dotnet publish –configuration Release

– name: Change base-tag in index.html to repo name
run: sed -i ‘s///g’ $GITHUB_WORKSPACE/$PUBLISH_FOLDER/index.html

– name: copy index.html to 404.html
run: cp $GITHUB_WORKSPACE/$PUBLISH_FOLDER/index.html $GITHUB_WORKSPACE/$PUBLISH_FOLDER/404.html

– name: Add .nojekyll file
run: touch $PUBLISH_FOLDER/.nojekyll

– name: Deploy GitHub Pages action
if: ${{ github.ref == ‘refs/heads/master’ }}
uses: peaceiris/actions-gh-pages@v3.6.1
with:
github_token: ${{ secrets.PUBLISH_TOKEN }}
publish_branch: gh-pages
publish_dir: /${{ env.PUBLISH_FOLDER }}
allow_empty_commit: false
keep_files: false
force_orphan: true

Leave a Reply