Publish Package on NPM Registry

Publish Your Package on NPM Registry

NPM is a great library of JavaScript packages. There are a number of packages available which you can use to build cool things. We can use packages created by other developers but we can also publish our packages as well.

I have also created two packages (Headx & CarrierJS) and one command line interface (ZEN). And some people have downloaded them.

In this article I will show you how you can publish your package to the NPM directory.

Step — 1 — Need to install Node JS

To use npm, first you must have node installed in your system. If node is not installed in your system, then you can use below links to download it -

1. Node Js (window installer)

2. Node Js (mac installer)

You can visit the official website of node js.

Node Js Official Website

Step — 2 — Need to create an NPM Account

An npm account is necessary to publish package on npm, you can create npm account, click here.

NPM JS Official Website

1. Click on Sign Up Button.
2. Enter your username, email address and password.
3. Then click on Create An Account button.
4. Verify your email with the verification link you will receive on your given email id.
5. If you already have an account directly click on sign in button from home page or you can click on Already have an account? button on sign up page.

Note — Make sure to keep track of your credentials, because you will require this credentials at the time of login from cli.

Step — 3— Initialize a git repository & add it to github profile

Next, create a folder and initialize git repository to track all of your changes.

To create folder, you can use below command -

mkdir <folder_name>

Go inside your folder, which you have created using above command -

cd <folder_name>

Now setup the git repo using below commands -

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/<yourusername>/<repo>.git
git push origin master

Step — 4— Initialize project using npm

Npm initialize is used to add project details in package.json file which will be public on npm registry.

Now go to you terminal, navigate to your project and type below command -

npm init

This command will ask you some information related to your project

• package name — package name should be unique
• version — keep it as it is for now
• entry point — enter entry point of your package. keep it index.js for now

Initialize npm project

Step — 5— Writing the code of our package

1. Create index.js file inside the root directory of the package
2. Open your code editor, I use VS Code
3. Enter the following code in index.js file

let sortedArray = [];
/**
* @desc removes all the duplicates from the array
* @param {*} value // Accepts array
*/
function sortArray(arr) {
     // arr : array of values
     if (!Array.isArray(arr)){
       throw new TypeError('arr should be an array');
     }
     sortedArray = arr.sort();
     return sortedArray;
}
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let num = [5, 9, 4, 2, 8, 7];

let fruitsArr = sortArray(fruits);
let numArr = sortArray(num);

console.log(fruitsArr);
console.log(numArr);

4. Now it’s time to test our code.

5. Open terminal and type below command.

node index.js

6. Your output should be look like this -

Step — 6— Testing package locally

After developing the package, we should test it locally to see how it would work after publishing it on npm.

1. First, replace bold code from the above code of index.js file with below code -

module.exports = sortArray

2. Our index.js file will look like -

let sortedArray = [];
/**
* @desc removes all the duplicates from the array
* @param {*} value // Accepts array
*/
function sortArray(arr) {
     // arr : array of values
     if (!Array.isArray(arr)){
       throw new TypeError('arr should be an array');
     }
     sortedArray = arr.sort();
     return sortedArray;
}
module.exports = sortArray

3. Open terminal and in the root directory of package, run below command

npm link

this command will allow you to use your package locally like you have installed it from npm.

4. Create a dummy project and install your package in it using this command -

npm link name_of_your_package

if everything goes well, then you can move ahead.

Step — 7— Login to npm using command line

Run the following command to login your npm account

npm login

it will ask you to enter your username, password and two-factor authentication code if you enabled it.

NPM Login

After successfully logged in, you can move to next step.

Step — 8— Publish package on npm

Remember you package name must be unique in your package.json file. else your package will not publish on npm.

To check your package name is unique in npm or not, you can use following command.

npm search your_package_name

if any package listed down. then you cannot this name for your package.

you can try some different name.

Don’t forgot to change you package name in package.json file if it is not available in npm like this -

{
"name": "dosorting",
"version": "1.0.0",
"description": "",
"main": "index.js",
"keywords": [],
}

Now we can publish our package, using following command -

npm publish

after successfully publish, you will receive a mail and you will get below message on your terminal.

npm notice name:          dosorting
npm notice version:       1.0.0
npm notice package size:  484 B
npm notice unpacked size: 597 B
npm notice shasum:        a84844e7899b12621b3bfd1ebb9cf9e1f673249d
npm notice integrity:     sha512-WOzSOxRxTp+eG[...]aJ6iDgzOdZdXg==
npm notice total files:   2
npm notice
+ dosorting@1.0.0

Congratulations, you have publish your first package on npm.

If you want to make changes in your package,

1. then make changes.
2. open the package.json file and change the version number
3. login in to your npm account and re run the following command

npm publish

Here in this article, we have created a basic and simple package. Do not forgot to add README.md file in your package root directory, it will help you to describe about your package and how others can use it.

Thank you for reading….