Comment déployer une app Blazor Webassembly sur Github Pages

Après avoir passé une demi-journée à mettre en place un CI/CD avec Github Actions afin d’avoir une démo d’un composant Blazor Webassembly, j’ai décidé de me faire ce mémo public. J’ai passé en revue pas mal de blog, qui m’ont proposé un bon nombre de solutions plus ou moins fonctionnelles. Le problème est que la plupart ne sont plus à jour.

Alors je pose ici la solution pour créer un workflow Github Action pour une application Blazor WASM .NET6

Prérequis

Avoir déjà votre repository d’une application SPA. Ici une Blazor WebAssembly

1° Créer un token

Rendez-vous sur cette page pour créer votre token pour votre repo : https://github.com/settings/tokens . A ce jour une fonction Beta est disponible. Celle-ci impose une date limite.

Les Tokens ne peuvent pas avoir un nom commençant par GITHUB…. prenons alors par exemple PUBLISH_TOKEN où ce que vous préférez :

2° Copiez votre token

Dans le repository, cliquez sur SETTINGS, puis SECRETS/ACTIONS et donner un nom à votre TOKEN :

3° Création d’un Workflow

Maintenant on va ajouter un fichier pour notre script yaml pour automatiser le déployment : Depuis l’accueil de notre repository, on clique sur ADD FILE / CREATE NEW FILE et on saisie : .github/workflows/ci.yml

Le nom ci.yml c’est comme on veut. toto.yml fonctionnerait aussi

Une fois ce fichier ajouté, on l’édite pour y coller ce script en Modifiant la variable PUBLISH_FOLDER :

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

Comment déployer une app Blazor Webassembly sur Github Pages

Prérequis

1° Créer un token

2° Copiez votre token

3° Création d’un Workflow

Articles similaires

Laisser un commentaireAnnuler la réponse.

Prérequis

1° Créer un token

2° Copiez votre token

3° Création d’un Workflow

Articles similaires

Vous pourriez aussi aimer

Afficher un composant Blazor à partir de JavaScript dans WordPress

Blazor – gérer les déconnexions

Comment localiser vos textes dans une application Blazor

Laisser un commentaireAnnuler la réponse.