Source: - dev.to - dev.to

Date: 2019-12-20

Introduction

Azure DevOps is a Microsoft product that, alongside other features such as Source Code Management and Project Management, allows your team to set up Continuous Integration for their project(s).

Continuous Integration is a development practice that enables your team to improve quality, and deliver more stable software, benefiting both the team, and the end-user.

With continuous integration, several checks (referred to as a pipeline) are automatically run on certain triggers, such as a code change. These checks typically ensure that the code can be compiled successfully, and that all tests are passing. Automatically running these checks, in an isolated environment, takes away most of the issues that do work on my machine, and ensures our code-base is in good health at all times.

Creating a build pipeline

Now that we have our code either in an Azure DevOps repository or on GitHub (with our GitHub account connected through Project Settings), we can create a build pipeline for that repository by navigating to Pipelines from the project’s sidebar.

Click on New Pipeline, select Azure Repos Git or GitHub (or anything else if you’re using any of the other available options), click the corresponding repository (if you selected GitHub, you’ll be prompted to authorize Azure Pipelines) and select Node.js with Angular as the pipeline configuration. This will preconfigure the pipeline to run npm install, and ng build —-prod.

In the review step, we’ll see an example of the yaml file that’s being generated by Azure DevOps.

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# <https://docs.microsoft.com/azure/devops/pipelines/languages/javascript>

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'

The default configuration will trigger for each change on the master branch. It’ll use an ubuntu image, and executes two steps:

Clicking Save And Run will add the yaml file your repository, keeping your build pipeline configuration together with the source code. We can even make changes to the yaml file locally, and commit them, Azure DevOps will pick up these changes, and update your build pipeline accordingly.

Once the configuration file has been saved, a new build is triggered, and after a while, all steps should have been completed successfully.

Some of the above steps are added by Azure DevOps (Prepare, Initialize, Checkout, Post Checkout and Finalize), while others are defined as part of our yaml configuration (Install Node.js and npm install and build). If you want to get more information for a specific step, clicking it will show all the output for that particular step:

Finetuning the build pipeline

We haven’t made any changes to the default Node.js with Angular configuration yet. Before adding additional steps, let’s change the configuration in such a way that installing the dependencies, and building the project are two separate steps: remove the global installation of @angular/cli and make use of npx instead. To edit the build pipeline, click pipelines from the project’s sidebar, select the corresponding build pipeline, and click edit on the upper right corner.