Customize JavaScript for Azure Pipelines

If you need a version of Node.js and npm that isn't already installed on the Microsoft-hosted agent, use the Node tool installer task. Add the following snippet to your azure-pipelines.yml file.

- task: UseNode@1
  inputs:
    version: '16.x' # replace this value with the version that you need for your project

If you need a version of Node.js/npm that isn't already installed on the agent:

1. In the pipeline, select Tasks, choose the phase that runs your build tasks, and then select + to add a new task to that phase.

2. In the task catalog, find and add the Node Tool Installer task.

3. Select the task and specify the version of the Node.js runtime that you want to install.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

See multi-configuration execution.

If you have tools that are development dependencies in your project package.json or package-lock.json file, install your tools and dependencies through npm. The exact version of the tools gets defined in the project, isolated from other versions that exist on the build agent.

Use a script or the npm task.

Use a script to install with package.json

- script: npm install --only=dev

Use the npm task to install with package.json

- task: Npm@1
  inputs:
     command: 'install'

Run tools installed this way by using the npm npx package runner, which detects tools installed this way in its path resolution. The following example calls the mocha test runner but looks for the version installed as a development dependency before using a globally installed (through npm install -g) version.

- script: npx mocha

To install tools that your project needs but that aren't set as development dependencies in package.json, call npm install -g from a script stage in your pipeline.

The following example installs the latest version of the Angular CLI by using npm. The rest of the pipeline can then use the ng tool from other script stages.

- script: npm install -g @angular/cli

Use the npm or command-line tasks in your pipeline to install tools on your build agent.

To install npm packages with a script in your pipeline, add the following snippet to azure-pipelines.yml.

- script: npm install

To use a private registry specified in your .npmrc file, add the following snippet to azure-pipelines.yml.

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

To pass registry credentials to npm commands via task runners such as Gulp, add the following task to azure-pipelines.yml before you call the task runner.

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

Use the npm or npm authenticate task in your pipeline to download and install packages.

If your builds occasionally fail because of connection issues when you restore packages from the npm registry, you can use Azure Artifacts with upstream sources, and cache the packages. The credentials of the pipeline automatically get used when you connect to Azure Artifacts. These credentials are typically derived from the Project Collection Build Service account.

If you're using Microsoft-hosted agents, you get a new machine every time you run a build - which means restoring the dependencies every time, which can take a significant amount of time. To mitigate, you can use Azure Artifacts or a self-hosted agent - then you get the benefit of using the package cache.

Use a script stage to invoke Yarn to restore dependencies. Yarn gets preinstalled on some Microsoft-hosted agents. You can install and configure it on self-hosted agents like any other tool.

- script: yarn install

Use the CLI or Bash task in your pipeline to invoke Yarn.

Use compilers such as Babel and the TypeScript tsc compiler to convert your source code into versions usable by the Node.js runtime or in web browsers.

If you have a script object set up in your project package.json file that runs your compiler, invoke it in your pipeline by using a script task.

- script: npm run compile

You can call compilers directly from the pipeline by using the script task. These commands run from the root of the cloned source-code repository.

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

Use the npm task in your pipeline if you have a compile script defined in your project package.json to build the code. Use the Bash task to compile your code if you don't have a separate script defined in your project configuration.

Configure your pipelines to run your JavaScript tests so that they produce results formatted in the JUnit XML format. You can then publish the results using the built-in publish test results task.

If your test framework doesn't support JUnit output, add support through a partner reporting module, such as mocha-junit-reporter. You can either update your test script to use the JUnit reporter, or if the reporter supports command-line options, pass those options into the task definition.

The following table lists the most commonly used test runners and the reporters that can be used to produce XML results:

The following example uses the mocha-junit-reporter and invokes mocha test directly by using a script. This script produces the JUnit XML output at the default location of ./test-results.xml.

- script: mocha test --reporter mocha-junit-reporter

If you defined a test script in your project package.json file, you can invoke it by using npm test.

- script: npm test

Publish test results

To publish the results, use the Publish Test Results task.

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

Publish code coverage results

If your test scripts run a code coverage tool, such as Istanbul, add the Publish Code Coverage Results task. When you do so, you can find coverage metrics in the build summary and download HTML reports for further analysis. The task expects Cobertura or JaCoCo reporting output, so ensure that your code coverage tool runs with the necessary options to generate the right output. For example, --report cobertura.

The following example uses nyc, the Istanbul command-line interface, along with mocha-junit-reporter and invokes npm test command.

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

Use the Publish Test Results and Publish Code Coverage Results tasks in your pipeline to publish test results along with code coverage results by using Istanbul.

Set the Control Options for the Publish Test Results task to run the task even if a previous task has failed, unless the deployment was canceled.

Package applications to bundle all your application modules with intermediate outputs and dependencies into static assets ready for deployment. Add a pipeline stage after your compilation and tests to run a tool like webpack or ng build by using the Angular CLI.

The first example calls webpack. To have this work, make sure that webpack is configured as a development dependency in your package.json project file. This runs webpack with the default configuration unless you have a webpack.config.js file in the root folder of your project.

- script: webpack

The next example uses the npm task to call npm run build to call the build script object defined in the project package.json. Using script objects in your project moves the logic for the build into the source code and out of the pipeline.

- script: npm run build

Use the CLI or Bash task in your pipeline to invoke your packaging tool, such as webpack or Angular's ng build.

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

Add the following tasks to your pipeline:

• npm

  • Command: custom
  • Command and arguments: install -g @angular/cli

• npm

  • Command: install

• bash

  • Type: inline
  • Script: ng build --prod

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

Add the following tasks to your pipeline:

• npm

  • Command: custom
  • Command and arguments: install -g webpack webpack-cli --save-dev

• bash

  • Type: inline
  • Script: npx webpack --config webpack.config.js

Gulp gets preinstalled on Microsoft-hosted agents. Run the gulp command in the YAML file:

- script: gulp                       # include any additional options that are needed

If the steps in your gulpfile.js file require authentication with an npm registry:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp                       # include any additional options that are needed

Add the Publish Test Results task to publish JUnit or xUnit test results to the server.

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

Add the Publish Code Coverage Results task to publish code coverage results to the server. You can find coverage metrics in the build summary, and you can download HTML reports for further analysis.

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

The simplest way to create a pipeline if your app uses Gulp is to use the Node.js with gulp build template when you create the pipeline. This template automatically adds various tasks to invoke Gulp commands and to publish artifacts. In the task, select Enable Code Coverage to enable code coverage by using Istanbul.

Grunt gets preinstalled on Microsoft-hosted agents. To run the grunt command in the YAML file:

- script: grunt                      # include any additional options that are needed

If the steps in your Gruntfile.js file require authentication with an npm registry:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt                      # include any additional options that are needed

The simplest way to create a pipeline if your app uses Grunt is to use the Node.js with Grunt build template when you create the pipeline. This automatically adds various tasks to invoke Gulp commands and to publish artifacts. In the task, select the Publish to TFS/Team Services option to publish test results, and select Enable Code Coverage to enable code coverage by using Istanbul.

Publish files to Azure Pipelines

To upload the entire working directory of files, use the Publish Build Artifacts task and add the following to your azure-pipelines.yml file.

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

To upload a subset of files, first copy the necessary files from the working directory to a staging directory with the Copy Files task, and then use the Publish Build Artifacts task.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

Publish a module to an npm registry

If your project's output is an npm module for use by other projects and not a web application, use the npm task to publish the module to a local registry or to the public npm registry. Provide a unique name/version combination each time you publish.

Examples

The first example assumes that you manage version information (such as through an npm version) through changes to your package.json file in version control. The following example uses the script task to publish to the public registry.

- script: npm publish

The next example publishes to a custom registry defined in your repo's .npmrc file. Set up an npm service connection to inject authentication credentials into the connection as the build runs.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

The final example publishes the module to an Azure DevOps Services package management feed.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

For more information about versioning and publishing npm packages, see Publish npm packages and How can I version my npm packages as part of the build process?.

Deploy a web app

To create a .zip file archive that is ready for publishing to a web app, use the Archive Files task:

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

To publish this archive to a web app, see Azure web app deployment.

Publish artifacts to Azure Pipelines

Use the Publish Build Artifacts task to publish files from your build to Azure Pipelines.

Publish to an npm registry

To create and publish an npm package, use the npm task. For more information about versioning and publishing npm packages, see Publish npm packages.

Deploy a web app

To create a .zip file archive that is ready for publishing to a web app, use the Archive Files task. To publish this archive to a web app, see Azure Web App deployment.

Build and push image to container registry

Once your source code builds successfully and your unit tests are in place and successful, you can also build an image and push it to a container registry.