Publishing your first library with NX on NPM

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**

Select @nrwl/angular - library

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

We end up with this schematic command: 

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.

{
  "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:

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/. 

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

npm adduser

then signin from our terminal with:

npm login

and finally, 

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

I hope you learned new Angular concept. If you liked it, you can find me on Medium, Twitter or Github.

👉 If you want to accelerate your Angular and Nx learning journey, come and check out Angular challenges.