Build, test, and deploy JavaScript and Node.js apps

  • Artikkeli

TFS 2017

You can use an Azure DevOps pipeline to build and test JavaScript and Node.js apps, and then deploy or publish to targets.

Note

The following guidance applies to Team Foundation Server (TFS) version 2017.3 and newer.

Prerequisites

You must have the following items in Azure DevOps:

  • A project. If you don't have one, Create a project now.
  • A pipeline. If you don't have one, create a pipeline now.

Classic

  1. Fork the following repo at GitHub.

    https://github.com/Azure-Samples/js-e2e-express-server

  2. After you have the sample code in your own repository, create your first pipeline and select the Empty process template.

  3. Select Process under the Tasks tab in the pipeline editor and change the properties as follows:

    • Agent queue: Hosted Ubuntu 1604

  4. Add the following tasks to the pipeline in the specified order:

    • npm

      • Command: install

    • npm

      • Display name: npm test
      • Command: custom
      • Command and arguments: test

    • Publish Test Results

      • Leave all the default values for properties

    • Archive Files

      • Root folder or file to archive: $(System.DefaultWorkingDirectory)
      • Prepend root folder name to archive paths: Unchecked

    • Publish Build Artifacts

      • Leave all the default values for properties

  5. Save the pipeline and queue a build to see it in action.

Read further to learn about some more common ways to customize your JavaScript build process.

Set up your build environment

Use a specific version of Node.js

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.

To update just the npm tool, run the npm i -g npm@version-number command in your build process.

Use multiple node versions

You can build and test your app on multiple versions of Node with the Node tool installer task.

See multi-configuration execution.

Install tools on your build agent

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

Manage dependencies

In your build, use Yarn or Azure Artifacts to download packages from the public npm registry. This registry is a type of private npm registry that you specify in the .npmrc file.

Use npm

You can use npm in the following ways to download packages for your build:

  • Directly run npm install in your pipeline, as it's the simplest way to download packages from a registry without authentication. If your build doesn't need development dependencies on the agent to run, you can speed up build times with the --only=prod option to npm install.
  • Use an npm task. This task is useful when you're using an authenticated registry.
  • Use an npm Authenticate task. This task is useful when you run npm install from inside your task runners - Gulp, Grunt, or Maven.

If you want to specify an npm registry, put the URLs in an .npmrc file in your repository. If your feed gets authenticated, create an npm service connection on the Services tab in Project settings to manage its credentials.

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

Use Yarn

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

Run JavaScript compilers

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.

Run unit tests

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.

Test browser end-to-end

Run tests in headless browsers as part of your pipeline with tools like Protractor or Karma. Then publish the results for the build to Azure DevOps with the following steps:

  1. Install a headless browser testing driver, such as headless Chrome or Firefox, or a browser-mocking tool such as PhantomJS, on the build agent.
  2. Configure your test framework to use the headless browser/driver option of your choice according to the tool's documentation.
  3. Configure your test framework (usually with a reporter plug-in or configuration) to output JUnit-formatted test results.
  4. Set up a script task to run any CLI commands needed to start the headless browser instances.
  5. Run the end-to-end tests in the pipeline stages along with your unit tests.
  6. Publish the results by using the same Publish Test Results task alongside your unit tests.

Package web apps

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

Implement JavaScript frameworks

Angular

For Angular apps, you can include Angular-specific commands such as ng test, ng build, and ng e2e. To use Angular CLI commands in your pipeline, install the angular/cli npm package on the build agent.

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

For tests in your pipeline that require a browser to run, such as the ng test command in the starter app, which runs Karma, use a headless browser instead of a standard browser. In the Angular starter app:

  1. Change the browsers entry in your karma.conf.js project file from browsers: ['Chrome'] to browsers: ['ChromeHeadless'].

  2. Change the singleRun entry in your karma.conf.js project file from a value of false to true. This change helps make sure that the Karma process stops after it runs.

React and Vue

All the dependencies for your React and Vue apps are captured in your package.json file. Your azure-pipelines.yml file contains the standard Node.js script:

The build files are in a new folder, dist (for Vue) or build (for React). This snippet builds an artifact, www, that is ready for release. It uses the Node Installer, Copy Files, and Publish Build Artifacts tasks.

To release, point your release task to the dist or build artifact and use the Azure Web App Deploy task.

Webpack

You can use a webpack configuration file to specify a compiler, such as Babel or TypeScript, to transpile JSX or TypeScript to plain JavaScript, and to bundle your app.

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

Build task runners

It's common to use Gulp or Grunt as a task runner to build and test a JavaScript app.

Gulp

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

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.

Package and deliver your code

After you've built and tested your app, you can upload the build output to Azure Pipelines, create and publish an npm or Maven package, or package the build output into a .zip file for deployment to a web application.

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.