Resume

How to Develop and Upload Your NPM Package

Master the Easy Way to Publish Your npm Package

⏱ 6 min read

Everything becomes easy once you know how to do it — and today, I’m here to make publishing your first NPM package easy for you because when I started, nobody made it this straightforward for me. I tried multiple times and learned it all by myself, so let me save you that hassle!

What Are You Going to Build?

Before rushing to create a package, ask yourself:

Do you know a problem you want to solve?

If you don’t have a problem in mind, don’t waste your time creating something unnecessary. First, find the problem. Then, work on a solution.

For this demo, I’ll build a small utility that sanitizes Markdown images. I’m working on a project where I fetch blog pages from Hashnode.dev, but the images come with extra attributes I don’t need. So, I created a simple function to clean those up and remove unnecessary attributes from the Markdown image syntax.

Step 1: Create the Code File

Create a file at src/index.js and add the following function:

// src/index.js
function sanitizeMarkdownImages(markdown) {
  return markdown.replace(
    /!\[([^\]]*)\]\(([^)\s]+)[^)]*\)/g,
    (match, alt, url) => `![${alt}](${url})`
  );
}

module.exports = sanitizeMarkdownImages;

This function uses a regular expression to strip out any extra attributes inside the image syntax.

Step 2: Initialize Your Package

Run:

npm init -y

This creates a basic package.json file. Now, open it and update it with the necessary fields like so:

{
  "name": "sanitize-markdown-images",
  "version": "1.0.0",
  "description": "Sanitize Markdown images by removing extra attributes from image syntax.",
  "main": "src/index.js",
  "files": ["src", "README.md"],
  "keywords": [
    "markdown",
    "image",
    "sanitize",
    "markdown-image",
    "markdown-clean"
  ],
  "author": "Aman Pareek <amanpareek.in>",
  "license": "MIT",
  "homepage": "https://amanpareek.in",
  "engines": {
    "node": ">=12"
  }
}

Must-Have package.json Fields Explained

Step 3: Add a README.md File

If you haven’t worked with Markdown files before, now’s a great time to start!

Your README.md is the face of your package on npm — it needs to be both beautiful and informative. It should clearly explain:

Here’s a simple example of what your README might look like:

# sanitize-markdown-images

Sanitize Markdown images by removing extra attributes from image syntax.

## Installation

```bash
npm install sanitize-markdown-images
```

## Usage 
```javascript
const sanitizeMarkdownImages = require('sanitize-markdown-images');

const dirtyMarkdown = '![alt text](image.jpg)';
const cleanMarkdown = sanitizeMarkdownImages(dirtyMarkdown);

console.log(cleanMarkdown); // Output: ![alt text](image.jpg)
```

Adding a License to Your NPM Package — The MIT License Example

When you publish an open-source package, it’s important to include a license file. A license tells others how they can legally use, modify, and share your code.

The MIT License is one of the most popular and permissive licenses. It lets anyone do almost anything with your code — including using it in commercial projects — as long as they include the original copyright and license notice.

Here’s the standard MIT License text you can use for your package:

MIT License

Copyright (c) [Year] [Your Name or Your Organization]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Simply save this as a file named LICENSE in your project root before publishing your package on npm.

Step 4: Publishing Your Package to npm

Now that your package is ready — with your code, package.json, README.md, and LICENSE files all set — it’s time to publish it on npm so others can use it!

1. Create an npm Account (If You Don’t Have One)

If you haven’t already, sign up at npmjs.com.

2. Login to npm via Command Line

Open your terminal and run:

npm login

Enter your username, password, and email address associated with your npm account.

3. Ensure Your Package Name Is Available

Before publishing, visit npmjs.com and use the search bar to check if your desired package name is already taken. This helps avoid name conflicts and saves you time.

If the name is available, you’re good to go! Otherwise, pick a unique name and update your package.json accordingly.

4. Publish Your Package to npm

Once your package name is confirmed, publish your package by running this command from your project’s root directory:

npm publish

This uploads your package to the npm registry, making it publicly available for everyone to install and use.

Updating Your Package and Publishing a New Version

To update your package, start by making the necessary changes to your source code and testing them locally to ensure everything works as expected. Next, update the version field in your package.json following semantic versioning: increase the patch version for bug fixes (e.g., 1.0.0 to 1.0.1), the minor version for new features (e.g., 1.0.0 to 1.1.0), or the major version for breaking changes (e.g., 1.0.0 to 2.0.0). After that, run npm publish from your project root to upload the new version to npm. Finally, verify your update by checking your package page on npmjs.com. Always test your package thoroughly before publishing, and consider automating your release process for smoother updates.

Pro Tips for Publishing npm Package Updates