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 😂.
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
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.
Starting to work on it (2/5✅)
So firstly I created a folder structure with the basic ideation as this,
I needed Vite.js, React Routers, Tailwind CSS for front-end
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.
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();
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.
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....
Hit me up on my socials for any discussions,
Instagram-mank_42
Twitter-okaymank
Linked-In-Mayank Kumar
Github-mank-423
Top comments (0)