Demo Azure Pipelines

In this tutorial, we’ll build a complete CI/CD workflow for a Blazor WebAssembly app using Azure Pipelines and deploy it to Azure Static Web Apps. By the end, code changes pushed to Git will automatically build, test, and publish your site.

1. Create an Azure DevOps Project

1. Sign in to Azure DevOps.
2. Click New project, name it KodeKloudBlog, and create.

2. Initialize the Repository

1. In your new project, go to Repos and create a Git repository.

2. Clone it locally:

   git clone https://[email protected]/jeremymorgankodekloud/KodeKloudBlog/_git/KodeKloudBlog
   cd KodeKloudBlog
   

3. Copy your Blazor WebAssembly app into this folder.

4. Commit and push:

   git add .
   git commit -m "Initial commit"
   git push -u origin master
   

Now your code is versioned:

3. Create the Build Pipeline

3.1 Scaffold the Pipeline

1. Navigate to Pipelines > Create Pipeline.

   

2. Select Azure Repos Git as the source.

   

3. Choose the ASP.NET Core template and review the YAML:

   # azure-pipelines.yml
   trigger:
     branches:
       include:
         - master
   
   pool:
     vmImage: 'windows-latest'
   
   variables:
     solution: '**/*.sln'
     buildPlatform: 'Any CPU'
     buildConfiguration: 'Release'
   
   steps:
     - task: NuGetToolInstaller@1
       displayName: 'Install NuGet'
   
     - task: NuGetCommand@2
       inputs:
         restoreSolution: '$(solution)'
   
     - task: VSBuild@1
       inputs:
         solution: '$(solution)'
         msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true'
         configuration: '$(buildConfiguration)'
   
     - task: VSTest@2
       inputs:
         platform: '$(buildPlatform)'
         configuration: '$(buildConfiguration)'
   

3.2 YAML Variables

3.3 Run and Inspect

• Save and run the pipeline.
• If prompted to grant permissions for the agent pool, approve to continue.

• After completion, click the build to see each step’s logs:

Review your agent pool:

4. Deploy to Azure Static Web Apps

1. In the Azure portal, search Static Web Apps > Create.
2. Configure subscription, resource group, and name (e.g., KodeKloudBlog).
3. Choose Free plan.
4. Under Deployment Details, select Azure DevOps, then your organization, project, repo, and branch.

On Advanced, pick region and API settings if needed:

Review and Create:

Once provisioned, you’ll see this confirmation:

Azure DevOps automatically creates a second pipeline for the Static Web App.

5. Adjust the Static Web App Pipeline

Edit the generated YAML to ensure the right VM image and paths:

# azure-static-web-apps.yml
name: Azure Static Web Apps CI/CD

trigger:
  branches:
    - master
pr:
  branches:
    - master

jobs:
  build_and_deploy_job:
    displayName: Build and Deploy Job
    pool:
      vmImage: 'ubuntu-latest'
    variables:
      - group: Azure-Static-Web-Apps-purple-island-038b9b710-variable-group
    steps:
      - checkout: self
        submodules: true

      - task: AzureStaticWebApp@0
        inputs:
          app_location: '/'           # Path to Blazor WebAssembly app
          api_location: 'api'         # Azure Functions folder (optional)
          output_location: 'wwwroot'  # Build output folder

Commit and run. When both pipelines finish successfully:

Check the pipelines dashboard:

Once agent pools are healthy, you’ll see green checks:

6. Verify the Live Site

Browse to your Static Web App URL and confirm the Blazor app is live:

7. Continuous Updates via Git

Any commit to master now triggers the CI/CD pipelines automatically.

1. Modify Pages/Home.razor:

   @page "/"
   <PageTitle>Home</PageTitle>
   
   <h1>Welcome to the KodeKloud Blog</h1>
   <p>This change was deployed automatically via CI/CD.</p>
   

2. Push the update:

   git pull
   git add Pages/Home.razor
   git commit -m "Update homepage content"
   git push
   

Pipelines will rebuild and redeploy your site in minutes.

Recap

Your automated workflow now ensures code changes flow seamlessly from Git to production.

Links and References

• Azure Pipelines Documentation
• Azure Static Web Apps
• Blazor WebAssembly Documentation