How to Deploy Angular app to Azure using DevOps Pipelines

Prerequisites:

• An Azure account with active subscription.
• Azure DevOps (https://dev.azure.com/)
• Code editor (Vscode.)
• Node.js (Install the required npm package)

Step 1: Creating the Angular App and Test Locally.

• mkdir App
• cd App

create the app using

npm install -g @angular/cli

And we can run the application with the command

 Cd app name  

  Ng serve 

And we can access the application in the browser by accessing http://localhost:4200:

Step 2: Configure Azure App Service.

Login into https://portal.azure.com

• Create an App Service with a basic B1 App service Plan.

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 

click in Save:

Step 3: Create the Azure DevOps Project and connect to the App service instance.

Login into https://dev.azure.com/ and create a new project

Copy HTTPS link clone

Push from the local to remote repository using the below git commands on Git bash.

Cd app-name 

git add .

git commit -m “<commit message>”

git remote add origin <url to your Azure DevOps repo>

This brings a prompt, login into your Azure DevOps portal then this shows that the App has been push to the Azure repo

Step 4: Create a Build Pipeline.

To connect the pipeline to the App service instance created.

• Create pipeline.
• Choose Azure repose (YAML)
• Choosing Node.js with Angular

Using below YAML – azure-pipelines.yml code

# 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: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'dist'
    ArtifactName: 'dist'

As you can see below, running this store my build to Azure Artifact where Azure Releases can use them.

Step 5: Creating the release pipeline and Deploying to Azure

This is to push the code from the build pipeline from CI/CD to Azure Web App.

Enable continuous integration on the project

Choose azure app service deployment

save and click Release Pipeline

Copy default domain link past browser

Now we have a successful deployment, we can navigate on to the Web App URL https://angularlinx01.azurewebsites.net which should be running