DEV Community

Cover image for Publishing your first library with NX on NPM
thomas for This is Angular

Posted on • Updated on • Originally published at Medium

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

panel view from vscode

panel view from Nx console

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

then signin from our terminal with:

npm login
Enter fullscreen mode Exit fullscreen mode

and finally,

 

npm publish --access=public
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (0)