Deploy Angular App in Azure Static Web Apps

Static Web Apps deployment — Azure DevOps:

Azure cloud -

1. Create a Static Web Apps Resource under a resource group.
2. On selecting code location select Others (Instead of GitHub and Azure DevOps).
3. Once done, copy the Deployment token from Manage Deployment Token.

Click this button to get the token

Azure DevOps -

1. Create/ Init a repo and push your angular code.
2. Click the setup build button above the files.
3. A yaml file will be created (Enter/Edit according to the below reference)

Initially, it’ll be like this

trigger:
- master
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool@0
inputs:
versionSpec: '16.x'
displayName: 'Install Node.js'
- script: 
npm install -g @angular/cli
npm install
ng build
displayName: 'npm install and build'

You must add the commands below and mention that deployment token to connect our repo with that Azure static web app we created.

And most importantly the app_location should be the location where the src file is located

- task: AzureStaticWebApp@0
inputs:
app_location: "/"
api_location: ""
output location: "dist/YOUR_APP_NAME"
env:
azure_static_web_apps_api_token: "PLACE_YOUR_TOKEN_HERE"

Save changes and Start Deploying, once the deployment is done your application will be hosted in that URL of the static web app we created.

You can specify the node version, build commands and other directory names according to your project.