Packaging Reusable Code for npm

Mervyn Manilall
19h
121
0
0

Article

As developers, we spend a surprising amount of time solving the same problems over and over again.

Keyboard shortcuts. Form validation. Date formatting. API wrappers. Utility functions.

Even across different projects, and sometimes different companies, we end up rewriting very similar code. Not because libraries don’t exist, but because the solution is often tightly coupled to a specific framework, project structure, or coding style.

This is where reusability becomes more than a convenience, it becomes a productivity multiplier.

When you extract a piece of logic into a reusable package, you:

reduce duplication,
improve consistency across projects,
and turn a one-off solution into something that can evolve independently.

Publishing to npm takes this one step further. Instead of reusing code only within your own projects, you make it available to anyone who faces the same problem. You also force yourself to think more clearly about:

API design,
documentation,
and long-term maintainability.

In this article, I’ll walk through the complete process of creating a small JavaScript package and publishing it to the npm registry — from structuring the project to testing it locally and finally making it publicly available.

The goal isn’t to build a complex framework, but to show how even a simple, focused utility can be turned into a proper package that others can use.

I have recently published my first package called Keyroute and will use it as an example.

Creating and publishing to npm

If you do not have angular or node, please do needful to install and have them
Create a workspace using:
ng new keyroute-workspace --create-application=false
Go in the workspace:
cd keyroute-workspace
In the workspace, generate a library as follows:
ng generate library keyroute
In projects/keyroute/src/lib/keyroute.ts
Write your logic.
It is where the actual re usable component sits
Go to the public-api.ts file. (projects/keyroute/src/public-api.ts)
Add the following line: export * from './lib/keyroute';

If your package is different, then add the name of your library instead of keyroute at the end.

In the package.json of package.json in the project folder, add the following:

  "version": "<<version of your package based on your version system>>",
  "description": "<<a description of what your package does>>",

  "keywords": [

    "keyboard",
    "shortcuts",
    "hotkeys",
    "accessibility",
    "angular",
    "react",
    "vue"
  ],
  "license": "MIT"
}

Run: ng build keyroute

This will create a ‘dist’ folder. This ‘dist’ folder is the one which is going to be pushed later to the registry

NOTE: Everytime you make a change, you need to run the build command so as to create the ‘dist’ folder, hence the code that will be sent to the registry.

Testing in local

Go in the ‘dist’ folder using the cd command:
cd dist/keyroute
Run the following command:
npm link

This will register your package as a local npm package.
In your new project, simply run: npm link keyroute
This works no matter where you created your package. What matters is that the name of the package is the one you set in the package.json in the projects folder earlier.
When using your package in your new project, import it normally like below:
import { <<name of the function you exported in your package>> } from '<<name of your package>>’';

Publishing to the npm repository

Create an account https://www.npmjs.com/
Create a token

Then click on ‘Generate token’
Provide the details of the token, set the scope and permissions and the expiration date.
I had set the permissions to read and write and expiration date to the minimum I needed for security reasons.

Once the token has been generated, copy it and keep it safe.
In your global .npmrc file, add the following line.

//registry.npmjs.org/:_authToken=<<your token>>

E.g //registry.npmjs.org/:_authToken=npm_nRaEPBdH2SEulqfk1w6vf3lX0Eo1WI0Q

Go in the Angular project which you used to create the package.
Run the following command:
npm login

Provide your npm registry credentials.
Go to the ‘dist’ directory using the cd command:
cd dist/keyroute
Run the publish command:
npm publish

NOTE: If you update your package, change the version in the package.json.

Once done, then run the build and publish command.

The description page of your package on the npm repository is what you have in the README.md in the ‘dist’ folder.

Everytime you make a change in this file, you need to update the version in the package.json, do a build and publish again.

Conclusion

Creating and publishing a package to npm is less about tooling and more about mindset.

It’s the shift from writing code that only works here and now to writing code that can be reused, understood, and maintained over time.

Even a small library teaches you important lessons about:

designing clean APIs,
documenting behavior clearly,
handling edge cases,
and thinking about how others will consume your code.

The npm ecosystem is built on thousands of small, focused packages that each solve a narrow problem well. You don’t need a revolutionary idea to contribute to it — you just need a real problem and a clean solution.

If you already have utility functions scattered across your projects, chances are you already have the foundation of your first package.

Turning one of those utilities into a published library is a practical way to improve your own workflow while learning how open-source software is built and shared.

And once you’ve done it once, the process becomes much less intimidating — publishing a second or third package feels like a natural extension of your development process rather than a special event.