I published my first NPM package

Published on:

NPM logo

I have published my first NPM package 😁 🥳 🙌🏻
I’ll describe the steps I followed to publish my first package auto-tabs on NPM in this blog post.

Prerequisites

You have Node and NPM installed in your machine. If you’re not sure, run the following commands to check if it’s installed or not.

node -v
npm -v

Functionality of the package

The package’s functionality, which was coded in vanilla JS, is pretty straightforward. I wanted to create several tabs that, depending on the tab, alter the content. I needed an option to have those tabs automatically change after a certain amount of time.

You can read about the code here.

The package.json file

  1. Make a directory and keep all the files related to the package.
  2. cd into that directory using terminal. Run npm init -y command in it.
  3. You’ll see something like this. Now you’ve a file name package.json in your root directory.
$ npm init -y
Wrote to /Users/aakash.gill/Aakash/Dev/auto-tabs/package.json:

{
  "name": "auto-tabs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Local testing through Linking

It’s always good to test the package locally first. To achieve that, we’re going to run an NPM command which allows creating symlink.

cd into the directory of the package and run the command npm link.

$ npm link

added 1 package, and audited 3 packages in 739ms

found 0 vulnerabilities

This will create a symlink in the global NPM folder in your machine. You can now use that NPM package in any of your project.

Note: The package-name is taken from package.json file, not from directory name.

Next thing you need to do is to actually use that package in one of the project. To implement that, open a project and run the command npm link auto-tabs to install your created NPM package. At the project’s root level, there is a folder called node_modules you can find. The package you built is located in that folder.

Publish the package

Time to release the bird out of the cage in the world of NPM :) If you don’t have an NPM account, go to their website and create an account. Run the command npm login in the terminal to login.

$ npm login
npm WARN adduser `adduser` will be split into `login` and `register` in a future version. `adduser` will become an alias of `register`. `login` (currently an alias) will become its own command.
npm notice Log in on https://registry.npmjs.org/
Username: gillaakash210
Password:
Email: (this IS public) aakashgill210@gmail.com
npm notice Please check your email for a one-time password (OTP)
Enter one-time password: 12345678
Logged in as aakashgill on https://registry.npmjs.org/.

Run the final command npm publish to publish the package on NPM. If everything’s goes well, your package is now live.

You can verify it by searching the package name at npmjs.com
or
You can try installing the package in any of your project by running the command npm install auto-tabs

Demo

Click here to check out the demo