Quickstart - Use Azure Pipelines to build and publish a Node.js package

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

You can use an Azure DevOps pipeline to build, deploy, and test JavaScript apps.

This quickstart walks through how to use a pipeline to create a Node.js package with Node Package Manager (npm) and publish a pipeline artifact.

Prerequisites

You must have the following items in Azure DevOps:

• A GitHub account where you can create a repository. Create one for free.
• An Azure DevOps organization and project. Create one for free.
• An ability to run pipelines on Microsoft-hosted agents. You can either purchase a parallel job or you can request a free tier.

1 - Fork the sample code

Fork the following sample Express.js server app at GitHub.

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

2 - Create your pipeline

1. Sign in to Azure Pipelines. Your browser will go to https://dev.azure.com/my-organization-name and display your Azure DevOps dashboard.

2. Go to your project and select Pipelines > Create a new pipeline.

3. Select GitHub as the location of your source code.

4. If you're redirected to GitHub to sign in, enter your GitHub credentials.

5. When the list of repositories appears, select your Node.js sample repository.

6. Azure Pipelines analyzes the code in your repository and recommends the Node.js template for your pipeline. Select that template.

7. Azure Pipelines generates a YAML file for your pipeline. Select Save and run > Commit directly to the main branch, and then choose Save and run again.

8. A new run starts. Wait for the run to finish.

When you're done, you have a working YAML file azure-pipelines.yml in your repository that's ready for you to customize.

3 - Build your package and publish an artifact

1. Edit your azure-pipelines.yml file.

2. Update the Node.js Tool Installer task to use Node.js version 16 LTS.

   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'
   

3. Add new tasks to your pipeline to copy your npm package, package.json, and to publish your artifact. The Copy Files task copies files from local path on the agent where your source code files are downloaded and saves files to a local path on the agent where any artifacts are copied to before being pushed to their destination. Only the src and public folders get copies. The Publish Pipeline Artifact task downloads the files from the earlier Copy Files tasks and makes them available as pipeline artifacts that will be published with your pipeline build.

   - task: CopyFiles@2
     inputs:
       sourceFolder: '$(Build.SourcesDirectory)'
       contents: |
          src/*
          public/*
       targetFolder: '$(Build.ArtifactStagingDirectory)'
     displayName: 'Copy project files'
   
   - task: PublishPipelineArtifact@1
     inputs:
       artifactName: e2e-server
       targetPath: '$(Build.ArtifactStagingDirectory)'
       publishLocation: 'pipeline'
     displayName: 'Publish npm artifact'
   

4 - Run your pipeline

Save and run your pipeline. After your pipeline runs, verify that the job ran successfully and that you see a published artifact.

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 Latest

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.

Next steps

Congratulations, you've successfully completed this quickstart!

Configure JavaScript