pyramidsbuilder / blazor-pages

An example of how to automate the deployment of client-side Blazor to Github Pages

Blazor Pages

This project is an example of using Azure Pipelines / GitHub Actions to automatically deploy a client-side Blazor app to Github Pages. For a live demo, check the following link:

https://fernando.andreu.info/blazor-pages/

Microsoft Docs already contains a general overview of the steps needed for a successful deploy, including an example of the final result (repository / live site).

This project goes one step ahead by:

• providing the full solution from where the pages are built;
• showing the use of an auxiliary Shared project which could be re-used in the ASP.NET Core server (similarly to how the combined client- and server-side Blazor template does); and
• automating the entire build and deployment to GitHub Pages.

How it works

The CI pipelines first perform a normal dotnet publish of the app, which will generate a dist bundle ready to be deployed. This bundle is then pushed differently depending on the CI environment:

• Azure Pipelines: the bundle is force pushed to gh-pages by using raw Git commands
• GitHub Actions: an already existing action is used to push the bundle to gh-pages-from-actions (this will need to be renamed to gh-pages to host your website from this branch)

How to use this for your own project

The <base> url in index.html will need to be modified depending on where the project is deployed. If deploying on the root level, set segmentCount = 0 in 404.html as well.

When testing on localhost, the applicationUrl for IIS Express in launchSettings.json will need to be updated to reflect the same base url as in index.html.

Paths in the Azure Pipelines yaml file / GitHub Actions workflow may need to be updated accordingly.

The presence of the .nojekyll file in wwwroot can be quite important.

CI / CD

The Azure pipeline is expecting access to one variable group named GitHubPATGroup, which should contain the following three variables:

• GitHubPAT: A Personal Access Token with sufficient permission to (force) push to the gh-pages branch
• GitHubName: The name of the user committing to the gh-pages branch
• GitHubEmail: The email of the user committing to the gh-pages branch

The gh-pages branch must exist already for the deployment to be successful (this is a temporary limitation in the pipeline configuration).

In the case of GitHub Actions, only a single secret is needed: ACCESS_TOKEN, equivalent to GitHubPAT above. An example of a full deployment using GitHub Actions can also be found in my blazor-fractals repository.