Publishing NPM Packages in Azure NPM Registry

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.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

This field is for validation purposes and should be left unchanged.

Thank you message.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.