Angular CI/CD using Azure DevOps Pipeline
Published: 2020-04-16 10:51:17

In the previous article, we discussed DevOps and also looked into getting started with Azure DevOps. In case you missed please try to go through it before we start, for better understanding.

Here’s the link for the previous article: [Azure DevOps! What’s that??](https://medium.com/@srashtisj/azure-devops-whats-that-9005aa9283f7)

In this article, we will see how we can apply CI/CD to our Angular application, using Azure Pipeline. This will be a quick step by step guide.

**Step 1:**  After login to [Azure DevOps portal](https://azure.microsoft.com/en-in/services/devops/), create a new project

![](https://cdn-images-1.medium.com/max/2000/1*xU6nfPX7GkWrVHV37Vf71w.png)

**Step 2:**  Click on Pipelines inside side menu options

![](https://cdn-images-1.medium.com/max/2660/1*YyWeCCsNe56yDQGPKfkvbQ.png)

**Step 3:**  Now, click on Create Pipeline

![](https://cdn-images-1.medium.com/max/2000/1*XaO9WsZtd5j2EB3m36iG1Q.png)

**Step 4:**  Select the source of Repository, as you can see, there are many options
here we’re connecting with GitHub

![](https://cdn-images-1.medium.com/max/2000/1*4NOdEbSudvMhrBzNT6Gvgg.png)

**Step 5:**  After Authentication, select the repository - you will be able to see all the repositories in your account (Public/Private) — Select the repository

![](https://cdn-images-1.medium.com/max/2000/1*2bsY3XLzbvurN6_rWB5LkQ.png)

**Step 6:**  In the configuration section, choose the predefined template for Angular

![](https://cdn-images-1.medium.com/max/2000/1*-IjvOO8jo2ZTm8s6_nZhMw.png)

**Step 7:**  After that, you’d be able to see some YAML code — Azure DevOps worked on YAML code

<iframe src="https://medium.com/media/b792bf39d55156594dc426d1dcaedd70" frameborder=0></iframe>

Over here you can see we set a **trigger** on master branch — so whenever there will be any change in the master branch this pipeline will be triggered

In the **scripts** section, you can see it’s the same command which we run while creating a production release. (It can be updated accordingly)

**Step 8:** You can also add some more tasks in the .yml file from the side Tasks section

![](https://cdn-images-1.medium.com/max/2248/1*PM9u6ggSqvZcKT17Ckm2KQ.png)

There are a lot of actions available in the Tasks section, you just have to choose whatever you required.

![](https://cdn-images-1.medium.com/max/2000/1*BeDWR9ioJNGDhz8p0Djqew.gif)

**Step 9:**  Click on “**Save and Run**”. 
This .yml file will be saved in your repository itself, you can update it from here or from GitHub anytime as per the requirements.

![](https://cdn-images-1.medium.com/max/2000/1*jHguJqiKaEnhUoSs4YwyNw.png)

**Step 10:**  Now, you will be able to see this screen

![](https://cdn-images-1.medium.com/max/2214/1*14reM2a9L9WMOecmYh354g.png)

Boom!!! — Here you go, it’s done!

![](https://cdn-images-1.medium.com/max/2000/1*SePXDgPLnRTELMebvNKbDw.png)

So, this was the basic setup — And I know it was too easy to get started with Azure DevOps Pipeline. 😊

In the upcoming article, we will check how we can add an approval step before deployment. It’s required at the time of production release or will talk more about YAML — please let me know which one you want first, in the comment section. Stay connected!

Feel free to connect with me on [Twitter ](https://twitter.com/srashtisj)and [LinkedIn](https://www.linkedin.com/in/srashtisj/) 💖