Blazor WebAssembly Goes GA
As announced in Build 2020, Blazor WebAssembly version 3.2.0 has officially made it to its first production release.
With this release Blazor WebAssembly is now officially supported, this means that we really can start using it for production scenarios.
One of the major advantages is that Blazor WebAssembly applications are completely client-side, so it’s not needed anymore to host it on a web-server. This feature opens up a world of new possibilities like hosting a Blazor WebAssembly application in Azure on a Storage Account or hosting the application in GitHub Pages. In this blog post I’ll focus on hosting the static web-page on GitHub Pages.
Blazor WebAssembly Application
First we need to start a new Blazor WebAssembly project using Visual Studio 2019:
Now we need to make some adjustments to this application in order to be able to deploy and run it on GitHub Pages.
1. Edit Index.html
GitHub Pages doesn’t natively support single page apps. When there is a fresh page load for a url like example.tld/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo.
So we need to add some javascript to the index.html page to work-around this logic, more details can be found here.
Replace the body tag in the index.html like this:
|
|
2. Add .nojekyll file
GitHub Pages uses Jekyll as static site generator to build Pages sites. This is equivalent to Hugo (which is used as static site generator for generating the mstack.nl website)
Because of the way that Jekyll works, any files or folders that start with any of these characters: _, ., # or end with ~ are not built.
The result is that folders as _framework, mandatory for a Blazor WebAssembly running project they aren’t processed.
To solve it, you must create a .nojekyll file under root of published files (The wwwroot-folder).
3. Add a 404.html page
By default, when the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page.
The custom 404.html page below contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.
|
|
GitHub Pages
GitHub Pages is a static site hosting service from GitHub that takes HTML, CSS, and JavaScript files straight from a repository on GitHub. You can host your site on GitHub’s github.io domain or your own custom domain.
This feature is very useful when you want to show a demo website showing some functionality for the Blazor component or project you’ve build. By default this demo website will be hosted on the github.io domain.
Create gh-pages branch
Before continuing, we need to create a separate branch from which the GitHub Pages will be served. Use the commands below to create a new branch named gh-pages and commit this to your GitHub repository.
|
|
Note that you can also use your favorite code editor (Visual Studio or Code) to create a new branch, commit and push.
Enable GitHub pages on your project
To enable the static hosting service on your repository, go to the Settings and scroll down to GitHub Pages and select for the Source the just created branch:
Now GitHub can host the static website, based on the files in this branch, however this branch does not yet contain any files, this will be implemented by the GitHub Actions.
GitHub Actions
GitHub Actions makes it easy to automate all your software workflows using CI/CD pipelines. Building, testing, and deploying your code right from GitHub.
Scenario
Our scenario is as follows: when new (example) code is checked in to the master branch, the Blazor WebAssembly example application should be build automatically and the updated files (.html, .js, .css and images) should be pushed to the gh-pages branch.
To achieve this, we need to create a new workflow from scratch:
A new editor is displayed where the steps should be defined in YAML.
The complete action looks like this:
|
|
Now commit this Action to the master branch and the new CI-CD will start running on your GitHub project:
.
Once the action is complete, you should be able to browse to the Blazor WebAssembly application hosted on github.io.
Conclusion
Developing and building Blazor applications or components and hosting an example WebAssembly Application is now very easy using new Blazor WebAssembly, combined with GitHub Pages and GitHub Actions. This blog is just a start, you can use this as a base and extend it to your own needs.
Demo projects
For some demo projects which using this flow, see: