In order to use the output from a build in Azure DevOps later, you need to publish it as a Build Artifact. This article will show you how to configure that.
This examples uses an Angular based Single Page Application (SPA) build using the Nx monorepo tools, however the general process can be applied to any SPA framework once you know the build commands.
Create a new Azure Pipeline
- In Azure DevOps, go to Pipelines > Pipelines
- Select 'New Pipeline" (or "Create Pipeline if you don't have one)
- Connect to your Repo
- Mine is in Azure Repos Git, so I will be using that
- Select your Repo
- Configure your pipeline template
- I selected the "Node.js with Angular" option for my example, however any of the Node.js options should work
- Complete Review, then Save (not "Save and Run") your pipeline
- I created a new folder for mine and gave it a unique name
- I also recommend creating a new branch while testing, as best practice
Install Node, npm, and your Command Line Interface (CLI)
- Update the NodeTool task to your Node Version
- I used Node 14, as that matches my project's environment
-
Create 'npm install CLI' script task
- Add a new
script
task above the 'npm install and build' script task - Set the first line to
npm install -g <ListOfCLIs>
to include the CLI(s) that you will need on the machine to build your project- I needed the Angular (
@angular/cli
) and Nx (@nrwl/cli
) CLIs for my project
- I needed the Angular (
- Specify the version of the CLI(s) to match your project
- Mine used version 12 for both Angular and Nx
- Update the displayName to
npm install <yourCLIName> CLI
- In my example, I used
npm install Angular CLI and Nx CLI
- In my example, I used
- Final script task should look like:
- script: | npm install -g @angular/cli@12 @nrwl/cli@12 displayName: 'npm install Angular CLI and Nx CLI'
- Add a new
-
Update the 'npm install and build' script task
- Simplify the task to just
npm install
(we are already install the global tools needed in the step above) - Task should look like this:
- script: | npm install displayName: 'npm install'
- Simplify the task to just
Update the Pipeline to Build and Publish
I have two different environments that I wanted to build and publish, 'staging' and 'production', so I am going to do this twice and use separate subfolders for each one.
- Create 'build staging' task
- Copy the 'npm install' script task and paste a new copy
- Replace
npm install
with your project build command- Mine is
nx build account-info-manager:build --configuration=staging --outputPath=dist/staging
- account-info-manager is my project
- staging is a custom configuration defined in my project
- outputPath is set to create a separate folder called 'staging' under the typical Angular dist folder
- Change displayName to 'build staging' (or the name that is applicable for your environment)
- Mine is
- Add a Publish Build Artifacts task
- Add a Task to the Pipeline by clicking "+ Task"
- Search for "Artifacts"
- Select the "Publish build artifacts tasks" and click "Add"
- Set the values based on your build path in the 'build staging' task
- My Path to publish is set to
$(Agent.BuildDirectory)/s/dist/staging
- My Artifact name is set to
staging
- Keep Artifact publish location as
Azure Pipelines
- Click the "Add" button
- My Path to publish is set to
- Save your Pipeline
- Create 'build production' task
- Copy the 'build staging' script task and paste a new copy
- Replace
staging
withproduction
in your build commands- Mine is
nx build account-info-manager:build --configuration=production--outputPath=dist/production
- account-info-manager is my project
- production is a configuration defined in my project
- outputPath is set to create a separate folder called 'production' under the typical Angular dist folder
- Mine is
- Add a Publish Build Artifacts task
- Set the values based on your build path in the 'build production' task
- My Path to publish is set to
$(Agent.BuildDirectory)/s/dist/production
- My Artifact name is set to
production
- Keep Artifact publish location as
Azure Pipelines
- Click the "Add" button
- My Path to publish is set to
- Set the values based on your build path in the 'build production' task
- Save, then Run your Pipeline
You now have an Build Artifact that can be used in Azure DevOps Releases! (Once it completes, of course)
If you would like deploy your newly created builds to Azure Static Web Apps (and have different environments + approval), check out my post on that
Top comments (0)