Publishing your first library with NX on NPM
Tags: angular, nx, npm
Published: 2022-12-14 16:37:27

Recently I decided to publish my first library on NPM. The library enhances @Ngrx/component-store to add a loading/error state _(called CallState)_. When working with HTTP calls or asynchronous tasks, it is always necessary to have a local call state on all of our smart components. This library simplifies this process by extending your service with CallStateComponentStore.

This article describes the step from creating the library to publishing it to NPM.

## Create a lib in NX.
 
Everything is super simple with Nx due to their powerful schematics. If you haven't already done so, install the **Nx console plugin** in **VSCode**. **Right click** on the `libs` folder then select** nx generate**

![panel view from vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr14zz3r3m41heik7nhs.png)

![panel view from Nx console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxccwyeg8uain8njy625.png)

Select **@nrwl/angular - library**

Choose a **name**, enter an **importPath** and check **publishable** checkbox.

We end up with this schematic command: 

```bash
npx nx generate @nrwl/angular:library ngrx-callstate --importPath=@tomalaforge --publishable
```
If you are familiar with Nx, all necessary files will be created automatically and the library will be ready to be used across your entire workspace.

Because we made our library publishable, a `package.json` file is created. This file is used to tell NPM how to handle and set our library:
- name and description
- version
- keyword: list of words to better find your package on search engine
- repository: link to your code repository
- publishConfig: configuration properties set for publish time
- peerDependencies: to explicitly express compatibility with other libs. In our case, since our library extends **@Ngrx/component-store**, we need to make sure that our end users will have this dependency install in their project in order to use our library properly.
- many other properties you can find [here](https://docs.npmjs.com/cli/v9/configuring-npm/package-json).

```json
{
  "name": "@tomalaforge/ngrx-callstate-store",
  "version": "0.0.1",
  "description": "Enhance NgRx component-store by providing a loading/error state",
  "publishConfig": {
    "access": "public"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/tomalaforge/angular-challenges/tree/main/libs/shared/ngrx-callstate-store"
  },
  "keywords": [
    "angular",
    "state",
    "ngrx/component-store"
  ],
  "author": {
    "name": "Thomas Laforge"
  },
  "peerDependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@ngrx/component-store": "^15.0.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  }
}
```
We add some content to our library and write the README.md file to explain the purpose of our library.

Now it's time to publish it. 

## Build the library

Before publishing our library, we need to build it:

```bash
nx build ngrx-callstate-store
```
The default build location for the library is _dist/list/ngrx-callstate-store_. We can move to that file in our **terminal** and we are ready to publish

## Publishing our library to npm
First we will need to create an account at [https://www.npmjs.com/](https://www.npmjs.com/). 

Inside our terminal, we will link our computer to our NPM account by typing: 

```bash
npm adduser
```
then signin from our terminal with:

```bash
npm login
```
and finally, 

```bash
npm publish --access=public
```

### Issues
- `code ENEEDAUTH`: You probably forgot to register. Go back to previous step and retry
- `402 Payment Required`: You either need a paid account or you need to publish your library publicly. Don't forget `--access=public` in your command line or add a `PublishConfig` inside your package.json.
- `403 Forbidden`: When publishing, you need to increase your version number. 
- `404 Not Found - Scope not found`: In our case, we defined a scope as _@tomalaforge_. You need to access your npm account and create a **new organization** with your scope name. 

We made it. We now have a fully functional library on NPM that any user can download.

If you want to try out mine, go at [https://www.npmjs.com/package/@tomalaforge/ngrx-callstate-store](https://www.npmjs.com/package/@tomalaforge/ngrx-callstate-store)

---

I hope you learned new Angular concept. If you liked it, you can find me on [Medium](https://medium.com/@thomas.laforge), [Twitter](https://twitter.com/laforge_toma) or [Github](https://github.com/tomalaforge).

👉 If you want to accelerate your Angular and Nx learning journey, come and check out [Angular challenges](https://github.com/tomalaforge/angular-challenges).