Introduction
In this article, we will understand how to use Azure Repos, CI/CD using Pipeline in Azure DevOps, and Host the same in Azure App Service. We will create an Angular 10 project from scratch and perform all the steps. This is an End-to-end demo explaining the steps in detail from creating an angular project in VS Code to managing the source code in Azure DevOps and performing CI/CD to deploy the same in Azure App Service. We will use the current Azure portal settings which have changed over time.
Pre-Requisite for this Demo
- No prerequisite is required. Just follow the steps, but understand each step while performing it.
- 1 Hr. of your focused time is required to complete this demo.
The entire demo is divided into 3 articles, please find the details below.
- Part 1 - Angular 10 Project in Azure DevOps CI/CD with Azure Repos or GitHub and Hosting in Azure App Service
- Section 1: To Create Angular 10 Project and Run it locally on your machine
- Section 2: Create an Azure DevOps account and move the project source code into Azure
- Part 2 - Angular 10 Project in Azure DevOps CI/CD with Azure Repos or GitHub and Hosting in Azure App Service
- Section 3: Create Azure Portal Account to make use of Azure App Service to deploy our project
- Section 4: Create Resource groups, App Service plan, and App Service in Azure Services
- Part 3 - Angular 10 Project in Azure DevOps CI/CD with Azure Repos or GitHub and Hosting in Azure App Service
- Section 5: Configure CI/ CD for the Project by integrating Azure DevOps with Azure App Service.
Let's get started,
Section 1. Create An Angular 10 Project & Run It Locally In Your machine
Step 1. Create an Angular 10 Project in any editor of your choice, we are going to use VS Code.
- Open VS Code (always open it as administrator).
- Create a folder in any drive and manage your angular projects
- D:\Angular_10_Projects
- In the VS Code, use the shortcut ctrl + ~ to open the terminal and the respective path of the project folder as shown below

- Use the below command to install the latest version of angular, (Please skip the below step, if you don't want the latest version of angular).
- npm install -g @angular/cli@latest
- ng --version
- Note: Please ensure Node is installed before this process.
- Create an Angular project and name it using the below command.

- Open the project folder in VS Code, as shown below.
- File -> Open Folder

- After opening the folder, you will find all the files as shown below.

Step 2. Open the terminal and ensure you're inside the project path, then run the project using the below command.
- npm start
- It will prompt for angular analytics to be turned on/ off, you can type either one and proceed.

- Once the application is started successfully, you can open the app in a browser with the below URL.
- http://localhost:4200/











kalpana dayalanPosted Aug 13, 2020, 1:49 PM
Expectation of learner fulfilled here.
Vinoth MPosted Aug 7, 2020, 11:53 AM
Nice article. Easy to understand.
Prabhakaran CPPosted Aug 5, 2020, 2:01 PM
Great content... looks very clean and easy to follow
W Boyd TaylorPosted Aug 5, 2020, 12:56 PM
Great so far any idea when part 3 will be up?
Hamid KhanPosted Aug 5, 2020, 12:24 PM
Good start................... keep it up.............