DEV Community

Cover image for Creating an NPM Package with a Sample Library and App Project
Vivek Yadav
Vivek Yadav

Posted on

Creating an NPM Package with a Sample Library and App Project

1. What is an NPM Package?

An NPM package is a reusable module of code that can be easily shared, installed, and used in different JavaScript projects. It can contain utility functions, classes, components, or any logic that you want to make reusable.

  • Libraries: Functions or utilities that solve common problems.
  • Tools: Command-line tools or build utilities.
  • React Components: Reusable React UI components.

2. Creating the NPM Package

We will create a simple package called simple-math-lib that provides basic math operations like addition and multiplication.

Step 1: Create a Directory for Your Package

Start by creating a new directory for your package:

mkdir simple-math-lib
cd simple-math-lib
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize the NPM Project

Run npm init to initialize the package:

npm init
Enter fullscreen mode Exit fullscreen mode

You’ll be prompted for details such as:

  • Package name (e.g., simple-math-lib)
  • Version (e.g., 1.0.0)
  • Description (e.g., A simple math library with basic operations)
  • Entry point (usually index.js)

After answering these questions, package.json will be created.

Step 3: Create the Library Code (index.js)

Inside the package folder, create an index.js file with the following code:

// simple-math-lib/index.js

/**
 * Adds two numbers.
 * @param {number} a - The first number
 * @param {number} b - The second number
 * @returns {number} The sum of a and b
 */
function add(a, b) {
    return a + b;
}

/**
 * Multiplies two numbers.
 * @param {number} a - The first number
 * @param {number} b - The second number
 * @returns {number} The product of a and b
 */
function multiply(a, b) {
    return a * b;
}

// Exporting the functions to be used by others
module.exports = {
    add,
    multiply
};
Enter fullscreen mode Exit fullscreen mode

This file contains two functions: add() and multiply(), and exports them for use by others.

**

Step 4: Add a README File

Create a README.md to explain the package:

# simple-math-lib

A simple math library with basic operations like addition and multiplication.

## Installation

npm install simple-math-lib
Enter fullscreen mode Exit fullscreen mode

Usage

const math = require('simple-math-lib');

console.log(math.add(2, 3)); // Output: 5
console.log(math.multiply(2, 3)); // Output: 6
Enter fullscreen mode Exit fullscreen mode

---

## **3. Publishing the NPM Package**

### **Log into NPM**

Before publishing your package, you need to log into your **NPM account**. This allows you to publish packages under your account.

Run the following command to log into NPM:

npm login

Enter fullscreen mode Exit fullscreen mode

3. Publishing the NPM Package

Log into NPM

Before publishing your package, you need to log into your NPM account. This allows you to publish packages under your account.

Run the following command to log into NPM:

npm login
Enter fullscreen mode Exit fullscreen mode

You'll be prompted for your NPM username, password, and email address. If you don’t have an NPM account yet, you can create one at https://www.npmjs.com/signup.

Step 1: Publish the Package

To publish your package, run the following command:

npm publish
Enter fullscreen mode Exit fullscreen mode

This will upload the package to the NPM registry, making it available for others to install and use.

You will see a success message like this:

+ simple-math-lib@1.0.0
Enter fullscreen mode Exit fullscreen mode

Step 2: Updating the Package
If you make changes to your package, you will need to bump the version in package.json. For example, to change the version to 1.0.1:

npm version patch  # For minor changes
Enter fullscreen mode Exit fullscreen mode

Then publish again:

npm publish
Enter fullscreen mode Exit fullscreen mode

4. Using the NPM Package in an App

Step 1: Create a New App Project

Now, let's create a simple app that uses the package.

First, create a new directory for your app project:

mkdir my-app
cd my-app
Enter fullscreen mode Exit fullscreen mode

Step 2: Initialize the App Project

Run the following command to initialize the project:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Step 3: Install Your NPM Package

You can install your NPM package by running:

npm install simple-math-lib
Enter fullscreen mode Exit fullscreen mode

This will add simple-math-lib as a dependency in your app.

Step 4: Use the Package in Your App

Create an index.js file in your app project and use the math library:

// my-app/index.js
const math = require('simple-math-lib');

console.log("Addition:", math.add(5, 10));      // 15
console.log("Multiplication:", math.multiply(5, 10)); // 50
Enter fullscreen mode Exit fullscreen mode

Step 5: Run Your App

Run the app:

node index.js
Enter fullscreen mode Exit fullscreen mode

You should see the output:

Addition: 15
Multiplication: 50
Enter fullscreen mode Exit fullscreen mode

5. Conclusion

You’ve now created and published an NPM package, and used it in a separate app. Here's a summary of what we've done:

  1. Created the NPM package: We created a math library called simple-math-lib.

  2. Published it to NPM: We published the package to NPM for others to install and use.

  3. Used it in an app: We created a simple app and used the math functions in it.

Top comments (0)