How I created a npm library, published it in a day?
Tags: mern, javascript, npm, react
Published: 2023-12-07 14:33:02

Hello reader, 
So you are interested in publishing your own library on [npm](https://www.npmjs.com/package/mernkit?activeTab=readme)? 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hquinrcn0k1rx496fmqu.gif)

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

```
npx mernkit your-project
```

If you want to learn more about this library, one click to check it all(2 mins read!), [mernkit](https://www.npmjs.com/package/mernkit?activeTab=readme)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dupguikd9yglo171zzm.gif)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8b9nna57fn0rk85w6qj.png)
I needed Vite.js, React Routers, Tailwind CSS for front-end

![Back-end for MERN project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2r9c6myx3v3akelv687.png)
Then model, controllers, routes, config.js, .env folder and thug get a proper structure. 

Then coded it all out, giving u my [GitHub](https://github.com/mank-423/MernKit) repo, the templates folder holds all my code.


![Pumba](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygl6pnijry6ng85fh5sm.jpg)


## 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](https://www.youtube.com/watch?v=J4b_T-qH3BY).

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();
```

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3a02ph5yewo6y8vx6b5.png)

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
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp444fgmqkaia77df5vi.gif)

Hit me up on my socials for any discussions,
[Instagram-mank_42](https://instagram.com/mank_42)
[Twitter-okaymank](https://twitter.com/okaymank)
[Linked-In-Mayank Kumar](https://www.linkedin.com/in/mayank-kumar42/)
[Github-mank-423](https://github.com/mank-423)