Subscribe Us

How to Publish Your Package on NPM Registry

NPM is a great library of JavaScript packages. There are a number of packages available that 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 in the NPM directory.

Step — 1 — Need to install Node JS

To use npm, first, you must have NodeJS installed in your system. If NodeJS is not installed in your system, then you can use the 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 packages on npm, you can create an 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 a sign-in button from the home page or you can click on Already have an account? button on the sign-up page.

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

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

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

To create a folder, you can use the below command –

mkdir <folder_name>

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

cd <folder_name>

Now setup the git repo using the 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 your project using npm

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

Now go to your terminal, navigate to your project, and type the below command –

npm init

This command will ask you for some information related to your project:

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

NPM Initialize by Ritik chourasiya

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;
} ---- later remove it ----
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 the terminal and type the below command.

node index.js

6. Your output should 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 code from the remove later it line from 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
*/
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.

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
+ [email protected]

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


Also published here.

L O A D I N G
. . . comments & more!



How to Publish Your Package on NPM Registry
Source: Trends Pinoy

Post a Comment

0 Comments