CI Angular Apps in Azure DevOps

Angular Apps Continues Integration and Continues Delivery using Azure DevOps

Angular is one if not the most common framework, that many developers which write C# code feel more inclined, in order to leave ASP.NET MVC. I mean come on, for me, Separation of Concern is done for it when you write C# code into the html. For some developer having the css, html and Javascript in one file might be appealing but for those who like separate files like me I would stay with Angular. besides it come with a lot of out of the box functionality.

Azure DevOps formally known as Team services which was formally know as TFS. Gives DevOps power to the developer by making it easy and simple to own our pipeline. Which is a skill you gain in this new world. Forget about having a whole DevOps department. Every developer can setup out a pipeline.

Let’s assume that you already have the repo part nailed down. so, I would focus more into CI and CD part of the pipeline. Let’s start with CI.

On Azure DevOps, in your project on the left side panel click on Pipelines, then click on Build, finally click on New pipeline. It should be in the middle of the screen.

After you clicked on New pipeline. you will be taken to the next step which is selecting you source code. Select Use the visual designer, the other steps requires a bit more knowledge of .yaml. We are going to do it the long way which is probably the way many developer will choose.

Select the correct source, then click continue.

Now, it will ask you what kind of temple you want to use. Since we want to CI a Angular app that mean we need Node.js. I will should you how to do it from the ground up. Let’s select a Empty pipeline.

You are going to add a Node Tool Installer task. I would just change the version of Node to be install. I would change it to install 10.x

Next, We add the first npm task. This one will install Angular CLI. We select it to be a custom Command, and we enter install -g @angular/cli

The second npm task we install dependencies. We also use a custom command.

Our last npm task will be the one that build the app for us. we use once again a custom command because we want to use the build script in our package.json. run-script build will compile the Angular app. Please note that this will leave the dev mode enable. to compile in a production you just write run-script build:prod

Finally, we add the Publish Build Artifacts task. We set the Path to publish to be disc and the artifact name to be disc as well.

Don’t forget to name you new CI otherwise, you will end with an auto generate name.

Once you save all this you now are able to run this Build definition again your repository. The final touch is to able this build definition to be trigger every single time you or someone push code to master. Go to Triggers, Select Enable continues integration. Save it!

Make a change in your code and push it to master it will automatically be build.

CONGRATULATIONS! you have a CI for your Angular App!

Next Step, I’ll you how to CD your Angular App in Azure DevOPs

CD Angular App in Azure DevOps

Spread the word
  • Yum