blazor-pages
blazor-pages copied to clipboard
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 togh-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 thegh-pages
branch -
GitHubName
: The name of the user committing to thegh-pages
branch -
GitHubEmail
: The email of the user committing to thegh-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.