Azure DevOps — Setting up CI for a Web Application (Angular / React / Vue)

This is the first article in the series to setup a CI/CD for a full-stack application. We will go through the options we have with Azure platform for setting up CI/CD for a Full stack Application with services deployed as microservices on to AKS (Azure Kubernetes Service).

What is DevOps?

DevOps is the union of people, process, and products to enable continuous delivery of value to your end users.

What is Azure DevOps?

It is a set of services that gives you the tools you need to do DevOps. With Azure DevOps, you can build, test, and deploy any application, either to the cloud or on premises.

Azure Devops is a hosted service and it provides several tools you can use for better team collaboration. It also has tools for automated build processes, testing, version control, and package management.

We will use Azure Pipelines for building and deploying our Web application. Microsoft Azure Pipelines is a cloud service that you can use to automatically build, test, and deploy your code project. Azure Pipelines works with many different languages and app types.

What is continuous integration?

Continuous integration (CI) is the process of automating the build and testing of code every time a team member commits changes to version control.

CI encourages developers to share their code and unit tests by merging their changes into a shared version control repository after every small task completion. Committing code triggers an automated build system to grab the latest code from the shared repository and to build, test, and validate the full master branch (also known as the trunk or main).

CI Pipeline

A pipeline defines the continuous integration process for the app.

1. It’s made up of steps called tasks ➊. It can be thought of as a script that defines how your build, test, and deployment steps are run.
2. The pipeline is configured to run automatically when you submit code changes ➋. You connect your pipeline to a source repository like GitHub, Bitbucket, or Subversion.
3. A build agent ➌ builds or deploys the code. When your build or deployment runs, the system begins one or more jobs. An agent is installable software that runs one build or deployment job at a time. Because we’re using Azure Pipelines, we can use a Microsoft-hosted agent. With Microsoft-hosted agents, maintenance and upgrades are taken care of for us. Each time we run a pipeline, we’ll get a fresh virtual machine. There are six virtual machine images to choose from, including Ubuntu 18.04, which is what we use.
4. The final product of the pipeline is a build artifact ➍. Think of an artifact as the smallest compiled unit that we need to test or deploy the app. In a Web app it is production ready static files: html, css, javascript, font files, images etc.

We will walk through the steps we need to follow for CI process within Azure Pipeline explained above.

1. Sign in to Azure Pipelines. After you sign in, your browser goes to https://dev.azure.com/my-organization-2123and displays your Azure DevOps dashboard.
2. Within your selected organization, create a project. If you don’t have any projects in your organization, you see a Create a project to get started screen. Otherwise, select the Create Project button in the upper-right corner of the dashboard.

Create the pipeline

1. I will use a sample Angular project which on my Github account”
   https://github.com/srinikusunam/angular-9-registration-login-example
2. Sign in to your Azure DevOps organization and navigate to your project.
3. In your project, navigate to the Pipelines page. Then choose the action to create a new pipeline.
4. Walk through the steps of the wizard by first selecting GitHub as the location of your source code.
5. You might be redirected to GitHub to sign in. If so, enter your GitHub credentials.
6. When the list of repositories appears, select your Angular sample repository.
7. Azure Pipelines will analyze the code in your repository and recommend Node.js with Angular template for your pipeline. Select that template for a quick start but if we want we can build these steps one by one using GUI pipeline provides.
8. Azure Pipelines will generate a YAML file for your pipeline. Select Save and run, then select Commit directly to the master branch, and then choose Save and run again.
9. A new run is started. Wait for the run to finish.

Select your Github repository

NodeJs with Angular configuration

Pipeline YAML file

When you’re done, you’ll have a working YAML file (azure-pipelines.yml) in your repository that's ready for you to customize if needed.

Watch the pipeline run

Under Jobs, select Job. Next, trace the build process through each of the steps. Optionally, when the build completes, to see the job output as a text file, select View raw log.

Here, you see the steps that the build definition created. It prepares the VM, fetches the latest source code from GitHub, and then builds the app.

At this point, you can build the Angular web project through the pipeline.

But where do the results of the build go? Right now, the output of the build remains on the temporary build server. We need a way to store this to an artifactory. You can store build artifacts in Microsoft Azure Pipelines so they’re later available to others on your team after the build completes. Another option is to deploy the final build artifacts to Node/IIS server running on Azure.

In next article we will explore CD (Continuous Deployment) process using Azure platform.