DEV Community

Cover image for How I created a npm library, published it in a day?
Mayank Kumar
Mayank Kumar

Posted on

How I created a npm library, published it in a day?

Hello reader,
So you are interested in publishing your own library on npm? Or just trying to gain an insight on how it could be done, so yes it's very logical to try it out and was fun for me.

Any interviews/events or meet-up, have something to show your work, and move around like Simba, Pumba and Timoth 😂.

Trio Lion King

Try this command which will give you more insights to my library, and open to any addition to the libray!!

npx mernkit your-project
Enter fullscreen mode Exit fullscreen mode

If you want to learn more about this library, one click to check it all(2 mins read!), mernkit

Let's start with how I got it done quickly,

Ideation (1/5✅)

I wanted to have a proper folder structure for my MERN projects. Industry requires you to use MVC structure and it's good to get early with these habits.

Timon

Starting to work on it (2/5✅)

So firstly I created a folder structure with the basic ideation as this,

Front-end for MERN project
I needed Vite.js, React Routers, Tailwind CSS for front-end

Back-end for MERN project
Then model, controllers, routes, config.js, .env folder and thug get a proper structure.

Then coded it all out, giving u my GitHub repo, the templates folder holds all my code.

Pumba

Work on library structure (3/5✅)

Searched out on how to connect to npm with "npm login", and use your code to make a library, you can keep the logic as running just a single function or multiple. Then I looked on youtube and got one simple video of Web Dev Simplified.

Now keeping a script.js to make the library. This script.js will run and handle logical part of your library.

!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const projectName = process.argv[2] || 'my-mern-project';
const projectPath = path.join(process.cwd(), projectName);
async function copyDir(src, dest) {
  await fs.promises.mkdir(dest, { recursive: true });
  let entries = await fs.promises.readdir(src, { withFileTypes: true });
  for (let entry of entries) {
    let srcPath = path.join(src, entry.name);
    let destPath = path.join(dest, entry.name);
    entry.isDirectory() ?
      await copyDir(srcPath, destPath) :
      await fs.promises.copyFile(srcPath, destPath);
  }
}
async function copyTemplates() {
  try {
    const scriptDir = path.resolve(__dirname);
    await Promise.all([copyDir(path.join(scriptDir, '../templates/frontend'), path.join(projectPath, 'frontend')),
      copyDir(path.join(scriptDir, '../templates/backend'), path.join(projectPath, 'backend'))
    ]);
    console.log('mernkit setup completed successfully!');
  } catch (error) {
    console.error('Error copying templates:', error);
  }
}
copyTemplates();
Enter fullscreen mode Exit fullscreen mode

Testing!!(Very Important) (4/5✅)

While being in the root of project directory, "npm link", this links your library to test, create a new test folder and try to run the command to check your library.

Testing

Just because I didn't test my library well, I had to release version 1.0.0 to 1.0.7 to get a working library, not advisable so test it out well, and also get Read.me done.

Publish it!! (5/5✅)

Use the command, to publish your library/package to npm.

npm publish
Enter fullscreen mode Exit fullscreen mode

A basic 5 step method to get your own library and show your work to people apart from your GitHub, something which is live and open to people to use.

Now after you have published your package, it's time to relax, u have just made your first library just like me....

Simba

Hit me up on my socials for any discussions,
Instagram-mank_42
Twitter-okaymank
Linked-In-Mayank Kumar
Github-mank-423

Top comments (0)