In this post, I will explain step by step process for setting up CI pipeline for the angular application using Azure DevOps Build. It is easy to set up continuous integration (CI) build for Angular application using Azure DevOps build.
Before we get started, see take a look at Prerequisite below.
Prerequisite for CI pipeline for angular application
- Azure DevOps account. If you don’t have an account, you may create at https://azure.microsoft.com/en-us/services/devops/. It is free!
- Once you have your account, you need an Organization and a Project.
- Last but not least, you need an Angular project in a repository.
Let’s configure our package.json file in the Angular application to include a script as shown below. This will be used while we configure our build.
"prepush": "npm run build --prod"
Let’s get started…
Create a New Build Pipeline
Navigate to your organization and choose the project in which you have your angular project repository. You will have to select a build from the left menu.
Click on "New" => "New build pipeline" as shown in the below image.
There are two ways of setting up a CI build. One is using “Classic Editor” and the other one is using “YAML“. We are going to see CI build setup using “Classic Editor” in this post.
Where is your code?
In this step, we need to choose the place where our repository exists. In our case, it is in the Azure git repository. Next is to select Project, Repository where your angular project code exists and lastly, select the branch. e.g. master.
Select a template
We are setting up CI for the angular project. In this case, we should choose one of the templates required for the angular projects. Since we do not have anything that supports our needs, we will choose “Empty Job“.
Configuring Tasks
We need to configure a couple of tasks to build our angular application. The first step is to provide basic information for the top-level selection.
Under “Pipeline“, provide the below information.
- Name. some meaningful name to understand our pipeline. E.g. we are setting up a build for our Web project for the master branch. E.g. “Web-master-CI”.
- Select “Azure Pipelines” as the Agent pool.
- Select “vs2017-win2016” as Agent specification. This is a virtual machine sitting somewhere in the cloud which will build our angular application.
Configure Get Resource
This step is to verify our existing selection, select as shown in the image below.
Adding Tasks
The first task is to add “npm install” task.
Configure the task as shown in the image.
The second task is to add “npm build” task.
Configure the task as shown in the image.
Third and final task is to add “publish build artifacts” task.
Configure the task as shown in the image.
We can save and queue the pipeline.
That’s it, we are done setting up CI build for our angular application. Once the build is done you will see the message as shown below.
To check the build details and the package, click on the “summary” tab as shown in the image below.
Conclusion
In this article, you learned how to set up a CI pipeline for the angular application using Azure DevOps build.
No comments:
Post a Comment