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) {
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 , else the default value is .
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-docs.
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 npmjs.com and search for your package’s name. You should get something like this:
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">
<head>
<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>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="">
<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 {
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:
This is what you should see:
Yaaay!! It’s working, our image has a border-radius of 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 is applied to our image:
Everything is working as expected. 🥳
Congratulations on writing and publishing your first NPM package ✅.
- undefined by undefined
