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

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.

1. 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
2. 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
3. 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/
  

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 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 for 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 that 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, https://git-scm.com/downloads.
• 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 the Azure DevOps page and refresh the Repos, you will see, all the code added into the cloud repository as shown below.
  

Note. 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.

Please refer to Part - 2 and Part 3 of this blog to complete the entire demo.

• Angular 10 Project in Azure DevOps CI/CD with Azure Repos or GitHub and Hosting in Azure App Service - Part 2
• Angular 10 Project in Azure DevOps CI/CD with Azure Repos or GitHub and Hosting in Azure App Service - Part 3

Thanks! I really appreciate everyone for reading through this article.