CI/CD For Blazor Applications In Azure Devops

Azure Devops is the best suite for incorporating DevOps culture in a project or company. Azure DevOps contains some MicroApps associated with each stage of the software cycle.

Let’s review each MicroApps in Azure Devops,

• Azure Boards: Tool related to Agile and project planning
• Azure Repos: Tool for managing repos using Git or TFS
• Azure Pipelines: Tool for creating pipelines to implement continuous integration and continuous deployment
• Azure Test plan: Tool for managing manual and automation test
• Azure Artifacts: Tool for managing and delivering internal packages or libraries

In this article, we will keep the focus on Azure Pipelines, we will create a pipeline to verify, compile and publish a Blazor WebAssembly Application.

A Blazor WebAssembly App is a single page application (SPA) which means we can use a service for this kind of application to host our website. Azure has a service called Azure Static Web Apps that support, React, Vue.js, Blazor WebAssembly and other technologies.

First, we need to have a repo with a Blazor WebAssembly application using .NET 6 or 7.

Then we will create a new pipeline for this application, since Blazor is a dotnet application we can use the dotnet CLI to execute the unit tests, compile and publish the project.

On the screen you can select Azure repos git

And select the repository that contains the code related to your app:

We can select in the configuration “ASP.NET Core” and automatically we will have the normal steps for any .NET Application or just an empty job.

We also need to add a task to publish the artifacts to use it during the deploy. This is the final YAML file:

# ASP.NET Core
# Build and test ASP.NET Core projects targeting .NET Core.
# Add steps that run tests, create a NuGet package, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/dotnet-core

trigger:
- main

pool:
  vmImage: ubuntu-latest

variables:
  buildConfiguration: 'Release'

steps:
- task: DotNetCoreCLI@2
  displayName: Publish
  inputs:
    command: publish
    publishWebProjects: True
    arguments: '--configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory)'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

The artifactName is "drop" we need to use this name 

Let’s execute the pipeline and see if everything is working as expected. You can use the option save and run.

We need to wait and see a green status when the job finishes to confirm if the pipeline is working fine:

Now navigate to the release section and create a new pipeline for publishing the application in Azure.

Select the artifact from the current project and the pipeline created before:

Then add a new Stage and select an empty job:

We will see something like the following figure, you can enable continuous deployment using the option in the Artifacts section

You can enable the trigger now and close the windows. Then you can select the option “1 job, 1 task” in the Stages section to edit the current Job:

You will see the agent and no task in the list, for now select Azure pipelines as agent pool and ubuntu-latest in the agent specification:

At this point, we need to create a new site to host our Blazor Application. We can go to Azure and create a new Static Web App. This service is easy to use, and it works with many SPA frameworks (React.js, Vue.js, Angular and Blazor).

We can create a new site, select the plan type Free and in the source section, select Other. Finally, you can click on Review + create to confirm and create this site.

Now you can go to this new resource and get the deployment token, this is the only thing that we need to have in order to deploy our website from Azure DevOps to Azure.

Go back to the pipeline in the release section and add a new task to deploy in Static Web App:

In the configuration, you can skip the build for the app and the API and you can set the token generated in Azure for our website, in the working directory you select the folder where your app is published:

workingDirectory: $(System.DefaultWorkingDirectory)/_BlazorApp/drop/s/wwwroot

app_location: /

YAML Example:

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/_BlazorApp/drop/s/wwwroot'
    app_location: /
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: false
    azure_static_web_apps_api_token: 'ec0a21e27b48df7f44fba9c22b9f8deea20f114a83fc82f6ee5606711ececf181-05996584-e65e-4296-8e92-XXXXXXXXXXXXXXX'

We can skip app build and API build:

NOTE: regarding the token to deploy our app in Azure you can use a variable instead of set the token directly in the job also you can use a service like Azure key vault to save this value.

You can now save and create the first release to check if the deploy to Azure is working fine.

After saving the job and creating the first release we will see something like the following figure:

We can navigate to the site in Azure to check if the site is loading properly:

Now with these settings you have continuous integration and continuous delivery which means you can deploy a new version just by committing the changes to the repository or merging a pull request against the branch selected in the pipeline.

For more information, you can check the project in the following link: https://dev.azure.com/miguelteheran/Blazor%205/