Publish your libraries to NPM with one command (Angular and Nx)

To publish a library to NPM we have to do simple steps:

• Build the library, compile it.
• Change the version that you want to publish on the library's package.json
• Run npm publish on the folder of your built library

This can be performed by hand or can be done by a couple of hours of creating a script that does the work for us to automate it. If we think about it, this is relatively easy to do but let's think about some considerations 🤔:

• What if we don't have only one library but several because we are using the mono-repo approach?
• What if is our fourth library and we are tired of writing/test/maintain the same thing over and over again?
• What if we just don't want or don't have the time and patience to do so 😅?

With ngx-deploy-npm you can publish any kind of library on your Angular or Nx workspace with just one command.

By any kind I mean literally any kind of publishable library no matter the technology you use, Angular, React, Node, or NestJs 🚀.

You just need to have your library on an Angular or Nx workspace

TL;DR

Supposing that you have:

• An Angular or Nx workspace with a publishable library
• Already logged into NPM using npm login

Publish your package by:

Angular 🅰️	Nx 🐬
# Install (made only once) ng add ngx-deploy-npm # Publish ng deploy your-library	# Install (made only once) nx generate ngx-deploy-npm:install # Publish nx deploy your-library

---

Publishing your library to NPM with ngx-deploy-npm

Pre-steps

1. Have a workspace, Angular or Nx (it won't variate too much between them)
2. Have a publishable library in your workspace
3. Being already logged into NPM, npm login

No matter in which workspace you are, you have to do an installation of the builder (only made once) and then you can execute it to publish your library the times that you want.

Angular 🅰️

Angular Installation

First, we need to add this builder to our workspace, this can be done by just

ng add ngx-deploy-npm

This is going to detect all our libraries and modify your angular.json file to "install" this builder. You will notice the architect deploy was added to all our libraries on our workspace, it's going to look like this:

"deploy": {
  "builder": "ngx-deploy-npm:deploy",
  "options": {
    "access": "public",
    "buildTarget": "production"
  }
}

That is all the configuration needed to publish a package to NPM, now what’s left is the DEPLOY 🚀

Angular Publishing

ng deploy YOUR-LIBRARY-NAME

And done, your library is published to NPM 😊

Nx 🐬

With an Nx workspace, the procedure doesn't change that much, you have to "install" it first and then publish the times that you want.

Nx Installation

It doesn't change that much from the Angular Installation. It takes the same effect and has the same goal, kind of "install" the builder in your Nx Workspace by detecting all your publishable libraries (libraries that we created as such) and add the corresponding architect deploy to all of them. It can be done by:

nx generate ngx-deploy-npm:init

Nx Publishing

nx deploy YOUR-LIBRARY-NAME

And done, your library is published to NPM 😊

Nice Features 🤩

This is a wrapper of npm publish so all the parameters are available with the same name.

--package-version

You can set the future version of your library just using the argument --package-version, this will write the version that you passed on the package.json. Really convenient when you have a version pattern in your workspace.

--build-target

With this parameter, you can select which environment to build your library. Really convenient for Angular libraries that due to IVY they have a production environment.

--dry-run

Will not execute any operation, just to see how it will go. Very convenient to test and visualize without performing any action.

Publishing to private repositories 🔒

This builder is a wrapper of npm publish so just by having a well configured .npmrc file you can publish your packages anywhere. If you have the .npmrc file pointing to a private npm repository ngx-deploy-npm will publish your libraries there smoothly.

Accomplishments 🌟

• 🎉 ngx-deploy-npm is being referenced on the Angular Official Documentation on automatic deployment with the cli section along with other builders.
• 🎉 ngx-deploy-npm is also referenced on Nx Plugins official page.

Conclusion

ngx-deploy-npm is a tool that helps us to publish any kind of library to NPM just by one command if we have our libraries in an Angular or Nx Workspace. It helps us to automate the publishing process of our libraries making it really easy