Build and Deploy Angular Application to Azure Static Web App using Azure DevOps

Azure Static Web App is a modern web app service that offers streamlined full-stack development from source code to high global availability. The benefits include a seamless developer experience that includes a Visual Studio Code extension, CICD, and much more.

Microsoft made the service “GA” (generally available) and currently supports 2 plans. The free plan allows you to get started free while the standard plan includes all of the free features as well as the ability to customize functionality such as authentication and APIs.

In this post, I will walk you through building and deploying an Angular application to Azure static web app using two separate YAML-based pipelines(Build & Deploy) in Azure DevOps.

Pre-Requisites:

• An Azure account (you can use a free trial, If you don’t have one, you can create an account for free)
• Azure DevOps (If you need help getting started, see Create one)
• Angular code within Azure Repo
• Familiarity with Azure DevOps tasks

Create Static Web App:

Step 1: Navigate to the Azure portal, create a new resource by searching for Static Web apps, and click “create”.

Step 2: Fill out the details by choosing the subscription and resource group. Then go with the Static Web App details: choose the name — “my-first-angular-app” — and stick with the Free plan. Then select your region — mine is “West Europe”.

Note: Since I am going to leverage Azure DevOps as the deployment method, I selected “Other” as the option.

Step 3: So, now you’re ready to create your Static Web App. Hit “Review+create” and see what happens. This is the overview of my app:

Step 4: Once the deployment is successful, navigate to the newly created Static Web Apps resource and select Manage deployment token from the overview page. Make a note of this value for the next steps.

Create the Pipeline task in Azure DevOps:

We will be creating two pipelines, one for build and one for deployment using the YAML file. We can have this YAML file within the repo in advance or we can append the same during pipeline creation.

Note: Please keep the Angular code within the Azure Repo before creating the pipeline.

Build Pipeline:

Step 1: Log into the Azure DevOps project where the angular code is residing. Click on Pipelines on the left.

Step 2: Click New Pipeline and select Azure Repos Git.

Step 3: Select the Azure repo name where the angular code is kept.

Step 4: Click Starter Pipeline to write the YAML file.

Step 5: Copy and Paste the below content within the Starter Pipeline section.

# Build pipeline
trigger:
  batch: false
  branches:
    include:
     - master
  paths:
    exclude:
     - readme.md
pool:
  vmImage: ubuntu-latest
steps:
 - task: NodeTool@0
   displayName: 'Use Node 14.x'
   inputs:
     versionSpec: 14.x
 - script: |
     npm install -g @angular/cli
   displayName: 'install angular cli'
 - task: Npm@1
   displayName: 'npm install '
   inputs:
     workingDir: '$(System.DefaultWorkingDirectory)'
     verbose: false
 - task: Npm@1
   displayName: 'npm build'
   inputs:
     command: custom
     workingDir: '$(System.DefaultWorkingDirectory)'
     verbose: false
     customCommand: 'run build'
 - task: PublishBuildArtifacts@1
   inputs:
     PathtoPublish: 'dist'
     ArtifactName: 'app'
     publishLocation: 'Container'

For a better understanding of directory structure visit Build Configuration

Step 6: Click Save and Run.

Deploy Pipeline:

Repeat the above Step 1 to Step 4 to create a deploy pipeline.

Step 5: Copy and Paste the below content within the Starter Pipeline section.

# Deploy pipeline
trigger:
 batch: false
 branches:
  include:
  - master
 paths:
  exclude:
  - readme.md
stages:
 - stage: Deploy
   pool:
     vmImage: 'ubuntu-latest'
   jobs:
    - job: DeployWebAppProd
      steps:
       - task: DownloadPipelineArtifact@2
         inputs:
           buildType: 'specific'
           project: 'ab43f2c4-cbec-8f34-b6a6-b1b96af2c4bf'
           definition: '408'
           buildVersionToDownload: 'latest'
           allowPartiallySucceededBuilds: true
           allowFailedBuilds: true
           artifactName: 'app'
           targetPath: '$(Pipeline.Workspace)'
       - bash: cd $(Pipeline.Workspace); echo $(ls)
       - bash: cd $(Pipeline.Workspace)/app; echo $(ls)
       - task: AzureStaticWebApp@0
         inputs:
           cwd: '$(Pipeline.Workspace)'
           app_location: '/'
           skip_app_build: true
           skip_api_build: true
           verbose: true
         env:
           azure_static_web_apps_api_token: '$(deployment_token)'

Note: Replace the values within the DownloadPipelineArtifact@2 task based on your values.

Step 6: We need to provide the azure_static_web_apps_api_token value. To do that select Variables in the pipeline.

Step 7: Create a new variable named deployment_token (same as the above name mentioned in release YAML). Check the keep this value secret box and click Ok. Finally, Save and run.

The pipeline will execute and deploy the application to azure static web apps. Now you can access the application using the static web app URL.

Conclusion:

I hope this detail has shown how to build and deploy the Angular application using Azure DevOps to Azure static web app with two separate YAML files.

If you found this interesting or have any feedback, please let me know in the comments section.

Happy learning!

About the Author:
Raghavendra BN is a DevOps Engineer, currently working in Version 1’s Foundation’s team. Follow Version 1 and Raghavendra BN for more blogs around Microsoft Azure and Azure DevOps.