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

JSON

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/net7.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: '7.0.x'
   
      – name: Dotnet Publish
        run: 
            dotnet publish  –configuration Release

      – name: Change base-tag in index.html to repo name
        run: sed -i 's/<base href="\/" \/>/<base href="\/${{ env.REPO_NAME }}\/" \/>/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

How to deploy a Blazor Webassembly app on Github Pages

Prerequisites

1° Create a token

2° Copy your token

3° Creation of a Workflow

Articles similaires

Leave a ReplyCancel reply

Prerequisites

1° Create a token

2° Copy your token

3° Creation of a Workflow

Articles similaires

You might also like

Remote debug Android devices

Leave a ReplyCancel reply