Deploy Angular app to Azure with Azure DevOps Pipeline

Login to your Azure Account (https://portal.azure.com).
Step: 1.1 Create a Web App
Click on Create a resource → Search Web App → Create

Step: 1.2
Azure subscription you have to create/select and:
And select resource group
Give your application a unique name, and fill all fields as in the following screenshot.

Step: 1.3

Once it is created you can check your application in App Service or search for your application in the search bar and you can see the URL to the application:

This is the default page that will appear when you try to access it:

Step: 1.4

IMPORTANT

For Linux:
There is a VERY IMPORTANT configuration that we must do in order to be able to run an Angular application in an App Service in Azure.
PM2 is an Advanced production process manager for node.js. This allows us to run applications and run processes inside Node. In order to configure it, go to the App Service you just created > Configuration > and in the “Startup Command” add the command :

pm2 serve /home/site/wwwroot - no-daemon - spa

and click in Save:

For Windows:
Create web.config file under src directory in your angular application and paste following code:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
 <rewrite>
 <rules>
 <rule name="Angular4" stopProcessing="true">
 <match url=".*" />
 <conditions logicalGrouping="MatchAll">
 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

Then add below configuration in your angular.json file:

"assets": [
 "src/favicon.ico",
 "src/assets",
 "src/web.config"
 ]

Step: 2.1

Creating Services in Azure DevOps

In Azure DevOps (https://dev.azure.com/) we need to create a repository:

Step: 2.2
We can then push our code to the repository by accessing the Angular project folder and using the commands:

git init
git remote add origin REPOSITORY_URL
git add .
git commit -m “Initial commit”
git push origin main

Step: 2.3

Creating the Service Connection

In Azure DevOps we need to create a service connection. Go to “Project Settings” >> Click On “Service Connections” >> Click On “New Service Connection” >> Select “Azure Resource Manager” >> Click On “Next” >> Select Service Principal (Automatic) and fill up the required fields:

Step: 2.4.1

Creating the Pipeline

Now that the Angular code is in the repository and we already created in the Repo, we can then create the pipeline. Go to “Pipelines” and click in “Create Pipeline”

Select the “Azure Repos Git”:

Step: 2.4.2
Select your project
Step: 2.4.3
Select “Node.js”
Step: 2.4.4
And then you should see the following page:

Step: 2.4.5
Now you can delete everything below the comments and we will create it from scratch. Remove it.
Below you can see the complete yml file, and I will also explain each step (note that in a YML file, the amount of spaces/tabs matters, so you need to be careful with that): and click in “Save and run”:

# Node.js
# Build a general Node.js project with npm.
# 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'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: BuildJob
    pool:
      vmImage: 'ubuntu-latest'
    steps:
      - task: NodeTool@0
        inputs:
          versionSpec: '16.x'
        displayName: 'Install Node.js 16.x'

      - script: |
          cd '$(System.DefaultWorkingDirectory)/angularapp/'
          npm install -g @angular/cli
          npm install
          ng build --prod
        displayName: 'npm install and build'

      - task: ArchiveFiles@2
        displayName: 'Archive files'
        inputs:
          rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist/angularapp'
          includeRootFolder: false
          archiveType: zip
          archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
          replaceExistingArchive: true
          
      - task: PublishBuildArtifacts@1
        inputs:
          PathtoPublish: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
          ArtifactName: 'drop'
          publishLocation: 'Container'

- stage: Deploy
  displayName: 'Deploy to Development'
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deployment
    pool:
      vmImage: 'ubuntu-latest'
    environment: Development
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureWebApp@1
            displayName: 'Deploy App Service'
            inputs:
              azureSubscription: 'replace your service connection name'
              appType: 'webAppLinux'
              appName: 'angularapp'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|16-lts'

In the Build stage, we are:
Installing Node version 16
Installing angular CLI and building the application (note I’m first using the cd command to open the app folder, and after that I’m installing Angular CLI and building with the command)
Creating the packages to be deployed.

If we access now the App Service URL, we should see the application deployed:

Thanks for reading! Any comments and suggestions are most welcome.