How to get started with making NPM Packages ?

I have been fascinated by the internet and it has made me curious about the technologies that shape it. I have been learning MERN stack for a while now and have decided to develop a Node package that will create a boilerplate for the apps built using MERN stack.

Here’s what I realized, NPM packages are easy to build and use.

To create an NPM package, all you need to be familiar with is Node. So, let’s dive in

1. First, I created an empty directory and initialized a project by typing the following command in the terminal-

npm init

After filling up all the details, package.json was created.

2. Next, in index.js, in the very first line,

#!/usr/bin/node 

This string was required

This string basically tells the machine to treat ‘index.js’ as binary in the node environment.

3. Next, to make the boilerplate, I used the create-react-app package and to invoke the package programmatically, I used the child_process library. Other modules were also required that I used for other functionalities but we’ll come to later. So the index.js looks something like this —

4. Now, let’s dig into the main stuff. The first thing that I thought was that I’d need a project name from the user. So, I prompted the user with a question regarding the same. I found this cool library inquirer which takes all the types of inputs (from boolean to multiple checklist) in order to execute the above mentioned task.

const questions = await inquirer.prompt([{
 type: ‘input’,
 name: ‘projectName’,
 message: ‘What is the name of the project? (Use small letters and without space)
}]);

When above block of code is executed, the questions variable would look something like this,

{ projectName:<Something_User_Entered>}

5. Now that I fetched the project name, I decided to create a directory of the name and put the boilerplate in it. Here comes the use of the module ‘fs-extra’. I used mkdirs function to achieve this. I could’ve just spawned a child_process and used the ‘mkdir’ shell command but I used the mkdirs function, in order for the package to work on cross-platform.

fs.mkdirs(path.join(_cwd,${projectName}));

so, if the terminal was opened and the path was set to ~/Documents, a new folder named “projectName” would have been created in Documents.

6. Then I initialized the React App with create-react-app. For this, I used child_process to spawn a shell.

spawn(‘npx’,[‘create-react-app’,’client’],{
    cwd: path.join(_cwd,<projectName>),
    stdio:”inherit” 
});

cwd parameter defines on which path the shell should be spawned. So I basically initialized a react app in ‘client’ folder inside the main folder.

7. I had made a folder named ‘template’ inside my package which had the express files we usually need handy. So this step was quite easy, just copy everything from template to the folder I created.

fs.copy(path.join(__dirname,’template/’),path.join(_cwd,questions.projectName),(err)=>{
    if(!err)
        console.log(‘\x1b[32m%s\x1b[0m’,”Express App Generated”);
});

Note :
__dirname is path where the package exists OR where the index.js is
_cwd is path where the terminal instance is opened
Also, the first weird string in console.log is to colour the output.

8. Finally, I made a small change in package.json I added the following field,

“bin”: {
    “init-mern”: “./index.js”
}

By adding this field, I can invoke the package directly through the terminal like ‘init-mern’ and the package should run.

9. Then I published it,

npm login      //Login with your npm account
npm publish

Hit “npx init-mern” and the package would run.

Here’s the GitHub link if you want to refer my code.

Making NPM packages is quite easy. MERN boilerplate is just one example that I made out of a pool of packages that can be made. You can always make other packages which would make your work easy or which can be used to structure a code.

Happy Coding fellas!

Originally published at VITHelper.