Connect your npm project to Azure Artifacts feeds

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

Azure Artifacts enables developers to publish and install various package types from feeds and public registries like npmjs.com. To authenticate with Azure Artifacts, it's necessary to configure your npm config file. This file contains feed URLs and credentials used by npm, offering options to customize your npm client behavior, such as setting up proxies, defining default package locations, or configuring private package feeds. The .npmrc file is typically located in the user's home directory but can also be created at the project level to override default settings. By modifying the .npmrc file, users can personalize their npm experience to meet their specific requirements.

Prerequisites

• An Azure DevOps organization and a project. Create an organization or a project if you haven't already.

• An Azure Artifacts feed. Create a new feed if you don't have one already.

• Download and install Node.js and npm.

Project setup

For best practices, it's recommended to use two separate configuration files. The first one is used for authenticating with Azure Artifacts, while the second one is stored locally and holds your credentials.

To set up the second file, simply place it in your home directory on your development machine and include all of your registry credentials. This way, the npm client can easily access your credentials for authentication, allowing you to share your configuration file while keeping your credentials secure.

The following steps will guide you through setting up the first configuration file:

Windows

1. Sign in to your Azure DevOps organization, and then navigate to your project.

2. Select Artifacts, and then select Connect to feed.

   

3. Select npm from the left navigation pane.

4. If this is the first time using Azure Artifacts with npm, select Get the tools and follow the instructions to install the prerequisites.

5. Follow the instructions in Project setup to connect to your feed.

   

Other

1. Add a .npmrc file in your project's directory, in the same directory as your package.json file, and copy the following snippet into it.

   registry=https://pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/ 
   
   always-auth=true
   

Setup credentials

1. Copy the following snippet into your user-level npmrc file:

   • Organization-scoped feed:

     ; begin auth token
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
     ; end auth token
     

   • Project-scoped feed:

     ; begin auth token
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
     //pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
     ; end auth token
     

2. Generate a personal access token with packaging read and write scopes.

3. Encode your newly generated personal access token as follows:

   1. Run the following command in a command prompt window, and then paste your personal access token when prompted:

      node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
      

      You can also use the following command to convert your personal access token to Base 64.

      • Linux/Mac:

        echo -n "YOUR_PERSONAL_ACCESS-TOKEN" | base64
        

   2. Copy the Base 64 encoded value.

4. Replace both [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] values in your user .npmrc file with your personal access token from Step 3.

Tip

Using multiple registries in .npmrc files is supported with scopes and upstream sources.

Pipeline authentication

To authenticate with your pipeline, Azure Artifacts recommends using the npm authenticate task.

When using task runners such as gulp or Grunt, it's important to include your npm authenticate task at the start of your pipeline. This action ensures that your credentials are injected into your project's .npmrc file and retained throughout the pipeline run, enabling subsequent steps to access the credentials in the configuration file.

Classic

1. Navigate to your project, select Pipelines, and then select your pipeline definition.

2. Select Edit to modify your pipeline.

3. Select + to add a new task to your pipeline.

   

4. Search for the npm Authenticate task, and then select Add.

   

5. Select your .npmrc file, and then select Save & queue when you're done.

   

YAML

- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc                ## Path to the npmrc file
    customEndpoint: #Optional          ## Comma-separated list of npm service connection names for registries from external organizations. For registries in your org, leave this blank

Note

For your pipeline to access your feed, ensure that the build service role is set to Feed And Upstream Reader (Contributor) in your feed settings.

Note

If your organization is using a firewall or a proxy server, make sure you allow the appropriate domain URLs. See Allowed IP addresses and domain URLs for details.

Troubleshoot

vsts-npm-auth is not recognized

If you encounter the following error during project execution:

• Cmd: 'vsts-npm-auth' is not recognized as an internal or external command, operable program or batch file.

• PowerShell: vsts-npm-auth : The term 'vsts-npm-auth' is not recognized as the name of a cmdlet, function, script file, or operable program.

Then it's probable that the npm modules folder hasn't been added to your path. To address this, rerun the Node.js setup and make sure to select the Add to PATH option.

Alternatively, you can add the npm modules folder to your path by modifying the PATH variable to %APPDATA%\npm in Command Prompt or $env:APPDATA\npm in PowerShell.

Unable to authenticate

If you're running into an E401 error: code E401 npm ERR! Unable to authenticate. Run the vsts-npm-auth command with -F flag to reauthenticate.

vsts-npm-auth -config .npmrc -F

Reset vsts-npm-auth

Follow these steps to reset your vsts-npm-auth credentials:

1. Uninstall vsts-npm-auth:

   npm uninstall -g vsts-npm-auth
   

2. Clear your npm cache:

   npm cache clean --force
   

3. Delete your .npmrc file.

4. Reinstall vsts-npm-auth:

   npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
   

Related articles

• Publish and restore npm packages (CLI)
• Publish npm packages (YAML/Classic)
• Use packages from npmjs.com