Creating CI/CD Pipeline For Angular And Hosting In Azure App Service

A Basic guide for implementing Azure Devops CI/CD Pipeline for angular application which get triggered on code check-in

About CI/CD

 

A CI/CD Pipeline implementation, or Continuous Integration/Continuous Deployment, is the backbone of the modern DevOps environment. It bridges the gap between development and operations teams by automating the building, testing, and deployment of applications

 

Prerequisites 

• An Azure subscription. You can get free access through visual studion msdn subscription. 

Create Azure App Service

• Login to your Azure account
• Search for App service and click on create option.
• Specify resource group, web app name and System type
• Click on Save & validate Your URL.

 

Install node, Angular cli and Git to your system.

 

Create New Project in Azure Devops

• Select Azure DevOps to open the Projects page. Choose the organization, and then select New project.
• Enter information into the form provided. Provide a name for your project. 
• Choose the visibility, initial source control type, and work item process.
• Select Create. The welcome page appears.

Clone Your Azure devops projects to Visual Studio Code.

 

 

Create new Build Pipeline

• Go to pipeline and select new pipeline
• Click on use the classic Editor view (simple ui to configure)
• Select Azure Repos Git as Source and go with default values and click on continue
• Select Node.js & grunt template from dropdown and click on apply
• Configure Build pipeline
  
  

• Add above 4 tasks to Pipeline it will appear as the default. You need to configure and rename as below,
  
  

• Clone the above task to create npm. Build task and specify configuration as below,
  
  
   
• Configure Archive Files task and specify configuration as below,
  
  
  
  
• Configure and publish task as below.
  
  

 Create Release Pipeline

• Click on release and new release pipeline
• Configure your CD Environment
• Click on task and add task as below,
  
  

Here you need to select App service based deployement and once you enter your subscription it will populate created app service in dropdown, you need to select the target app service from drop down.

• Enable Trigger as below,
  
   

Now go to Visual Studio code and open your package.json file. Just after build command add "build-prod": "ng build --prod" publish your code and validate the build pipeline and release pipeline whether or not both got triggered.

 

Once everything is configured properly you will able to see your application running on Azure app service. You can validate by accessing public URL for your app service.