Create And Publish An npm Package

I have been learning React recently. I already have some Angular experience and 26 years of HTML, CSS & JavaScript. Whilst doing this I learned that you can publish and consume an npm package in less than half an hour. The following are my notes and instructions if you want to have a go yourself.

1) Sign up & login to npm at www.npmjs.com

npm login

2) Create the project

mkdir paxium-tools
cd paxium-tools

3) Initialize the package

npm init -y

4) Add code: index.js

function capitalize(str) {
    if (!str) return "";
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function reverse(str) {
    return str.split("").reverse().join("");
}

function truncate(str, length) {
    if (str.length <= length) return str;
    return str.slice(0, length) + "...";
}

module.exports = { capitalize, reverse, truncate };

5) Add README.md

Include features, install instructions, and usage examples. npm renders this on the package page.

6) Configure package.json

{
    "name": "paxium-tools",
    "version": "1.0.1",
    "description": "A lightweight utility library with simple string functions for everyday use.",
    "main": "index.js",
    "files": ["index.js", "README.md"],
    "keywords": ["string", "utility", "capitalize", "reverse", "truncate"],
    "author": "Dave Amour",
    "license": "MIT"
}

7) Publish

npm publish

After publishing you can view this at https://www.npmjs.com/package/paxium-tools

For updates, just increase the version number in packages.json

(which was created when we did npm init -y) and do npm publish again

8) Test in a React app

npm install paxium-tools

import { capitalize, reverse, truncate } from "paxium-tools";

console.log(capitalize("react"));     // React
console.log(reverse("hello"));        // olleh
console.log(truncate("abcdefghij",5)); // abcde...

9) View via unpkg

https://unpkg.com/paxium-tools@1.0.1/index.js
https://unpkg.com/paxium-tools@1.0.1/README.md
https://unpkg.com/paxium-tools@1.0.1/package.json

Lessons Learned

• Keep index.js, package.json, and README.md in the project root.
• Always bump version before republishing.
• Use npm pack --dry-run to check contents.
• A good README makes your package approachable and professional.