Angular 10 Project In Azure DevOps CI/CD With Azure Repos Or GitHub And Hosting In Azure App Service - Part One


In this article, we will understand how to use Azure Repos, CI/CD using Pipeline in Azure DevOps, Hosting 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 manage the source code in Azure DevOps and perform 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 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:
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 managing 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/

Section 2 - Create An Azure DevOps Account & Move The Project Source Code Into Azure

  • Open Azure DevOps in the browser as shown below. Note: you can type Azure DevOps in Google and open the link as shown below,
  • Click the Sign in to Azure DevOps link
  • If you have a Microsoft email account, you can sign in with that account to log-in.
  • In this demo, I will create a new account and set it up.
  • Click on Create One option on the Sign-in page.
  • Provide the email address that you want to use for the Azure DevOps account or create a new email address.
  • Verify your email-id with the verification step provided by Microsoft and complete the account creation process.
  • Post the completion, it will redirect us to collect a few more details.
  • Click continue to get started with Azure DevOps.
  • Once the process is complete, you will be logged into Azure DevOps.
  • You can choose the visibility of the project you're going to create, i.e Public or Private, we will go with public access as shown below, 
  • Note: Private repository has restrictions in terms of users accessing source code in the free version. You need to upgrade the version based on your needs.
  •  Provide the name of the project and click Create project, and the project will be created, as shown below.
  • Click the Repos option and click Files. You will see the window, as shown below:
  • We have multiple options of connecting Azure DevOps with our local code repository,
  • As we have already created a project in our local environment, we can map the same hereby choosing the option which says, Push an existing repository from the command line 
  • Click the copy icon under Push an existing repository from the command line
  • Open the project in VS Code, and ensure git is installed in your machine to run git commands copied from Azure DevOps
  • You can download and install git from the URL,
  • Note: After installing git in your machine, close and open visual studio again.
  • In the terminal, stop the project, if it's running by typing Ctrl + C.
  • Paste the command copied from Azure DevOps here and click enter as shown below.
  • If you are not signed in to your Azure DevOps account through git, the below sign-in prompt will appear.
  • After signing in, the commands will be executed as shown below and the code will be pushed to Azure DevOps. A branch name master will be created by default. 
  • Go back to Azure DevOps page and refresh the Repos, you will see, all the code added into the cloud repository as shown below.
To explain the functionalities in the Azure DevOps, will write more articles later. In this article, we will cover how to use pipelines to configure CI/ CD with Azure App Service. 
Thanks! I really appreciate everyone for reading through this article.