How to write and publish your first NPM package

We will write a library that helps to generate border-radius for HTML elements and name it “radiuswizard”. This is just an example of a library that will give us an idea on how the NPM packages are written and published. Let’s start.

What you need to get started :

1-If you don’t have an NPM account, go to npm pagehttps://www.npmjs.com/signup and sign up. In order to publish your package, you will have to verify your email, so make sure to do that. Also, remember your username and password because we will use them in a moment.

2- Go to your console and run npm adduser, then enter your NPM account’s information.

1- Writing the npm package

We will create a folder called “radiuswizard” for our project (you can call it whatever you want).

mkdir radiuswizard && cd radiuswizard

Open this project in your code editor to start writing your package.

We will make a new file, index.js, that will contain our JavaScript function:

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

     elements.forEach(el => {
     if (options.circle) {
                el.style.borderRadius = '50%'
      } else {
                el.style.borderRadius = `25px`
      }
   })
}
module.exports.radiuswizard = radiuswizard

Let’s break down what’s happening in this file. To start, our radiuswizard function accepts an options object while our elements variable represents all the elements that have the .radiuswizard class.

If the user passes the circle as an option, the elements will get a border-radius of $50$, else the default value is $25px$.

Of course, before we publish our package, we need to give details about it. For that let’s add a README.md file :

## Description
    npm package for adding border-radius to your elements.
## Installation
    `npm i radiuswizard --save`
    ```
    import {radiuswizard} from 'radiuswizard';
    radiuswizard({
        circle: false
    })

    ```
### Options
    radiuswizard supports only one option:
    - _circle_ - _boolean_ (Defaults to false)

We have three sections in this file, the first one describes the usage of the package, the second tells users how they can install it, and the last one is for the options. We tell the user that this last package supports only one option, boolean.

… And we finished writing the package 😁

2- Getting ready to publish our npm package

In order to publish our package, we need to deploy this project to Github.

We will create a new public repository with the name radiuswizard. If this is your first time making a repository on GitHub, check this: Github-docshttps://docs.github.com/en/enterprise/2.15/user/articles/create-a-repo.

Then run these commands in the console :

git init
git add .
git remote add origin git@github.com:LaasriNadia/radiuswizard.git //make sure to replace LaasriNadia by your Github username
git push -u origin master

One more step before publishing the package is to add a package.json file to our project. For that we run :

npm init

It will ask you some questions, these are the ones we will answer ( Press Enter to skip the other questions ) :

description : border-radius for your elements

keywords : border-radius

author : put your name here

We are now ready to publish our NPM package. 🚀

3- Publishing our NPM package

The only thing we have to do in order to publish our package is run:

npm publish

If you get this error :

40 Forbidden - PUT https://registry.npmjs.org/radiuswizard - radiuswizard cannot be republished until 24 hours have passed.

It’s because we are using the same name for this package, so go back to package.json file and change the name value of this package then run npm publish again.

To make sure your package is published, go to npmjshttps://www.npmjs.com/ and search for your package’s name. You should get something like this: $https://www.npmjs.com/package/radiuswizard$

BONUS

We will now take the role of the user and use the package we just created. Run:

 mkdir radiususage && cd radiususage
 npm init -y

Let’s make an index.html file in this directory :

We added an image and gave it a class of radiuswizard.

Let’s add an index.js file:

import {
    radiuswizard
} from 'radiuswizard';
radiuswizard({
    circle: false
})

Let’s now install our package, run:

 npm i radiuswizard --save

We are now ready to test our package.

We need a javascript bundler, for that we will use parcel, which is easy and requires zero configuration. If you don’t have it on your machine, install it by running this:

 npm i parcel -g

When the installation is finished, run the development server:

parcel index.html

Now open:

$http://localhost:1234/ in the browser$

This is what you should see:

Yaaay!! It’s working, our image has a border-radius of $25px$ as we specified in our package. 🤩

Now, let’s try the circle option – go back to the index.js file and give the circle a true value instead of false:

import {
    radiuswizard
} from 'radiuswizard';
radiuswizard({
    circle: true
})

Now, the border-radius of $50$ is applied to our image:

Everything is working as expected. 🥳

Congratulations on writing and publishing your first NPM package ✅.