Publish an Angular Application to Azure static web apps with Azure Devops

Microsoft introduced App Service Static Web Apps in Preview at Build 2020 as”Azure static web apps“, a service which allows web developers to build and deploy website to any environment from Github repository for free. Developers can deploy applications in minute while taking the advantage of scaling and cost savings offered by azure functions as backend. One of the frequent questions that i heard from the developers was the availability of Azure Devops support with Azure static web apps.

I have already published an article which demonstrates how to deploy to Azure Static Web Apps using GithubActions. Azure static web apps team announced the public preview of Azure Devops with Azure static web apps yesterday.

In this post you I will walk you through on how to deploy an angular application to Azure static web apps using Azure Devops.

PreRequisites:

Step 1 : Create a Devops repository

Navigate to Dev.Azure.com and create a new Devops Repository as below

Azure Devops repository

Step 2 : Import your static web application to Azure Devops repository

https://github.com/microsoft/static-web-apps-gallery-code-samplesNext step is to import the web application from any source control to your newly created Azure Devops repository. In this case i am importing the same “Meme generator” app which was made of Angular. Meme4Fun is an app to create custom programming memes from a picture and it also identifies features of people in the image which is available as part of code samples for Azure static web apps.

Import Repository to Azure Devops

Step 3 : Create a static web app on Azure

Next step is to create the static web application on azure, navigate to azure portal and create a new resource by searching for Static Web apps, and create it.

Note : Since I am going to leverage Azure Devops as the deployment method, select Other as the option.

Choose Devops as the Deployment

Once the deployment is successful, navigate to the new Static Web Apps resource and select Manage deployment token.

Manage deployment token

Step 4: Create the Pipeline task in Azure Devops

If you are using Azure Devops to deploy applications in the past, you will need to have the pipeline in plact to deploy to particular resource. In this case, lets create a build pipeline to deploy the angular application.

Next step is to select the template, since we are deploying an angular application, you can select the template as angular with nodejs

Angular template

Also for static web apps it is important to include the following step in the yaml which has the app_locationapi_location, and output_location , you need to pass those values if you have those details if not keep it empty.

Different values details

and the final configure YAML will look similar to the below,

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- master
pool:
  vmImage: ubuntu-latest
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'
- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'
- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      api_location: "api"
      output_location: "dist/meme4fun"
  env:
      azure_static_web_apps_api_token: $(deployment_token)

Next step is to provide the The azure_static_web_apps_api_token value is self managed and is manually configured. Select Variables in the pipeline and create a new variable named as “deployment_token”(matching the name in the workflow) below.

Add new Variable
Paste the deployment_token value which was copied from Azure portal

Make sure to check “Keep the value secret” and save the workflow and run.

With that step Azure Devops will execute the pipeline and deploy the application to azure static web apps.

Successful deployment

Now you can access the application from the static static web app from the URL.

Static web app with azure devops deployment

If you had any trouble in executing the above steps, you can watch the same tutorial published as a video here.

It’s great to see that with few steps of configuration, i was able to deploy the application with Azure Devops. If you have enabled backend support with the azure functions, it can be deployed as well. Support with Azure Devops has been one of the most requested features by developers and great to see it in live now. It’s your chance to explore various application deployments with different frameworks, hope this is useful. Cheers!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.