Publishing your own NPM Package is too simple!!

January 7, 2024 (8mo ago)

Introduction

Isn't it cool if you can run command like npx <your_name> in someone's terminal, and they can read about you, your works, and find details like your social media handles, right at their terminal?

Or maybe you have created some cool React component, wouldn't that be even more cooler if other folks can use them in their projects just by installing an npm package?

I think you have got the drill already... Publishing your own NPM package is really cool and can help a lot of folks globally!! So, before we start about how to publish your own NPM package, I think you should run these two commands first at your terminal npx karthikmudunuri and npx get-response, to properly understand what I mean by "cool" and "helpful"!!

Create your NPM account

This is the most obvious step, if you want to publish your own package!!

Just head over to https://www.npmjs.com and create your account.

Also, remember to do two-factor authentication of your account. You can use an Authenticator app like TOTP Authenticator!!

We will talk later, about how and when to use our account. For now, let's continue to the next step!!

Choose the name of your NPM package

The very first thing you need to do before creating your package is to choose a name. This is important because your package needs to have a unique name and you cannot choose a name that has been used already.

After you choose a name, you've to go to the NPM registry and run a search. Be sure there's no exact match to the name you chose or a match that is too similar. Otherwise, you have to try choosing a different name!!

Let's start creating the NPM package

As I've stated in the title itself, that creating your own NPM package is extremely simple; now you will understand, why!

Install Node and NPM

If you don't have Node installed already, you should go and refer to this article and install it. In the article, you will find the step-by-step guide about how to install and maintain the different Node versions!!

Initialize git repository

Create a new project folder for your package and navigate into the folder. Then, run the following command in your terminal:

git init

This will help us track the changes in our package. Also, make sure that it remains hosted on GitHub!!

Initialize NPM in your project

To do this, navigate to the root directory of your project and run the following command:

npm init

Now, you will prompted to give some answers, I'm mentioning the utility of each one of them:

Once you provide all these information, a file will be created called package.json.

Additionally, you should modify the package.json file to add "type" : "module" which will enable you to write the JavaScript code in ECMAScript modules format. This allows for cleaner code organization, code reusability, and better encapsulation.

Write your code

Now, you can go ahead and write your code for the package.

For this tutorial, I will be writing my code in the index.js file.

Please add the following line at the start of the code because it tells the operating system to use the Node.js interpreter to execute the script. It allows us to run the script by simply typing its filename, without having to specify the full path to the Node.js interpreter.

#!/usr/bin/env node

Now inside the index.js file, write the code for your package. Here, I will be creating a simple package called test. This package will print the string "Follow karthikmudunuri in github https://github.com/karthikmudunuri" in the terminal.

#!/usr/bin/env node
 
console.log(
    "Follow karthikmudunuri in github https://github.com/karthikmudunuri"
)

Create an executable script

Now, we have to make this index.js file executable and assign it to a command, so that whenever we run that command, we get the result output-ed by index.js . For doing that, we have to add this in out package.json file:

"bin": {
  "test": "./index.js"
},

So, after all the changes, our package.json file should look somewhat like this:

{
  "name": "test",
  "version": "1.0.0",
  "description": "just to test how to publish npm package",
  "main": "./index.js",
  "type": "module",
  "bin": {
    "test": "./index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/karthikmudunuri/test.git"
  },
  "author": "Karthik mudunuri",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/karthikmudunuri/test/issues"
  },
  "homepage": "https://github.com/karthikmudunuri/test#readme"
}

Make the script executable

Now, to make this script executable, so that works perfectly, we have to run this command in our terminals:

Linux

chmod +x index.js

windows

git update-index --chmod=+x index.js

Test your NPM package

Testing ensures that your NPM package works as expected. To do that, first navigate to the root of your project. Then, run the following command:

npm link

This will make your package available globally. And you can require the package in a different project to test it out. For that, you go outside the root directory and try running the following command to add the package you have just created:

npm link <your_package_name>

Now you can run your package, and it should work perfectly!!

Publish Your NPM Package

To publish your package on the NPM registry, you need to have an account. And, I hope you have created that previously!!

So, now it's time to open your terminal and run the following command in the root of your package:

npm login

You will get a prompt to enter your username and password. If login is successful, you should see a message like this:

Logged in as on https://registry.npmjs.org/.

You can now run the following command to publish your package on the NPM registry:

npm publish

Note that, during these steps you may need to use your authentication app to authenticate the procedure!!

And so if you have been following along, then congratulations! You just published your first NPM package. And, you can visit the NPM website and run a search for your package. You should see your package show up in the search results.

Updating your already published blog

If you want to update your already published blog, because you have some bug fixes for the already released version or maybe you are implementing a new feature, you can do so by following these two simple steps:

 {...
 "version": "1.1.4",
 ...}

Conclusion

And now, you can probably boast about your coolness, because yes, your tool can be accessed anywhere in the world in anybody's terminal!!Did i miss anything @karthikmudunuri

LinkedIn