Create and Deploy Angular 8 with CI/CD using Azure DevOps
Introduction
Angular started as AngularJS because it is one of the most popular Javascript frameworks to develop web-based and mobile apps but they rewrite it with TypeScript. Angular 8 was released on May 28, 2019 to include many features like dynamic importing for lazy routes, web workers, the support of TypeScript 3.4, faster re-build time…
In this article, we will take a walkthrough of how to create and deploy an Angular 8 app. You will walk through the various steps to:
- Create an Angular 8 App using a template in Visual Studio 2019 (From IDE or Marketplace).
- Push the code project to a shared repository git.
- Deploy it to a Web App under Azure App Service.
- Deploy it to a Web App under Azure App Service.
- Test the deployed app using Protractor.
- Deploy on Azure.
- CI/CD using Azure DevOps.
Prerequisite
[Visual Studio 2019]
You need to install the new version of Visual Studio 2019: https://visualstudio.microsoft.com/vs/
[Node]
You need to verify that you are running the latest Node.js version 8.x and npm version 8.x or greater by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.
https://nodejs.org/en/download/
[Angular Cli 8.3.1]
To install run the following in command line: npm install -g @angular/cli
verify version running: ng — version [Typescript]: https://www.typescriptlang.org/
Verify that you have version 3.6.2 or above. You can check by running tsc -v in any terminal window.
Create Angular App in Visual Studio 2019
Once you have these prerequisites, to start, you can open Visual Studio 2019 and search by Angular8 to get the template as below:
To verify if the template is installed as an extension.
Click on Extensions — > Manage Extensions.
Or you can download the template from Visual Studio Marketplace: https://marketplace.visualstudio.com/items?itemName=RebaiHamidaTrabelsi.Angular8
Getting Started with GitHub using Visual Studio 2019
Cloning and configuring a GitHub project in Visual Studio
You need to start by creating a new project in GitHub:
After, you need to come back to Visual Studio and connect to GitHub, you have to select the project that you already create it.
You can clone any repository in GitHub, but you need to folk it before.
In Visual Studio 2019, you can push, pull, create branches, and more. Find bellow that in this video:
Publish to Git Repo in Azure DevOps
You have another option to publish your application if you don’t want to use GitHub, you are able to publish to Git Repo in Azure DevOps from Visual Studio 2019 directly and in few clicks.
And if you prefer publishing in your own server, where you use git, you are able to configure that here:
Continuous integration and deployment
Create an Azure DevOps organization
Open Azure DevOps and login:
You need to start a new organisation, so, you have to choose New organisation, after you choose a name and you need to select the Git radio button, since the code is hosted in a GitHub repository or Git Repo or any Git source.
Start a new project
You need to click on New Project, after you add the project name, description is optional, you have to define the visibility to be public or private, and you can add more informations and you choose Create to submit the project creation and to begin configuring the project’s DevOps pipeline.
This is you first page for your project. It is still empty and nothing is configured until now.
Configure the Azure Pipelines pipeline
The first thing to do is to grant Azure DevOps access to the GitHub repository and import you files from GitHub to Azure DevOps.
You will receive an email to confirm the repo import:
Create the release pipeline
We choose the Pipeline section, we can mention your pipeline name and the agent pool. But remember to set the agent pool to Hosted VS2017, or else you may end up with the error:
