Do you know how to create an npm package and publish it?

Chamara Madhushanka
5 min readAug 16, 2023

--

It is very easy to create an npm package and publish it. Here, I am going to guide you on how to do it step by step.

As an example, I am going to create an npm package that can group array objects by a specific object key (attribute name).

const cars = [
{
make: "BMW",
modal: "X1",
capacity: "2000cc",
},
{
make: "Benz",
modal: "E300",
capacity: "3000cc",
},
{
make: "BMW",
modal: "X6",
capacity: "2500cc",
},
];

So, I need to group this array by “make”. Let’s begin!

  1. Setup and Preparation:

Make sure that you have Node.js installed on your machine. You can download it from the official Node.js website: https://nodejs.org/

2. Create a Folder for the Project:

Create a new folder for your project and navigate to it in your terminal.
(Eg: group-by-name)

3. Initialize the Package:

Run the following command to initialize your package. This will guide you through creating a package.json file that contains information about your package.

4. Package Configuration:

In your package.json file, make sure you have the necessary fields filled out:

  • "name": Your package's name. This should be unique on npm.
  • "version": The initial version of your package.
  • "description": A brief description of your package.
  • "main": The entry point of your package (usually the main JavaScript file).
  • "keywords": Keywords to help users find your package.
  • "author": Your name or the package's author's name.
  • "license": The license under which your package is distributed.

5. Create Your Package:

In your root folder, create the main JavaScript file as an “index.js” and write your code as follows;

6. Publishing:

Before publishing, make sure you have an npm account. If you don’t have one, you can sign up on the npm website: https://www.npmjs.com/signup and create an account.

Log in to your npm account using the following command and follow the prompts;

Once logged in, you can publish your package using the following command;

Note: If you want to update your package, remember to increase the version number in your package.json file before publishing again.

Hey guys, our package is now live!

However, we do have minor enhancements.

  1. Add Readme file
  2. Push our code into GitHub and link to our npm package.

Adding Readme file:

Create a file as README.md and copy the following code there.

# group-by-name

Here's a simple grouping function in JavaScript that you can use to group an array of objects by an attribute (in this case, the "name" attribute):

# Install

```sh
npm install group-by-name
```

# Usage

## groupByName(array, name);

_array_ - input array.
_name_ - object key name (attribute name);

Input:

```js
const cars = [
{
make: "BMW",
modal: "X1",
capacity: "2000cc",
},
{
make: "Benz",
modal: "E300",
capacity: "3000cc",
},
{
make: "BMW",
modal: "X6",
capacity: "2500cc",
},
];
```

Invoke:

```js
const groupByName = require("group-by-name");
const output = groupByName(cars, "make");
```

Output:

```js
[
{
name: "make",
data: [
{
make: "BMW",
modal: "X1",
capacity: "2000cc",
},
{
make: "BMW",
modal: "X6",
capacity: "2500cc",
},
],
},
{
name: "make",
data: [
{
make: "Benz",
modal: "E300",
capacity: "3000cc",
},
],
},
];
```

# License

ISC © chamaramadhushanka
"# group-by-name"
"# group-by-name"

Now you can publish the code. But you have to increase the version number in your package.jsonfile before publishing again.

Push our code into GitHub and link to our npm package:

  1. Log in to your GitHub account and create a public repository named “group-by-name”:

2. Next, execute the following commands in your terminal:
Initialize a git repository:

Add all files to the repository:

Commit all added files to the repository:

Create a new branch:

Link your remote repository:

Finally, push changes to the main branch:

3. Add your GitHub repository link to the package.json file as shown below, and then publish:

Note: You can automate the deployment process through GitHub Actions, which will automatically publish to npm when you push your code to the GitHub repository. https://www.youtube.com/watch?v=GW1sY_Ipfd0

Congratulations! Everything is done.

https://www.npmjs.com/package/group-by-name

--

--

Chamara Madhushanka

Software engineer - React, redux, node, express, MongoDB, HTML, CSS, Javascript, TypeScript, SaaS, AWS, Bootstrap, Material UI, MVC, RESTful APIs and Figma etc.