How to Publish Package to NPM – Step by Step

In this tutorial, you will learn how to create and publish your first npm package step by step.

Prerequisite

  • Make sure you have an NPM account. If not, just go to https://www.npmjs.com/ and create a free account.
  • You need to have and IDE, either VS Code or IntelliJ

We would cover the following

  1. Create a Node Application
  2. Test the Package
  3. Publish the Application
  4. Publish a Scoped Package

 

1. Create a Node Application

We’ll begin by creating a simple node application. This is the application that would contain the functions we want to expose through npm. So follow the steps below:

Step 1 – Create an empty Github repository

Step 2 – Create an empty directory and open it in VS Code ( you can also use IntelliJ).

Step 3 – Create an empty  sub-directory ( I call it package). This will contain the actual package we’ll be publishing. By the way, a package is just a fancy name for a collection of one or more files (modules) which contains function(s)

Step 4 – Navigate into your package sub-folder

Step 5 – Initialize your application by copying the commands from git and running on your command line.

Step 6 – Initialize the node application using npm init command and fill in the prompts.

Note – Give the package a name. Here I call it genius-greet. The name of the package is important!

Step 7 – Create a file inside the package folder. Name it index.js just like in the npm init prompt. The content of the file is as follows:

//Collection of Functions to say a greeting

function sayHello(name) {
    return `Hello ${name}`
}

 const sayHi = (name) => {
    return `Hi ${name}`
}

function sayWelcome(name) {
    return `Welcome ${name}`
}

 module.exports = {sayHello, sayHi, sayWelcome}

 

2. Test the Application

Generally before you publish anything, it’s good to test it to make sure it works as expected. So we would create a test application  that would use the package we are creating.

We would use the npm link command to simulate the behaviour of an npm package. The steps are given below:

Step 1 – Create a folder to hold the test application. npm-demo

Step 2 – Login to npm using the command npm login and enter your username and password.

Step 3 – While in the original package directory, run the command npm link. This command allows your local package to to simulate an npm package.

Step 4 – Navigate into the test directory.

Step 5 – While in this directory, run the command npm link genius-greet. This command is equivalent to npm install. You will notice that our package is install in the test application.

Step 6 – Create a file named client.js ( you can use any name). The content of the file is given below

//A file to test our new package

const greet = require("genius-greet")

console.log(greet.sayHi("Kindson"))

console.log(greet.sayHello("Kindson"))

 

Step 7 – Test the application by running the command node client.js. You will notice that the greetings are logged in the console. This means that everything worked as expected.

 

3. Publish the Package

Once you’ve confirmed that everything worked as expected. It’s time to publish the package. This is done using a single command:

npm publish

 

If this command runs successfully, your package will be published and available in npm! So you can check that it’s there. After now you can just install your package just like any other package using npm install genius greet.

 

4. Publish a Scoped Package

A scoped package is a package published under some user. The name of this package is prefixed by the your npm username. For example kindsonthegenius/greetings.

This is very important because you many have a package with an already existing name. In that case you need to publish it as a scoped package. That requires only two steps as given below:

Step 1 – Change the name of the package in the package.json file to be prefixed with your username

Step 2 – Publish the package using the following command:

npm publish --access=public

 

Now you can check your npm profile and see that the package is available there as well.

If you’ve come this far, big thumbs up to you! If you have any issues, just write me a comment below. Also do watch the video tutorial on my YouTube Channel – Kindson The Tech Pro.

kindsonthegenius

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published. Required fields are marked *