34.1 C
Sunday, June 23, 2024

How to Deploy Angular app to Azure using DevOps Pipelines


  • 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

- master

  vmImage: ubuntu-latest

- task: NodeTool@0
    versionSpec: '16.x'
  displayName: 'Install Node.js'

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

- task: PublishBuildArtifacts@1
    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

I have been working as Cloud engineer in System Administration field in Microsoft Azure, Microsoft Office 365 / Exchange Servers / Endpoint Manager / Azure Active Directory (IAM) / PowerShell

Related Articles


Please enter your comment!
Please enter your name here