Related Tags

npm
javascript
web dev
programming
community creator

# 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 page 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) {

elements.forEach(el => {
if (options.circle) {
} else {
el.style.borderRadius = 25px
}
})
}


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
## Installation
npm i radiuswizard --save

circle: false
})


### Options
- _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-docs.

Then run these commands in the console :

git init
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

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 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 :

    <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<body>

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


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

Let’s add an index.js file:

import {
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 {
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 ✅.

RELATED TAGS

npm
javascript
web dev
programming
community creator

CONTRIBUTOR