Getting Started with NPM: A Step-by-Step Guide to Creating and Publishing Your Own Package

Hello everyone! I am very happy to make this blog and share some knowledge. Now, In this blog, I am going to teach you how to create an npm package and how to publish it. At the end of this article, you will get an idea of how to create and publish an NPM package.

First of all, what is NPM?

NPM stands for Node Package Manager. Yes, it's a Node.js package manager that helps us to easily manage and distribute packages like libraries, frameworks, tools, etc. By using this, we can install packages globally or locally.

Example: npm install package-name Using this command, you can install a package in your project.

Let's cook our own NPM package:

The very first ingredient for making an NPM is Node.js. You can install it through their official website nodejs.org.

First, you want to decide what you would like to create as an NPM package. For now, we are simply creating our package with this code.

This program returns a string like this "This is NPM".

Now, create a folder. In our case, we create a folder with the name "my-npm-package".

Open your terminal in this folder and run this command: npm init

By running this command, you can provide details about your package, like name, version, license, entry point, author, description, keywords

After filling in these details, a file called package.json will be created in that folder. then open that package.json with a text editor and check your package's details. If you need to edit any details or add some more details about your package, you can do that with that file.

If you are using React JS, you can add dependencies and devDependencies like this:

"dependencies": 
{     
"@babel/core": "^7.22.10", 
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/plugin-syntax-jsx": "^7.22.5", 
"@babel/preset-env": "^7.22.10", 
"@babel/preset-react": "^7.22.5",
"babel-loader": "^9.1.3", 
"react": "^18.2.0",
"react-dom": "^18.2.0"  
 },
  "devDependencies": 
{
    "autoprefixer": "^10.4.15",
    "copy-webpack-plugin": "^11.0.0",
    "tailwindcss": "^3.3.3",
    "webpack-cli": "^5.1.4"
  }

but for now, we don't use these dependencies, so skip this.

Then in your package.json it has a key called main that contains the file name that we entered previously in terminal as an entry point. So for now, our package JSON contains index.js, so create an index.js file and paste our code.

function helloWorld()
{
return "This is Npm"
}
module.exports = helloWorld

Now create a test folder, and inside that folder, create a test.js file to check our code to see whether it's working or not.

In that test.js paste this code.

const helloWorld = require('./hello-world');

console.log(helloWorld());

then navigate to that test folder in your terminal and run npm link package-name in our case npm link my-npm-package

It will create node_modules in the test folder. It will install our package locally, Then run node test.js which will return "This is Npm" as an output in your terminal.

So our package is working well.

Now go back to the package folder and type npm publish in the terminal.

This time it returns an error because we want to create an NPM account for this. Go to npmjs website

After register your account, You want to verify your account and complete Two-Factor Authentication for this Two-Factor Authentication you can use any Authentication provider.

but I suggest you use Google Authenticator.

then back to the text editor and run that npm publish again it will ask you to enter the OTP in the browser by clicking enter. Once you enter the OTP, your first NPM package is published.

Hurray!!! We created and published our first NPM package.

Now users can access Our npm from anywhere by installing the package using npm i my-npm-package

Note: For the teaching purpose i use this name if you want to create and publish a package check the availability of the name in npmjs website's search bar. Because , you cannot publish a package with a duplicate name.

Yeah! that's it I hope I explained the process of creating a basic NPM package understandably.

See you in another blog. Bye!!!

This article is published w/ Scattr ↗️