Fanis Prodromou
  • Blog
  • About
  • Blog
  • About
Search by typing & pressing enter

YOUR CART

2/3/2022 Comments

Publishing a Private Angular Library using Verdaccio

Picture
In a previous article, we talked about how to publish an Angular library into NPM. The packages we publish to NPM are by default public, however, there are business cases where we need to publish an Angular Library privately and grant access where is needed. Of course, we can publish a private package into NPM, but this won't be part of this article. Instead, we will see how to create an NPM proxy using verdaccio.
When we install a package in our application, we run the command npm i package_name, and by default, we download the package from the NPM registry. By setting verdaccio as an NPM proxy the flow goes like this:
  • npm i package_name
  • verdaccio is checking if this package belongs to its own local repository
  • if it exists, we download the package from verdaccio and we never ask NPM
  • if it doesn't exist, we download the package from NPM
The following image depicts this flow:
Picture
Without any further ado, let's dive deeper and start setting it up step by step.

Install Verdaccio

1.
We start by installing the verdaccio using NPM and the global flag

    

Run Verdaccio

2.
Let's run verdaccio and have a look at some useful configuration paths.

    
After running the command verdaccio, we get 4 warn points. The first one points us to the configuration path, and the last one points us to the HTTP address. For a while let's keep in mind the config file and we will use it soon. Let's now copy in your browser the HTTP address.

If everything is OK, this is what you should see in your browser.
Picture

Create your Library and Publish it

3.
In this step we will create and build our library (please check this article for more details)

    
4.
To publish a library we first have to authenticate using the command "npm adduser". Since the default registry is the NPM, the generated token will refer to that. We need to add the option --registry to define the registry the token refers to.

    
5.
​The command to publish the library is "npm publish". This however will publish the library into the NPM. Since we want to publish it in Verdaccio, we will add the option --registry in the command.

    
Congrats!!! The first package has been published to Verdaccio.
Picture
Are we done? Almost! We need to configure our app to know how to download a package from Verdaccio
6.
If we run "npm i my-cool-lib" will fail since we haven't published our package into NPM. Well, it might not fail since a package with the same name already exists there. 
To use the Verdaccio as an NPM proxy, we have to add in the root directory a file with the name .npmrc and configure it with the respective HTTP address.
.npmrc

    
If we now run the "npm i my-cool-lib" command, it will first check if a package with the same name exists in the registry of that path.
Are we done? Yeah!!! We managed to set an NPM proxy in our application.

You might be wondering how Verdaccio knows which packages to get from NPM and which packages exist in its own storage. In the second step, we saw a report in our terminal, where it had the path of the configuration file.
.npmrc

    
In this file it has a storage variable with a path.
.npmrc

    
If we follow this path, we will see a file with the name ".verdaccio-db.json" which has information of the local packages. For clarity, this is what the storage directory contains.
Picture
Thanks for reading my article.
If you prefer a video, you can find one in my YouTube channel
Comments
comments powered by Disqus

    Author

    I am an Angular GDE, content creator who loves sharing knowledge

    Follow @prodromouf
    View my profile on LinkedIn

    Tags

    All Angular Angularjs General Graphql Ionic Javascript .net Nodejs Typescript

Proudly powered by Weebly