Skip to content

Latest commit

 

History

History
189 lines (119 loc) · 6.29 KB

javascript.md

File metadata and controls

189 lines (119 loc) · 6.29 KB
title description ms.assetid ms.reviewer ms.topic ms.custom ms.date monikerRange zone_pivot_groups
Quickstart - Use Azure Pipelines to build and publish a Node.js package
Build, deploy, and test JavaScript and Node.js apps with Azure Pipelines
5BB4D9FA-DCCF-4661-B52B-0C42006A2AE5
vijayma
quickstart
seodec18, seo-javascript-september2019, contperf-fy20q4, devx-track-js, freshness-fy22q2, contperf-fy22q2
04/17/2023
<= azure-devops
pipelines-version

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

[!INCLUDE version-lt-eq-azure-devops]

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.

::: moniker range=">=azure-devops-2020"

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.

::: moniker-end

::: zone pivot="pipelines-yaml"

::: moniker range="tfs-2018"

YAML is not available for TFS 2018.

::: moniker-end

::: moniker range=">=azure-devops-2020"

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.

::: moniker-end

::: moniker range="azure-devops-2019"

  1. Create a pipeline and select the YAML template.

  2. Set the Agent pool and YAML file path for your pipeline.

  3. Save the pipeline and queue a build. When the Build #nnnnnnnn.n has been queued message appears, select the number link to see your pipeline in action.

::: moniker-end

::: moniker range=">=azure-devops-2020"

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: NodeTool@0
  inputs:
    versionSpec: '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.

:::image type="content" source="media/node-artifact-run.png" alt-text="Screenshot of successful pipeline run with an artifact. ":::

::: moniker-end

::: zone-end

::: zone pivot="pipelines-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 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.

::: zone-end

Next steps

Congratulations, you've successfully completed this quickstart!

[!div class="nextstepaction"] Configure JavaScript