Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops

Introduction

The CI/CD (Continuous Integration/Continuous Deployment) is a beauty of the modern DevOps environment. It allows you to automate the building, testing, and deployment of applications. With Continuous Integration (CI), the system will trigger build source and run test suit on each change or code checked in. If the build passes all the stages, it automatically deploys to multiple stages such as staging or production environments using a release pipeline. It is referred to as Continuous Delivery (CD). You can add multiple stages of software package validation.

In this article, you will learn about how to build an Angular application using a build pipeline and how to download the build artifacts.

Prerequisites

• You must have an Azure DevOps account.
• Repo and required branches must be set.

Create a new Build pipeline

The following are the steps to create a build pipeline with Azure DevOps.

Step 1. Login to Azure DevOps and select the project that you want to create a build/release pipeline

Step 2. To create a new build pipeline, click on Pipelines >> Pipelines >> Create Pipeline. You can see the following screen when you create a pipeline for any repo first time.

Subsequently, to create a new build pipeline, click on Pipelines >> Pipelines >> New Pipeline.

Step 3. Select the “Source control”

When you click on the “New Pipeline” or “Create pipeline” button, the following screen is appearing. Here, you have multiple choices to create a DevOps build pipeline with.

The simplest way to create a pipeline is creating with “Classic editor”. In this article, I am going to explain with classic editor however it is very similar to “Azure Repos Git (YAML). You can also view an equivalent YAML script for all tasks defined in the editor.

Next is to select the source control that you want to use. There are multiple options that are available to select as source control. I am selecting “Azure Repos Git” as my source code located at the Azure DevOps repo. Some other information you need to fill up such as Project name, repo name, and default branch. Then click on the “Continue” button.

When you select other than the “Azure Repos Git” option, you have to provide authorization information such as user credentials or auth tokens, etc.

Step 4. select the job template.

There are many built-in job templates available to create a pipeline for a specific application, such as the Android app, Desktop app, ASP.net app, etc. You can create your own template for creating a build pipeline. To do so, select “Empty job”.

It will redirect to the Agent job screen. Refer to the following snapshot. Here, you can add multiple tasks that is required for creating a build for your app and that depends on nature application that you want to build.

Step 5. Add a task to your build pipeline.

You can add multiple tasks based on requirements. It depends on the nature of the application that you trying to build. To add the task, Click on the “+” button.

Azure DevOps build pipeline creates a new build machine every time when you request the build. It means that you have to install all your project dependencies before actually build the app.

In this article, we have targeted Angular applications. So, you need to add the following tasks.

Task 1. Install Node.js

To develop and build an Angular app, node.js must install in your build machine in order to run all commands. To add node.js to build machine, search and select the “Node.js tool installer” task.

Here, you have to specify the node.js version that you want to use to build your Angular app. I have specified it as “12. x”. The following property must be defined for this task.

• Display name: This is the task name.
• Version Spec: The version of node.js that you want to use.
  

Task 2. Install Angular CLI

The next task is to install Angular CLI on your build machine. The Angular CLI can be installed via the “npm” task. You can also specify the Angular CLI version that you have used to develop an Angular app. The following property must be defined for this task.

• Display name: This is the task name
• Command: It is a command type. There are four predefined command types for this npm task: ci, install, publish, and custom. Here, I have selected the “custom” command type
• Command and arguments: It contains the command that needs to run with the task. To install Angular CLI, use the “install @angular-cli” command. Here, you can also specify the CLI version
  

Task 3. Install Project dependencies

The next task is to install project dependencies. To install dependencies, add the “npm” task. The following property must be defined for this task.

• Display Name
• Command: select “install” from the available options
• The working folder that contains package.json
  

Task 4. Build your application

The next task is to build your application as all dependencies are installed in the previous task. To perform the build, add the “npm” task. The following properties must be defined for this task.

• Display Name
• Command: select “custom” from the available options
• Command and arguments: specify the build command e.g. “run build”

If you pass any argument with the command then it can be followed by “—“ e.g. “run build -- --aot=true”.

After this task, the build pipeline able to build your Angular append artifact is ready to use. You can download the build artifacts but for the same, you need to add a few more tasks to your build pipeline.

Task 5. Create a zip to build artifacts

To create a zip of build artifacts, add the “Archive files” task. The following properties must be defined for this task.

• Display Name
• Root folder or file to archive
• Archive type: e.g. 7z, .tar.gz, zip, etc.
• Archive file to create: it is the name of the output file
  

Task 6. Download the artifacts

To download the artifacts, you need to publish it. To do so, add the “Publish Pipeline Artifacts” task. The following properties must be defined for this task.

• Display Name
• File or directory path
• Artifact name (optional)
• Artifact publish location
  

Step 6. Save build a pipeline

To save the build pipeline, click on the “Save & queue” button and select “Save”.

In the above steps, the builds artifact is created in zip format. If you want to use your build in a release pipeline, you need to just copy build artifact (do not zip it). To do so task 5 is replaced with the following task.

Add a new task “Copy and Publish Build Artifacts” after your build task and the following properties must be defined for this task.

• Display Name
• Contents: to select all the content, specify “**”
• Artifact name
• Artifact type
  

Also, task 6 is replaced with the following task. Add the task “Download pipeline Artifact” to build pipelines just after the “Copy and Publish Build Artifacts” task. The following properties must be defined for this task.

• Display Name
• Download artifacts produced by
• Matching patterns
• Destination directory
  

View equivalent YAML script for a specific task

You can also view (read-only) equivalent YAML scripts for a specific task. To view, select the task and click the “View YAML” link button. You can also copy YAML for tasks using the “Copy to clipboard” button.

Queuing Build pipeline manually

To queue build pipeline, go to “Pipelines >> Pipelines” then select the pipeline that you want to build. Here, you have the option to queue or edit the pipeline. To run (queue) pipeline, click on the “Run Pipeline” button.

Now, it is asking for some parameters to run the build pipeline manually. Following are the parameters must be specified:

• Agent tool
• Agent Specification
• Branch/tag

Once, you have selected the required parameters, click on the “Run” button.

You can also view the task-wise status or log. To do so, select a job or build. It redirects you to the following screen where you can see all the tasks that you defined and additional tasks defined by Azure DevOps such as initialize job, post job checks out, finalize job, and report build status.

Download build Artifacts

When you run or queue build pipelines, you can download artifacts at the end of the “Publish pipeline Artifact” task. To do so, click on your build job and there is an option to download the artifact on the right side.

When you click the artifact link, it redirects to the artifact download page.

You can also download the build artifact for the old build. To do so, select build or run and click on the “published” link. T redirect to the above screen where you can download the build artifact.

YAML Code for above mention task.

Following is the YAML code for building pipelines in case you do not want to use the classic editor.

# Node.js
# Build a general Node.js project with npm.
# 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: '12.x'
  displayName: 'Install Node.js 12.x'
- task: Npm@1
  displayName: 'Angular CLI'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install @angular/[email protected]'
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: Build
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build'

- task: CopyPublishBuildArtifacts@1
  displayName: 'Copy Publish Artifact: test'
  inputs:
    CopyRoot: dist
    Contents: '**'
    ArtifactName: test
    ArtifactType: Container

- task: DownloadPipelineArtifact@2
  displayName: 'Download Pipeline Artifact'
  inputs:
    targetPath: ' $(Build.ArtifactStagingDirectory)/dist/AngularTest'
Summary

In this article, you learned how to build an Angular application using build pipelines and how to download the build artifacts.