How to Publish Your Own npm Package: A Step-by-Step Guide with implementation

Introduction

It's been a long time using many npm packages. In this blog post, I will guide you on how to publish your own npm package. Publishing your own npm package is a great way to share your code, contribute to the open-source community, and boost your developer portfolio. I'll walk you through the steps to create and publish your first npm package. Let's get started!

Why to publish a npm Package?

Sharing Knowledge: You can contribute useful tools and libraries to the developer community.
Portfolio Enhancement: Showcase your skills and projects to potential employers or collaborators.
Collaboration: Allow others to use, contribute to, and improve your code.

Prerequisites

Node.js and npm installed on your computer.
Understanding of JavaScript and TypeScript.
An npm account (you can create one at npmjs.com).

If you reach upto here means this is the perfect time to start doing what we want to achieve. It would be easier to understand so let's break this jargon into steps. Let's start without any delay.

Step 1: Setup Your New Project

First, create a New Directory:

  mkdir your-folder-name
  cd your-folder-name

Second, initialize a new npm project:
```
  npm init -y
```
Third, lets add typescript and it type ( Optional if you want to use TS ) :
```
  npm install typescript ts-node @types/node --save-dev
  npx tsc --init
```
If you are using TypeScript:

npm tsc --init will create a tsconfig.json file. In tsconfig.json, uncomment rootDir and set it to "./src". Similarly, uncomment outDir and set it to "./dist".

Step 2: Writing Your Package Code

Make sure you are in your project folder, then make src folder inside your project.
```
 mkdir src
```

Create your index.ts ( .js for javascript ):

 // You need to add your package code here.

In this post as I am creating a package that can handle zod validation and return the validation type too. Here is my package code below:

 import z from "zod"

 export const signupInput = z.object({
     email: z.string().email(),
     password: z.string(),
     name: z.string()
 })

 export type SignupType = z.infer<typeof signupInput>;

 export const signinInput = z.object({
     email: z.string().email(),
     password: z.string()
 })

 export type SigninType = z.infer<typeof signinInput>;

 export const createPostInput = z.object({
     title: z.string(),
     content: z.string()
 })

 export type CreatePostType = z.infer<typeof createPostInput>;

 export const updatePostInput = z.object({
     title: z.string().optional(),
     content: z.string().optional()
 })

 export type UpdatePostType = z.infer<typeof updatePostInput>;

Here nothing is fancy just a zod is imported and zod.object is used to write type of the fields. And each zod variables are export with their own type.

💡

Remember to install package just type " npm i package-name " in your terminal. In this case " npm i zod " make sure you are inside " your-folder-name " .

Step 3: Publishing Your Package

Now we are ready to publish our new npm package to the world! Here are some additional things to keep in mind for secure and well-maintained packages:

Security: Ensure your package doesn't contain any sensitive information like API keys or passwords in your source code.
.npmignore: Create a .npmignore file in your root directory to specify files or folders you don't want to publish (e.g., source code folders).

package.json: This file is essential for npm. Here are some key fields:

name: The unique name of your package (e.g., @your-npm-username/your-package-name).
version: The version of your package (e.g., 1.0.0). Update this for new features or bug fixes.
main: The entry point for your package's code (e.g., dist/index.js). This is the file that will be executed when someone uses your package.
description: A short description of your package's functionality.

These are all those things that are to keep in mind before publishing. So lets actually logged into npm and publish package.

Login into npm:

First you need to login to the account that you created at the beginning. You can use any of your account but the account must be of npm. For that in your terminal type " npm login ":
```
 npm login
```
Publish Your Package:

Once you get logged in to your npm then you can type " npm publish --access public ".
```
 npm publish --access public
```

💡

Before publishing , make sure that you update "name" : "@your-npm-username/your-package-name" and "main": "dist/index.js" in package.json file.

Step 5: Versioning and Updates

What about if you want update versions or update some patches, bugs in your package.

Updating Your Package:

Now start making changes in your code logics and update the version in "package.json" and publish again :
```
  npm version patch
  npm publish
```

Conclusion

Congratulations! We have successfully created and published our own npm package. We can use this package's functionality in the same way as using other packages like express and others. By following these steps, you can share your code with the world and contribute to the open-source community. Happy coding!