DEV Community

Cover image for How to Code And Publish Your First NPM package🎖
Harsh Sinha
Harsh Sinha

Posted on

How to Code And Publish Your First NPM package🎖

Introduction

Hello Developers
In this Article we would learn how do you Code and publish your first NPM package.
Publishing an NPM package is easy and in this tutorial we would make a very simple package which requires very few lines of Code.

What is NPM?

logo of npm and node.js
NPM stands for Node Package Manager, as the name suggests it is a package manager, and is also the default package manager for JavaScript runtime environment Node.js.

Prerequisites

  • Node.js and npm installed in your system- You can install Node.js and npm(if you haven't already) from here
  • Basic knowledge of JavaScript- The package we'll make here is simple so you don't need very high knowledge of JavaScript.
  • Basic Terminal Commands- I would be using a few basic terminal commands but I will explain the npm and node commands which I would use in the Article.
  • A Code editor- In this tutorial I would be using VS Code but you can use any editor of your choice.

Lets get Started

Step 1: Create an account on https://www.npmjs.com/signup

npmjs login page

Step 2: Login to your CLI by your npm account

To do this, simply type this command in the terminal

$ npm login
Enter fullscreen mode Exit fullscreen mode

And enter the following details:
npm login
To check if you have successfully logged in, type the following command and it shall print your username:

$ npm whoami
Enter fullscreen mode Exit fullscreen mode

Step 3: Setting up the directory

You can accomplish this task by typing these commands onto your terminal/CLI:

$ mkdir folder_name
$ cd path/to/folder
Enter fullscreen mode Exit fullscreen mode
  • mkdir - mkdir command is used to create a directory or a folder directly from your Terminal.

  • cd - cd command is used to change the current working directory in the terminal.

Step 4: Package.json

To initialize the package.json file, type this command in the CLI

$ npm init
Enter fullscreen mode Exit fullscreen mode

And then answer the questions asked, if you want you can skip any question by clicking Enter.

What is package.json?
Package.json is a necessary file which contains information about your project
Such as package name, version,author's name etc.

Step 5: Let's Code

Now that we have a package.json file, we can get onto coding.
Create an index.js file and write this code into it

const object = {
  add: function addTwoNumbers(a,b){
    return a+b;
  }
}

module.exports = object;
Enter fullscreen mode Exit fullscreen mode

Code Explanation

  • const object - The object object which is exported to be used by others.

  • function addTwoNumbers() - This is the function stored in the object which can be used by others, it is marked as 'add' and it simply returns the sum of two numbers a and b.

  • module.exports - the object object is then exported by declaring this.

Step 6: Time to Publish

To publish your newly made npm package, head over to the terminal and type this command

$ npm publish
Enter fullscreen mode Exit fullscreen mode

If you get this message:

npm publish success message
Then congratulations! Your NPM package has been successfully published and can be used by anyone :)
The Github Repository link of this package: https://github.com/HarshSinha17/maths-script


Testing the package

So now that we have made our NPM package, we shall try it, to test the package follow these steps:

Create a fresh directory and cd into it

This can now again be done by terminal by the following commands

$ mkdir folder_name
$ cd path/to/folder
Enter fullscreen mode Exit fullscreen mode

Initialize the package.json

Type this command on the terminal, but this time with the -y flag, so that we don't have to answer any questions and a default package.json file will be created.

$ npm init -y
Enter fullscreen mode Exit fullscreen mode

Install the Package

To install the package type this command

$ npm install maths-script
Enter fullscreen mode Exit fullscreen mode

(Here maths-script is the name of the package)
Now a folder named node_modules and a file named package-lock.json must be created in the directory.

Lets code

Create a file named app.js and paste this code in the file

const maths = require('maths-script');

var a = maths.add(1, 2);
console.log(a);
Enter fullscreen mode Exit fullscreen mode

Code Explanation -

  • The code is pretty simple, first we are storing the exports of the package in a constant maths.

  • Then we are using the function add of the NPM package for adding two numbers, 1 and 2, and storing it in variable a, and then printing the var a to the console.

Running the file

To run the file, type this command in the Terminal

$ node app.js
Enter fullscreen mode Exit fullscreen mode

(app.js is the name of our file)
And then you should get the following output-

output of the code
So we see that the output is 3, which means that our NPM package is working!


Conclusion

So in this article we learned how to create an NPM package, hope you found the article helpful and if you face any problem in making your own package, put a comment down below so maybe I can provide any help I can

Thanks
(˵ ͡° ͜ʖ ͡°˵)

Top comments (5)

Collapse
 
kirankamath96 profile image
Kiran Kamath

Thanks man!! , got to learn something new

Collapse
 
harshsinha17 profile image
Harsh Sinha

Glad it helped you :D

Collapse
 
harshsinha17 profile image
Harsh Sinha

Oh Yeah right, your way is much shorter and easier to understand!
Thanks for suggestion :)

Collapse
 
shankhadeep998 profile image
Shankhadeep Bhowmick

Thanks bro 🤩 what an information!!!

Collapse
 
harshsinha17 profile image
Harsh Sinha • Edited

Hope it helps you😁