Creating Your Library: An NPM Series (Part I)

Photo by AbsolutVision on Unsplash

In this series, we will explore NPM in its entirety. Firstly, we will see how to create your repository in public and private configurations, including readme and licensing. In the second article Maintaining Your Library: An NPM Series (Part II), we will explore how to manage your package efficiently by minimizing vulnerabilities and learning cool new commands.

Let’s start!

While we are busy doing NPM INSTALL now and then. Today, we will take a step back to explore how to NPM PUBLISH a library and make it available to everyone to install.

1. Account creation on NPM and login

• Create an account on NPM. On successful account creation, log into a local machine using the npm adduser command, which will ask for the user name, password, email, and OTP.

npm adduser

• We can check the logged-in username using the npm whoami command.

npm whoami

2. Create a library

• First, create a new angular project.

ng new foo

• Then change the directory and create a library using CLI. Try to pick a unique name for the library to avoid errors while publishing.

package name too similar to an existing package error

ng generate library foo-lib

• This will create a directory as projects at the root level and under projects, it will create a directory as foo-lib. CLI helps us to update all respective config files like angular.json, package.json, and tsconfig.json

#REMEMBER
major.minor.patch
npm uses tilde (~) to choose latest patch version and caret (^) to choose latest minor or patch version.

3. Build and publish a library

• Build foo-lib using CLI.

ng build foo-lib

• After that, change the directory and create a tgz file using the npm pack. Check the version of the library in the package.json file. The library will have its separate package.json file.
• Before publishing every time we need to increment the version in the library’s package.json, it can be either primary, minor, or patch.

previously published version error

cd dist
cd foo-lib
npm pack

• Once we have the tgz file, publish the library on NPM.

npm publish -- access public

• As we just saw it is simple to publish your library on npm. Using the above command it is free and your library would be the public.

#REMEMBER
Publishing the library on NPM privately requires paying NPM for paid account.

payment required error to publish privately

Publish a library privately

• There is n number of private repositories where we can publish a library privately so that it won’t be available publicly and will be used by your team only.
• Run this command to define the scope of the package either organization level or user level. Otherwise, we can update the scope in package.json.

npm init --scope=@my-foo

• NPM, Nexus, and JFrog are repositories where we can publish a library privately. Here we will explore the same for NPM.
• Create a library foo-lib and build foo-lib using CLI.

ng build foo-lib

• After that, change the directory and create a tgz file using the npm pack. Check the version of the library in the package.json file. The library will have its separate package.json file.
• Before publishing every time we need to increment the version in the library’s package.json, it can be either primary, minor, or patch.

cd dist
cd foo-lib
npm pack

• Once we have the tgz file, publish the library on NPM privately which requires paying NPM for a private account.

npm publish

• .npmrc is an npm config file that helps us to set npm registry and registry credentials required to install private npm packages.

.npmrc

Readme and licensing

• When you publish a library it is recommended to provide information regarding the library like how to install it, how to set up and use it, and code snippets.
• Please refer below to an example of the readme.

# FooLib
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.
Demo: https://stackblitz.com/edit/foo-lib-demo
## Features
- Easy to integrate
- Supports every envionment
## Install
```
npm i foo-lib
```
## Setup
- Add FooLibModule to App NgModule
## Use
```bash
import { Component } from '@angular/core';
import { FooLibService } from 'foo-lib';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private fooLibService: FooLibService
  ) { }
  ngOnInit(): void {
    this.fooLibService.test('Hello World!');
  }
}
```
## Upcoming features
- Custom foo
- UX design update for foo
- Backward compatibility with angular previous versions
## FAQ
Check out article on 
[Crash Course: Publish a Library on NPM](https://medium.com/@abhijeetgiram/ep-01-un-publish-npm-myths-8c8c3001fde9)
## License
MIT
---
> GitHub [@AbhijeetGiram](https://github.com/AbhijeetGiram)  · 
> LinkedIn [@AbhijeetGiram](https://in.linkedin.com/in/abhijeet-giram-80265095)  · 
> Medium [@AbhijeetGiram](https://medium.com/@abhijeetgiram)

• The above code will appear below on the npm website.

README.md

• We can add a license and repository details in the library’s package.json like below which will reflect on the home page library on the NPM website.

package.json

• And results on the npm website will look like this.

https://www.npmjs.com/package/@abhijeet-giram/foo-lib

@abhijeet-giram/foo-lib

• We have explored everything about publishing a library. In the next article Maintaining Your Library: An NPM Series (Part II), we will throw some light on maintaining it.

Summary

We have explored NPM account creation and login. After that, we created a sample library. We built and published that sample library. We explored how to publish a private library. We talked about readme of the library.

Special mention here to Mukund for helping me with this article.

Happy Coding!!