Publish your libraries to NPM with one command (Angular and Nx)
Tags: angular, nx, npm, devops
Published: 2021-05-10 07:00:41

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](https://www.npmjs.com/package/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](https://angular.io/) or [Nx](https://nx.dev/) 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 🐬                                                                                                                            |
| --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| <pre lang="bash"># Install (made only once)<br>ng add ngx-deploy-npm<br><br># Publish<br>ng deploy your-library</pre> | <pre lang="bash"># Install (made only once)<br>nx generate ngx-deploy-npm:install<br><br># Publish<br>nx deploy your-library</pre> |

---

# 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

```bash
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:

```json
"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

```bash
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](#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:

```bash
nx generate ngx-deploy-npm:init
```

### Nx Publishing

```bash
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](https://angular.io/guide/deployment#automatic-deployment-with-the-cli) section along with other builders.
- 🎉 `ngx-deploy-npm` is also referenced on [Nx Plugins](https://nx.dev/nx-community) 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