In the previous article, we discussed how we can set up a pipeline with multiple stages in Azure Pipelines. In this article we will discuss how we can build the Angular and Node.js apps in the pipeline itself.
I usually put all the build processes in one stage. In that stage I have one job for the backend and one job for the frontend. Check out the Azure documentation on basics about the azure pipelines.
My folder structure
My project has a backend and frontend folder in the same repository. So I am using one pipeline. Of course you can use multiple pipelines if you have two separate repositories this (that is usually done), but you can also put it in one pipeline.
My project looks like this:
├──backend
│ ├──node_modules
│ ├──src
│ └──test
└──frontend
├──dist
├──node_modules
└──src
Angular – Building the frontend
First, we’re going to build the backend in the pipeline. It’s not much different than doing it from localhost.
At first, we will install the dependencies, then build the angular app and at last publish the build files to the pipeline.
You can choose to use yarn or npm for this project, but npm is supported by default and yarn is not. I will use npm tasks, but I will show you how to use yarn tasks too.
We install the dependencies with npm. We can use an azure pipeline tasks for this. Not all tasks will work for YAML pipelines, but you can use this handy toolbar that shows you which tasks are supported.
I will use this npm task. Instead of a npm install, I’m using npm ci. Read some more about npm ci here. You will want to use npm ci in CI/CD pipelines, so your package management will be more consistent. You can add the task to a job by using the steps keyword. See a code example below.
After pulling the dependencies we will want to build the app. You can do this by using the build command from Angular.
We can run the ng build command with a bash task. We use ‘npm run ng build’ instead of ‘ng build’, because it will error on ‘ng is not installed’ if you use the ng command directly.
At last we will want to publish the files to the pipeline. You can do this by publishing the frontend folder to the pipeline. There’s also a task for that.
In the end your yaml looks like this:
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
stages:
- stage: Build
jobs:
- job: Frontend
steps:
- task: Npm@1
inputs:
command: 'ci'
workingDir: '$(System.DefaultWorkingDirectory)/frontend'
- task: Bash@3
inputs:
targetType: 'inline'
script: 'npm run ng build'
workingDirectory: '$(System.DefaultWorkingDirectory)/frontend'
- task: PublishPipelineArtifact@1
inputs:
targetPath: '$(Pipeline.Workspace)/frontend/dist'
artifact: 'frontend'
publishLocation: 'pipeline'
The workingDir is the directory where the command executes. The $(System.DefaultWorkingDirectory) variable is a predefined variable by Azure. Read more about the predefined variables here. They’re really handy!
Yarn instead of npm
If you want to use yarn instead of npm, you can use the same bash command. You can do an yarn –frozen-lockfile as follows
- task: Bash@3
inputs:
targetType: 'inline'
script: 'yarn install --frozen-lockfile'
Node.js – Build the backend
Now that we’ve build and published the frontend, we can build the backend. Since it uses node, it’s very similar. You can also, of course, use different backend languages like Java or C#. You can find the tasks for that in the task index I referenced earlier.
We will do the same as in the frontend, install dependencies, build project and publish it to the pipeline. Your yaml will look like this
trigger:
- master
pool:
vmImage: 'ubuntu-latest'
stages:
- stage: Build
jobs:
- job: Frontend
steps:
- task: Npm@1
inputs:
command: 'ci'
workingDir: '$(System.DefaultWorkingDirectory)/frontend'
- task: Bash@3
inputs:
targetType: 'inline'
script: 'npm run ng build'
workingDirectory: '$(System.DefaultWorkingDirectory)/frontend'
- task: PublishPipelineArtifact@1
inputs:
targetPath: '$(Pipeline.Workspace)/frontend'
artifact: 'frontend'
publishLocation: 'pipeline'
- job: Backend
steps:
- task: Npm@1
inputs:
command: 'ci'
workingDir: '$(System.DefaultWorkingDirectory)/backend'
- task: Bash@3
inputs:
targetType: 'inline'
script: 'npm run build'
workingDirectory: '$(System.DefaultWorkingDirectory)/backend'
- task: PublishPipelineArtifact@1
inputs:
targetPath: '$(Pipeline.Workspace)/backend'
artifact: 'backend'
publishLocation: 'pipeline'
In the next article we will discuss how we can integrate tests in the pipeline. I will show you how to run the tests, how to get the test coverage and how to publish a summary of the tests.