Create and publish your 1st NPM package

Want to create and publish your own NPM package but don’t know where to start? Then you are in the right place.

Node Package Manager (NPM) is a package manager for the JavaScript programming language. Creating an NPM package is really simple. By following the steps mentioned in this blog post you will be able to create your own NPM package. The only thing which you have to think of is what your package will exactly do, like which functionality it will implement and how it can make other developer’s life easier. For example, In this blog post, I will show you how to create an NPM package which will add borders to the images inside the webpage just by adding the class name “border-pack” on that element in HTML.

Create an NPM account But before diving into the actual process we first have to create an NPM account without which we will not be able to push our package on the NPM website. If you already have it that’s great! But if you don’t then visit https://www.npmjs.com/signup website to create an account and then come back here.

After that open your terminal and type the following command.

//add user 
npm adduser

Here, it will ask you for the username, password & email which you have entered while creating an NPM account. After entering the details, it will log you inside the npmjs.org registry.

Building an NPM package

Firstly, create a directory called borderpack and change the directory.

mkdir borderpack && cd borderpack

Open the folder in visual studio code by typing the following command. You can choose whatever text editor you want to but I will be using VS Code.

//Open folder inside VS Code
code .

Create a file called index.js inside the borderpack folder. This file is where we will be writing all of our code.

function borderpack(options) {
  let elements = document.querySelectorAll('.borderpack');

  if (options.border_type === 'dashed'){
    options.border_type = 'dashed';
  }
  else if(options.border_type === 'dotted'){
    options.border_type = 'dotted';
  }
  else if(options.border_type === 'solid'){
    options.border_type = 'solid';
  }
  else if(options.border_type === 'double'){
    options.border_type = 'double';
  }
  else if(options.border_type === 'groove'){
    options.border_type = 'groove';
  }
  else if(options.border_type === 'ridge'){
    options.border_type = 'ridge';
  }
  else if(options.border_type === 'inset'){
    options.border_type = 'inset';
  }
  else if(options.border_type === 'outset'){
    options.border_type = 'outset';
  }
  else{
    options.border_type = 'none';
  }

  elements.forEach(image =>{
    image.style.borderStyle = `${options.border_type}`;
  })
}

module.exports.borderpack = borderpack;

Add readme.md

After completely creating our package we can then add a README.md file inside our project. This file will also be shown on the NPM website where our package will get published so that people can understand how to use your package inside there project.

Paste the following code into your readme file.

# What is borderpack?

Borderpack is a package which allows you to add different types of borders to any html element.

Package Link: https://www.npmjs.com/package/borderpack

# Installation

`npm i borderpack --save`

After installing the package, create a new JS file and add the following lines of code inside it.

```
import {borderpack} from 'borderpack';

borderpack({
  border_type: 'dashed',
});

```
## Options

Borderpack supports 4 options, all of them are optional.

* *border_type* - _dashed / dotted_ / _solid / double_

If you want to learn more about how to write inside a markdown file then I will suggest you check out this website.

Pushing the NPM package to GitHub

Before publishing our package on NPM we first have to publish it on GitHub. The reason behind this is that when we will create the package.json file for our project the GitHub link will automatically be added to that file. It is not mandatory that you first have to publish your package on GitHub and then on NPM, you can do whatever you want.

For a complete guide about pushing code to GitHub, you can check Git & GitHub tutorial for beginners.

Publishing the NPM package

Before publishing the package to NPM we first have to create a package.json in our project which can be done by running the following commands.

npm init

Now we are ready to publish our first NPM package which can be done by running the following command.

Publishing your NPM package

npm publish

Make sure that you verify your email address after you have created your NPM account otherwise after running the above command you will get an error as “you must verify your email before publishing a new package”.

Testing / Importing the package into our own project (Client Side)

Now that we have successfully published our NPM package we can now install that package to our local machine using NPM package manager and import it into our own test project to check that everything is working perfectly or not. First, create a new folder and name it whatever you want to and inside that folder create 2 files one is the index.html and another is the index.js file. Add the following code to those files.

//Add following code to index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Borderpack</title>
</head>
<body>

    <h1 class="borderpack">This is borderpack...</h1>

    <p class="borderpack">Using this npm package you can apply borders to any of your html elements by adding class name as borderpack.</p>

    // linking the index.js file
    <script src="./index.js"></script>
</body>
</html>

//Add following code to index.js file.

import {borderpack} from 'borderpack';

borderpack({
  border_type: 'dashed',
});

Let’s install the borderpack package locally on our machine which we have published on npm by running the following command using the terminal.

npm i borderpack --save

After that install parcel.

npm i parcel -g

parcel index.html

It will open a webpage at http://localhost:1234/.

That’s the whole process of publishing an NPM package. Pretty easy right! I hope, you understand everything and if you have any questions then comment them down below.