How I developed and published my first NPM package

How it all Started🎊

With the lockdown in place, I started exploring about web development and worked on few projects. While I’d been dabbling in web development, I thought of creating a simple NPM package and publishing it.

What is NPM ?🤔

NPM is a package manager of JavaScript runtime environment Node.js .It consists of a command line client that interacts and allows users to consume and distribute JavaScript code in the form of packages. This article will help you to create and publish your own NPM package.

NPM and Node.js

What are we gonna build?🙄

The main motive behind this article is to explain how to create and build a simple NPM package. The build and publish procedure is same for any package, all you need is to have a basic understanding which will be covered in this article.

In this article we will be creating and publishing a package to add shadow and padding of images.

Building the package👨‍💻

Basic requirements

You need to have NPM command line tool to create and publish NPM package which is distributed with Node.js. So, download Node.js by using this link. To verify whether NPM is installed properly or not, type the following command and it should output the current version.

npm --version

After the installation of Node.js and NPM we can start building our package. In the CLI make a directory using the following commands.

# Create a directory named shadow
mkdir shadow
# Change into the above directory
cd shadow

Project Code

Using a code editor, create a index.js file then add the following code :

function shadowpad(options){
let images = document.querySelectorAll('.shadowpad');
if (options.shadow_type === 'hard'){
options.shadow_type = '0px'
}
else {
options.shadow_type = '15px'
}
images.forEach(image => {
image.style.boxshadow = `10px 10px ${options.shadow_type} 1px rgba(0,0,0,0.12)`;
if(options.padding){
image.style.padding = '1 em';
}
})
}
module.exports.shadowpad = shadowpad;

Note : The exporting function in the module.exports command is what would be available for importing when others install our package.

NPM Initialization

# Initialize an NPM package
npm init

Using the above command, we will initialize an NPM package. After this command you will have an interactive session in the CLI which would initiate the creation of package.json file. The content of the file will look similar like this :

{
"name": "shadowpad",
"version": "1.0.0",
"description": "Awesome shadow for non-designers",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Raswanth8/shadowpad.git"
},
"keywords": [
"shadows"
],
"author": "Raswanth",
"license": "ISC",
"bugs": {
"url": "https://github.com/Raswanth8/shadowpad/issues"
},
"homepage": "https://github.com/Raswanth8/shadowpad#readme"
}

Note: The package.json is the most important file in the process without it , we can’t publish the NPM package.

The main field in the JSON file is used to load the appropriate file when your package is imported, by default it points to index.js.

Publishing the Package💻

Authentication

Before publishing you need to create an account in the NPM registry which can be done using this link .

After creating an account, you need to to authenticate yourself in the CLI using the commands:

# For Authentication
npm login
npm whoami

If your username is displayed, then you have successfully authenticated your account.

Publish

All you need to do for publishing the package is to type the following command in the CLI:

npm publish

After publishing the package without any error, you can visit your NPM account and see the package.

Conclusion👋

Being quarantined at home does give one a lot of time to explore new things. If you want to explore something new, I would say this article would definitely help you out.

Drop a 👏 if this article helped you out.