Demo Azure Pipelines

​

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://jeremymorgankodekloud@dev.azure.com/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
   

​

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:

​

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.

​

5. Adjust the Static Web App Pipeline

# 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

If all agents are busy, your builds queue:

​

6. Verify the Live Site

​

7. Continuous Updates via Git

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
   

​

Recap

​

Links and References

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