Many organizations have their own tried-and-true components or in-house tools which they use from project to project. Instead of copying these from project to project, it’s a good idea to share them as private packages. If you’re already using Azure DevOps, you could look at Azure Artifacts to accomplish this. 

Azure Artifacts allows developers to share their code as packages (i.e., NuGet, NPM, etc.) to a fixed set of users. You might not want to share your code publicly, if it’s only for internal use. If that describes what you’re looking for, this article will guide you through creating and publishing an NPM package on Azure NPM Registry. The process for other types of packages is similar.

What is Azure NPM Registry?

Azure NPM Registry is a part of Azure Artifacts, and allows publishing and downloading NPM packages to and from private feeds and public registries such as npmjs.com. 

Preparing an NPM Package

Let’s use the Angular lib as an example. When the library is generated, we need to add scope to the lib package name in projects/my-azure-lib/package.json. The package name will look like @trailhead/my-azure-lib.

ng new azure-package --no-create-application
cd azure-package
ng generate library my-azure-lib

Imagine we created an Angular library and added some code to it. As the next step, we need to build our library with the command: ng build my-azure-lib.

Connect Package to the Feed

Add a .npmrc file (or use the existing one) and connect your repo with the feed. It’s very important to use scopes. In this case, you can overwrite the registry URL for several packages. I’m using @trailhead as a prefix. You’d want to use your own custom prefix, and the URL should be replaces with your Azure NPM Registry URL.

@trailhead:registry=https://pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/registry/

always-auth=true

Then if you’re using Windows, you need to install vsts-npm-auth NPM package and run it for your project .npmrc.

npm install -g vsts-npm-auth
vsts-npm-auth -config path-to-your-project/.npmrc

Mac users need more effort because there is no such tool as vsts-npm-auth for MacOS. Create .npmrc in your home folder and paste auth token as described in Azure documentation.

touch ~/.npmrc

; begin trailhead auth token
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/registry/:username=USERNAME
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/registry/:_password=ACCESS_TOKEN
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/:username=USERNAME
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/:_password=ACCESS_TOKEN
//pkgs.dev.azure.com/[your_account]/_packaging/[your_project]/npm/:email=npm requires email to be set but doesn't use the value
; end trailhead auth token

Publish and Use the NPM Package

Now, to publish your package, you just new to run the command: npm publish dist/my-azure-lib, and NPM will do the magic. After it completes, we need to open our project where we’re planning to use this package, add a registry overwrite for scope, as we did at the beginning of Connect Package to the Feed section, and install our package using the following command:

npm install @trailhead/my-azure-lib

Voila! Our package was installed from our private registry in Azure DevOps.

Conclusion

This article provides a basic example of Azure registry capabilities and how they can be used for publishing internal packages to reuse them in multiple projects.