Blazor Pages

This project is an example of using Azure Pipelines 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 Azure pipeline first performs a normal dotnet publish of the app, which will generate a dist bundle ready to be deployed. This bundle is then force pushed into the gh-pages branch, which is the standard branch name used when deploying to GitHub Pages (this can be changed in your project settings).

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 will 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