Azure

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

Introduction


The CI/CD (Steady Integration/Steady Deployment) is a fantastic thing about the trendy DevOps atmosphere. It lets you automate the constructing, testing, and deployment of purposes. With Steady Integration (CI), the system will set off construct supply and run check go well with on every change or code checked in. If the construct passes all of the levels, it routinely deploys to a number of levels reminiscent of staging or manufacturing environments utilizing a launch pipeline. It known as Steady Supply (CD). You’ll be able to add a number of levels of software program bundle validation.

 

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.

 

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

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.

 

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

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.

 

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

 

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”.

 

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

 

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.

 

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

 

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.

 

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

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.

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

 

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
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops

 

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.
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops

 

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 
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops

 

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”.

 

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

 

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
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops
 

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
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops
 

Step 6 – Save construct a pipeline

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

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

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
Create Build Pipeline For Angular App And Download Artifacts Using Azure Devops

 

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.

 

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

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.

 

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

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.

 

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

 

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.

 

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

 

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.

 

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

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

 

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

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.

 

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

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. 

  1. # Node.js  
  2. # Construct a basic Node.js challenge with npm.  
  3. # Add steps that analyze code, save construct artifacts, deploy, and extra:  
  4. # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript  
  5.   
  6. set off:  
  7. – grasp  
  8.   
  9. pool:  
  10.   vmImage: ‘ubuntu-latest’  
  11.   
  12. steps:  
  13. – process: NodeTool@0  
  14.   inputs:  
  15.     versionSpec: ’12.x’  
  16.   displayName: ‘Set up Node.js 12.x’  
  17. – process: Npm@1  
  18.   displayName: ‘Angular CLI’  
  19.   inputs:  
  20.     command: customized  
  21.     verbose: false  
  22.     customCommand: ‘set up @angular/cli@7.3.1’  
  23. – process: Npm@1  
  24.   displayName: ‘npm set up’  
  25.   inputs:  
  26.     verbose: false  
  27.   
  28. – process: Npm@1  
  29.   displayName: Construct  
  30.   inputs:  
  31.     command: customized  
  32.     verbose: false  
  33.     customCommand: ‘run construct’  
  34.   
  35. – process: CopyPublishBuildArtifacts@1  
  36.   displayName: ‘Copy Publish Artifact: check’  
  37.   inputs:  
  38.     CopyRoot: dist  
  39.     Contents: ‘**’  
  40.     ArtifactName: check  
  41.     ArtifactType: Container  
  42.   
  43. – process: DownloadPipelineArtifact@2  
  44.   displayName: ‘Obtain Pipeline Artifact’  
  45.   inputs:  
  46.     targetPath: ‘ $(Construct.ArtifactStagingDirectory)/dist/AngularTest’  

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.

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close