> ## Documentation Index
> Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Demo Azure Pipelines
> This tutorial builds a CI/CD workflow for a Blazor WebAssembly app using Azure Pipelines and deploys it to Azure Static Web Apps.
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](https://dev.azure.com/).
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:
```bash theme={null}
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:
```bash theme={null}
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:
```yaml theme={null}
# 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
| Variable | Description |
| ------------------ | ------------------------------------- |
| solution | Path to your `.sln` file (`**/*.sln`) |
| buildPlatform | Target platform (`Any CPU`) |
| buildConfiguration | Build mode (`Release`) |
Ensure your project has access to either Microsoft-hosted agents or self-hosted agents. Check **Project settings** > **Agent pools** to verify availability.
### 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](https://portal.azure.com/), 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:
```yaml theme={null}
# 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:
If all agents are busy, your builds queue:
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**:
```razor theme={null}
@page "/"
Home
Welcome to the KodeKloud Blog
This change was deployed automatically via CI/CD.
```
2. Push the update:
```bash theme={null}
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
| Step | Action |
| ---- | ----------------------------------------------- |
| 1 | Created Azure DevOps project & repo |
| 2 | Imported Blazor WebAssembly app |
| 3 | Built & tested with Azure Pipelines |
| 4 | Deployed to Azure Static Web Apps |
| 5 | Configured CI/CD for automatic builds & deploys |
Your automated workflow now ensures code changes flow seamlessly from Git to production.
## Links and References
* [Azure Pipelines Documentation](https://docs.microsoft.com/azure/devops/pipelines/)
* [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/)
* [Blazor WebAssembly Documentation](https://docs.microsoft.com/aspnet/core/blazor/)