DEV Community

loading...
Cover image for The easier way to publish your Blazor WebAssembly app for GitHub Pages

The easier way to publish your Blazor WebAssembly app for GitHub Pages

j_sakamoto profile image jsakamoto ・3 min read

Publishing your Blazor Wasm app to GitHub Pages isn't difficult, but is chores.

As you know, your Blazor WebAssembly app can be deployed to GitHub Pages.

The good articles about how to deploy a Blazor WebAssembly app to GitHub Pages are already exists, like the below.

The following list is the main task to deploy a Blazor WebAssembly app to GitHub Pages.

  • Add a .nojekyll file to avoid the "Jekyll" translation.
  • Add a .gitattribute file to avoid changing end-of-line characters.
  • Rewrite the base URL inside the index.html.
  • Copy the index.html to the 404.html.

Each task in the list above is not difficult, but rather a simple operation.

Implementation of these 4 tasks to GitHub workflow .yml file every time is very boring to me, so I thought it must be automated.

"Publish SPA for GitHub Pages" NuGet Package

Finally, I made a new NuGet package that makes a Blazor Wasm app project to be available to publishing to GitHub Pages including 4 tasks described in the before section.

That NuGet package is "Publish SPA for GitHub Pages".

With this NuGet package, what you should do to publishing your Blazor Wasm app is just ONLY 2 STEPS as following.

  1. Add the "PublishSPAforGitHubPages.Build" NuGet package to the Blazor Wasm app project.
$ dotnet add package PublishSPAforGitHubPages.Build
Enter fullscreen mode Exit fullscreen mode
  1. Specify the GHPages=true MSBuild property when you publish the Blazor Wasm project.
$ dotnet publish -c:Release -p:GHPages=true
Enter fullscreen mode Exit fullscreen mode

After doing these 2 steps, the published contents are made to be suitable for GitHub Pages deploying.

fig.1

It is easy, isn't it? :)

Due to "PublishSPAforGitHubPages.Build" NuGet package taking care of chore tasks that makes the app to be suitable for GitHub Pages, the GitHub Workflow .yml code that to deployment the app can be simplified.

For example, .github/workflows/*.yml file that deploys the Blazor Wasm app to GitHub Pages will be like as below.

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      # Checkout the code
      - uses: actions/checkout@v2

      # Install .NET Core SDK
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: 5.0.101

      # Publish the site
      - name: Publish
        #      Don't missing to add "p:GHPages=true". 👇
        run: dotnet publish ProjectDir/Project.csproj -p:GHPages=true -o:public -c:Release

      # Deploy the site
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: public/wwwroot
          force_orphan: true
Enter fullscreen mode Exit fullscreen mode

And also, "Brotli" compression is enabled!

And one more thing, the published contents with the "PublishSPAforGitHubPages.Build" NuGet package is already enabled "Brotli" compression loading, out of the box!

"PublishSPAforGitHubPages.Build" injects the custom loader script into the index.html automatically for loading "Brotli" compressed contents.

In my case, the size of my Blazor Wasm app contents was reduced from 17.3 MBytes to 7.7 MBytes by "Brotli" compression.

It is a 45% compression rate.

Compression rate chart

For more detail about "Brotli compression in Blazor Wasm apps" please see also the official documentation site.

Conclusion

With adding "PublishSPAforGitHubPages.Build" NuGet package to your Blazor WebAssembly project, what you should do to publishing it for GitHub Pages is, only specify GHPages=true MSBuild property.

And, "PublishSPAforGitHubPages.Build" NuGet package makes the published contents to be loading "Brotli" compressed contents enabled.

I'm happy if somebody could save their time by using "PublishSPAforGitHubPages.Build" NuGet package.

Happy coding! :)

Discussion (0)

pic
Editor guide