DEV Community

Cover image for How to Create Your First NPM Package (and Why You Should)
Dhruv Joshi
Dhruv Joshi

Posted on • Edited on

How to Create Your First NPM Package (and Why You Should)

Hey, this side, Dhruv. Ever Thought About Publishing Your Own NPM Package?

If you are reading this, you probably already know what NPM is. Maybe you have installed a few packages. Maybe you have used Express, React, or Lodash. But have you ever made your own package?

Don’t worry. It is easier than it sounds.

This post is going to walk you through the process of creating your first NPM package, step by step, like a chill friend helping you out on a weekend project.

By the end, you will have your own package out there in the world. Plus, you’ll feel like a boss. Because let’s be honest, it’s pretty cool.

Let’s get started.

What Is an NPM Package, Really?

Before we jump into the how, let’s get into the what.

An NPM package is just a piece of code that someone decided to share with the world. That’s it.

It can be a simple function that converts temperatures. Or a whole UI library. Or something in between.

If you have ever used npm install something, you have already used a package.

And guess what? There is nothing stopping you from putting your own code out there too.

But... Why Should I Make One?

Glad you asked.

Here are a few reasons why making your own package is a great idea:

1. You Learn a Lot
You get to learn about how packages are structured, how they are used, and how versioning works. It’s a mini crash course in real-world coding.

2. You Give Back
Maybe you built a useful function. Others might need it too. Sharing helps the community.

3. You Build Your Resume
Hiring managers love seeing that you have published something. It shows you care. It shows initiative.

4. You Gain Confidence
Once you put code out into the world, you feel more connected to the developer community. It feels real.

What We’ll Build

Let’s keep it simple.

We will build a tiny utility that converts text to title case.

You know, like this:

"this is a title" → "This Is A Title"

Not world-changing. But useful. And more importantly, enough to teach you the whole process.

Step 1: Make a New Project Folder

Pick a place on your computer. Create a folder for your package.

You can name it something like this:

my-title-case

Enter fullscreen mode Exit fullscreen mode

Open that folder in your code editor. VS Code works well.

Now open your terminal and run:

npm init

Enter fullscreen mode Exit fullscreen mode

This will walk you through a few questions. You can hit Enter to accept most defaults.

At the end, it creates a package.json file. This is the brain of your package.

Step 2: Write Your Code

Now, let’s create a file called index.js.

In that file, we’ll write the function.

function titleCase(str) {
  return str
    .toLowerCase()
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');
}

module.exports = titleCase;

Enter fullscreen mode Exit fullscreen mode

Simple, right?

We lowercase the whole string first. Then we split it into words. Then we uppercase the first letter of each word.

Finally, we join everything back together.

And then we export it.

Step 3: Test It Locally

Before publishing, let’s test this thing.

Create a file called test.js.

Write this:

const titleCase = require('./index');

console.log(titleCase("hello world from npm"));

Enter fullscreen mode Exit fullscreen mode

Now run:

node test.js

Enter fullscreen mode Exit fullscreen mode

If you see ''Hello World From Npm'' in your terminal, great job.

That means it works.

Step 4: Prepare for Publishing

Almost there.

We need to tell NPM what file to use when someone installs this.

In your package.json, look for the line that says "main". Make sure it points to index.js like this:

"main": "index.js",

Enter fullscreen mode Exit fullscreen mode

Also, add a simple description, like:

"description": "A simple function to convert text to title case"

Enter fullscreen mode Exit fullscreen mode

If you want, you can add keywords too.

That helps people find your package later.

"keywords": ["title case", "text", "utility"]

Enter fullscreen mode Exit fullscreen mode

Step 5: Create a README

You should always include a README file.

It helps people understand how to use your package.

Create a file called README.md and add this:

# My Title Case

A small function that converts text to title case.

## Install

bash
npm install my-title-case

Enter fullscreen mode Exit fullscreen mode

Usage

const titleCase = require('my-title-case');

console.log(titleCase("hello from npm"));
// Output: Hello From Npm

Enter fullscreen mode Exit fullscreen mode

Replace my-title-case with your actual package name. We’ll choose that next.

Step 6: Pick a Unique Name

This part is important.

Your package name must be unique.

Go to https://www.npmjs.com and search for the name you want.

Try names like:

  • my-title-case
  • easy-title-case
  • text-to-title

If it’s taken, try another one.

Once you pick a name, go back to your package.json and set it:

json
"name": "your-chosen-name"

Enter fullscreen mode Exit fullscreen mode

Make sure it is all lowercase. No spaces.

Step 7: Create an NPM Account

If you haven’t already, go to:

https://www.npmjs.com/signup

Make a free account.

Then, in your terminal, run:

npm login

Enter fullscreen mode Exit fullscreen mode

It will ask for your username, password, and email.

Once logged in, you are ready to publish.

Step 8: Publish Your Package
Take a deep breath.

Now run:

npm publish

Enter fullscreen mode Exit fullscreen mode

If everything is correct, it will upload your code to the NPM registry.

You will see a success message.

Congratulations. You are now officially a package author.

Anyone in the world can install your package by running:

npm install your-package-name

Enter fullscreen mode Exit fullscreen mode

That’s wild.

Step 9: Celebrate a Little

Take a second.

Go tell your friends. Post it on X. Add it to your resume.

Even if it’s a small utility, you made something real.

You took an idea, wrote some code, and shared it with the world.

Most people never do that.

You did.

Bonus Tips

Now that your package is live, you might be thinking: what next?

Here are a few things to consider:

1. Add Types (if you want)

If your package is JavaScript, you can add TypeScript type declarations.

Just create a file called index.d.ts and write:

declare function titleCase(input: string): string;

export = titleCase;

Enter fullscreen mode Exit fullscreen mode

Then add this to your package.json:

"types": "index.d.ts"

Enter fullscreen mode Exit fullscreen mode

This helps people using TypeScript.

2. Update Your Package

If you make changes, bump the version before publishing again.

Use semantic versioning.

Like this:

npm version patch

Enter fullscreen mode Exit fullscreen mode

Or:

npm version minor

Enter fullscreen mode Exit fullscreen mode

Then run:

npm publish

Enter fullscreen mode Exit fullscreen mode

Easy.

3. Keep Things Simple

Don’t overthink it. Your first few packages don’t need to be huge.

Even small utilities are useful.

Sometimes, small is better.

Common Mistakes to Avoid

Let’s quickly go over some common errors.

- Not Lowercasing the Package Name
NPM will complain. Always lowercase it.

- Forgetting to Export Your Function
If you don’t export it, people can’t use it.

- Skipping the README
README files matter more than you think. People want to know what your package does before they install it.

- Missing Version Bumps
Always bump your version before publishing again. Otherwise, NPM will stop you.

You Did It

Look at you.

You just built, tested, and published your first NPM package.

You joined a group of creators who don’t just use tools — they make them.

Whether anyone downloads it or not, you already won.

And hey, you can always build more.

Last Words

NPM packages are like digital LEGO bricks. You made a brick today. Someone, somewhere, might build something great with it.

Start small. Learn fast. Build often.

One little package at a time.

If you liked this post, feel free to share your first NPM package with me. I’d love to see it.

Now go build something.

You’ve got this.

Reach me!

Top comments (7)

Collapse
 
nevodavid profile image
Nevo David

Pretty cool seeing someone break it down so simple - gotta say, that feeling of just putting something out there for real is tough to beat.

Collapse
 
kelvincode1234 profile image
Precious Kelvin Nwaogu

Awesome 👏! That was such a clear explanation... I’m definitely going to try this someday!

Collapse
 
citronbrick profile image
CitronBrick

You can enable codeblocks in Dev.to as follows

triplebacktick language_name
code
triplebacktick

Collapse
 
cmegenius profile image
CMEGenius

Very good job!Like!

Collapse
 
traleeee profile image
Ar1su

Make it popular then deprecated 😂

Collapse
 
muhyilmaz profile image
MUHAMMED YILMAZ

Why should I ? useless

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi

It depends! :)