How to Create and Publish a Package on NPM: A Step-by-Step Guide
Tags: npm, webdev, javascript, tutorial
Published: 2023-07-09 08:00:28


![Package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihln0rmdmlncvzq711z1.gif)

If You are into Software Development and you don’t know What is npm or a package? what are you even doing … But don’t worry by the end of this blog you will be able to understand What npm is, what is a npm package and How to make one for you and publish it so that others can also use it. Now Enough of this rant let’s get straight to the point and learn and understand for what you are here.

First of what is [NPM](https://www.npmjs.com/) and why you as a developer should know this? NPM Stands for Node Package Manager and as the name suggests it is a Package Manager for Javascript. It allows developers to easily install, manage and share Reusable codes called modules/packages to make applications efficiently.

Let’s make an analogy with Google Play Store / Apple App Store to understand it even better. You use these stores to download any apps or games ( sometimes movies or books also ) or if you are a developer you can also upload your own apps/games onto these platforms for a fee. Now in the same way NPM is a store for Developers like you and me to install or share(publish) [our codes](https://www.npmjs.com/package/tweet-id) in the form of modules or packages as we say.

## But Wait why do we even need packages in the first place ?

![why npm package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2z657lz4rymjzo90obv.gif)

Imagine a situation in which you are given the task of building a car (I know this is an extreme example, haha) so what will do? Are you going to build every part of the car from the engines to the structure of the car to the tires?

No, Right because rather than reinventing the wheel we will import some parts and develop only crucial parts in-home so in the same way instead of writing code for everything from scratch we will use a package built by other devs so that we can focus on building important things on application. Plus it also provides a lot of features You can just google it and you will find a lot of articles/blogs explaining this.

## So what do we need to make/build a package from scratch?

**in order to make a package by yourself You need these 3 things :
**

- Node js - Node is the javascript runtime environment to run your javascript code locally on your system. To install this click [here](https://nodejs.org/en) and click on the option shown in the image below and rest just follow the steps like you install any other software.

- After installing Open Terminal and type node -v. if you get something like v18.12.1 (this is the current version on my system) the node is properly installed on your system.


![Node JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj1zf4wwp6xzfh5r3562.PNG)

- NPM - npm comes pre-installed with node. To verify do the same in the terminal, type npm -v. you will get 8.19.2.

- You need some basics of Javascript & ES6 versions because we going to make this package in JS.

**
Now we are all set to make our first Package. next thing we need is to set up Our Project:**

- Create a new directory for your project using mkdir project-name the command.

- Navigate into the project directory using cd project-name.
- Initialize the project as a Node.js project by running npm init command.

- During the initialization process, you'll be prompted to enter details such as the project name, version, description, entry point, test command, repository URL, and more.

- Provide concise and accurate information for each prompt.

- Consider using the default values for prompts that are not relevant or leave them blank.

- Use descriptive names and versioning following best practices.

Now that we have set up these things next we need to write the code and Logic for our package. But Wait what are we gonna make? We are going to make A simple package that gives you the tweet id: https://twitter.com/abhirajabhi312/status/1676605825446555650 (btw you can [follow me](https://twitter.com/abhirajabhi312) on Twitter where I share my learning and thoughts) If you see the last thing in this URL is the id that we are talking about

**Setup your directory :
**

- Make an index.js file and type the code of your package

![NPM Package JS file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bkw4knps8b51tvcheqs.PNG)

Now that we have our code ready let’s publish it on NPM.

To publish your Package on NPM you need to have an account on npm. Go to NPM > sign up

- Now Go to your project in vs code and open the terminal type ctrl+` (this is called the tilde sign ) and it will open a terminal screen for you.

- The first step is to type npm login in order to log in. It will then ask for your npm username, password and your registered email id. After entering the required information, npm will authenticate your credentials. To check type `npm whoami` if your username is displayed that means you're logged in.

- Now type npm publish . it will take some time depending on the size of the package. After some time you will see that your package is published along with your package details which have been provided during the setting up of your project.

- To check go to npm and type your package name. You will see all the details of your package.


![npm package website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7w8a5dn0yy5mqj65i5x.PNG)
This is the same package I uploaded on Npm. You can check [here](https://www.npmjs.com/package/tweet-id)

**Now that you have understood what is npm and how to make your very own npm package. Go ahead and make some cool packages that you think make other developers' life and easy.**

If you have made till here that means You now have all the knowledge in order to make your package and publish it on npm.

I will try to post such useful content more in the future for now if you found this useful, don’t forget to share and subscribe to my newsletter. A Big Thank You 


![npm javascript package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qwdwtlgj6iyvmtc7szg.gif)