Create Construct Pipeline For Angular App And Obtain Artifacts Utilizing Azure Devops

On this article, you’ll study find out how to construct an Angular software utilizing a construct pipeline and find out how to obtain the construct artifacts.

Conditions

• You could have an Azure Devops account.
• Repo and required branches have to be setup 

Create a brand new Construct Pipeline

The next are the steps to create a construct pipeline with Azure Devops.

Step 1

Login to Azure DevOps and choose your challenge that you just need to create construct/launch pipeline

Step 2

To create a brand new construct pipeline, click on on Pipelines >> Pipelines >> Create Pipeline. You’ll be able to see the next display screen while you create a pipeline for any repo first time.

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

 

Step 3 – choose the “Supply management”

While you click on on the “New Pipeline” or “Create pipeline” button, the next display screen is showing. Right here, you may have a number of decisions to create DevOps construct pipeline with.

The only method to create a pipeline is creating with “Traditional editor”. On this article, I’m going to clarify with traditional editor nevertheless it is rather much like “Azure Repos Git (YAML). You can too view an equal YAML script for all duties outlined within the editor.

 

Subsequent is to pick the supply management that you just need to use. There are a number of choices which are accessible to pick as supply management. I’m choosing “Azure Repos Git” as my supply code positioned on the Azure DevOps repo. Another info it is advisable to refill reminiscent of Undertaking identify, repo identify, and default department. Then click on on the “Proceed” button.

When you choose aside from the “Azure Repos Git” possibility, you must present authorization info reminiscent of person credential or auth token, and so forth.

Step 4 – choose job template

There are numerous built-in job templates accessible to create a pipeline for a particular software, such because the Android app, Desktop app, ASP.web app, and so forth. You’ll be able to create your individual template for making a construct pipeline. To take action, choose “Empty job”.

It would redirect to the Agent job display screen. Refer the next snapshot. Right here, you may add a number of duties that’s required for making a construct on your app and that’s rely upon nature software that you just need to construct.

Step 5 – Add a process to your construct pipeline

You’ll be able to add a number of duties based mostly on necessities. It depends upon the character of the applying that you just making an attempt to construct. So as to add the duty, Click on on the “+” button.

Azure DevOps construct pipeline creates a brand new construct machines each time while you request the construct. It signifies that you must set up all of your challenge dependencies earlier than really construct the app.

On this article, we now have focused Angular software. So, it is advisable to add the next duties.

Job 1 – Set up Node.js

To develop and construct an Angular app, node.js should set up in your construct machine with a view to run all instructions. So as to add node.js into construct machine, search and choose the “Node.js instrument installer” process.

Right here, you must specify the node.js model that you just need to use to construct your Angular app. I’ve specified it to “12.x”. The next property should outline for this process.

• Show identify: That is the duty identify
• Model Spec: The model of node.js that you just need to use

Job 2 – Set up Angular CLI

The following process is to put in Angular CLI to your construct machine. The Angular CLI will be put in by way of the “npm” process. You can too specify the Angular CLI model that you’ve got used to develop an Angular app. The next property should outline for this process.

• Show identify: That is the duty identify
• Command: It’s a command sort. There are 4 predefined command varieties for this npm process: ci, set up, publish, and customized. Right here, I’ve chosen “customized” command sort
• Command and arguments: It incorporates the command that should run with the duty. To put in Angular CLI, use “set up @angular-cli” command. Right here, it’s also possible to specify the CLI model.

Job 3 – Set up Undertaking dependencies

The following process is to put in challenge dependencies. To put in dependencies, add the “npm” process. The next property should outline for this process.

• Show identify
• Command: choose “set up” from the accessible choices
• The working folder that incorporates bundle.json 

Job 4 – Construct your software

The following process is to construct your software as all dependencies are put in within the earlier process. To carry out the construct, add the “npm” process. The next properties should outline for this process.

• Show identify
• Command: choose “customized” from the accessible choices
• Command and arguments: specify the construct command e.g. “run construct”

Should you cross any argument with the command then it may be adopted by “—“ e.g. “run construct — –aot=true”.

After this process, the construct pipeline in a position to construct your Angular append artifact is able to use. You’ll be able to obtain the construct artifacts however for a similar, it is advisable to add a couple of extra duties to your construct pipeline. 

Job 5 – Create a zipper to construct artifacts

To create a zipper of construct artifacts, add the “Archive recordsdata” process. The next properties have to be outlined for this process.

• Show identify
• Root folder or file to archive
• Archive sort: e.g 7z, .tar.gz, zip, and so forth.
• Archive file to create: it’s the identify of the output file

 

Job 6 – Obtain the artifacts

To obtain the artifacts, it is advisable to publish it. To take action, add the “Publish Pipeline Artifacts” process. The next properties have to be outlined for this process.

• Show identify
• File or listing path
• Artifact identify (non-compulsory)
• Artifact publish location

 

Step 6 – Save construct a pipeline

To save lots of construct pipeline, click on on the “Save & queue” button and choose “save”. 
 

Within the above steps, the builds artifact is created in zip format. If you wish to use your construct in a launch pipeline, it is advisable to simply copy construct artifact (don’t zip it). To take action process 5 is changed with the next process.

Add a brand new process “Copy and Publish Construct Artifacts” after your construct process and the next properties have to be outlined for this process.

• Show identify
• Contents: to pick all of the content material, specify “**”
• Artifact identify
• Artifact sort

Additionally, process 6 is changed with the next process. Add the duty “Obtain pipeline Artifact” to construct pipelines simply after the “Copy and Publish Construct Artifacts” process. The next properties have to be outlined for this process.

• Show identify
• Obtain artifacts produced by       
• Matching patterns  
• Vacation spot listing

View equal YAML script for a particular process

You can too view (read-only) equal YAML script for a particular process. To view, choose the duty and click on the “View YAML” hyperlink button. You can too copy YAML for duties utilizing the “Copy to clipboard” button.

Queuing Construct pipeline manually

To queue construct pipeline, go to “Pipelines >> Pipelines” then choose the pipeline that you just need to construct. Right here, you may have the choice to queue or edit the pipeline. To run (queue) pipeline, click on on the “Run Pipeline” button.

Now, it’s asking some parameters to run the construct pipeline manually. Following are the parameter should specify:

• Agent instrument
• Agent Specification
• Department/tag

As soon as, you may have chosen the required parameters, click on on the “Run” button.

You can too view the duty clever standing or log. To take action, choose a job or construct. It redirects you to the next display screen when you may see all duties that you just outlined and extra duties outlined by Azure Devops reminiscent of initialize job, submit job checks out, finalize job, and report construct standing.

Obtain construct Artifacts

While you run or queue construct pipelines, you may obtain artifacts on the finish of the “Publish pipeline Artifact” process. To take action, click on in your construct job and there may be an choice to obtain artifact on the proper facet.

 

While you click on the artifact hyperlink, it redirects to the artifact obtain web page.

 

You can too obtain the construct artifact for the previous construct. To take action, choose construct or run and click on on “printed” hyperlink. T redirect to the above display screen the place you may obtain the construct artifact.

 

YAML Code for above point out process

Following is the YAML code for construct pipelines in case you don’t want to make use of traditional editor. 

Abstract

On this article, you realized find out how to construct an Angular software utilizing construct pipelines and find out how to obtain the construct artifacts.