How I built my first NPM package.

How I built Methane-Cli

Recently I’ve been learning Angular and one thing I love about Angular is its CLI tool which helps improve and speed up development.

Coming from a React background, there isn’t any kind of CLI tool built-in with React that can automate development. So I decided I was going to build one.

So I started my research, I knew what I wanted to build so I knew exactly how to start, I knew the tool is a CLI tool meaning I need a way to take inputs from the user when they type a specific command. I discovered we had tons of them Yargs, commander etc. So I choose Commander and started learning how to use it with NodeJs.

While I was learning this, one of my friends Benaiah Alumona built a CLI tool that helps developers quickly and easily scaffold out their favorite technologies called create-prospark-app. I was impressed and at the same time motivated to build my own CLI tool too.

You can also check his tool on NPM

npmjs.com/package/create-prospark-app

I also check his Repository and I discovered a lot of tools which I can also use in my project like colors to beautify CLI texts, figlet, and gradient-string.

I then decided that was enough learning and it is time to build the Package, I started by creating an NPM package by running.

npm init

Then I filled all information and created my package entry point. index.js

I also ran some git commands to track my projects with git and also push to my GitHub.

git init

Then I created folders to modularize my package, folders such as helpers, config.

I added files to initialize the commands in the config folder such as the CLI package name renderer, CLI arguments checker and all.

Trust me before I did this, I already wrote spaghetti codes in the index.js file just to test things out.

After I was able to render my package name on the terminal and take some inputs from the user, I started working on the main package functionalities.I mapped out some commands like config, generate, and init which see the commands I would be expecting from the userThen I wrote the codes to achieve that. I got stuck at some point but thanks to ChatGpt. I was able to resolve those bugs.

I then proceeded to refactor my codes and remove repetition by writing helper functions, that’s what the helpers folder is doing.

After getting the main functionality, I tested my package couple of times and when I was satisfied, I decided to host it, trust me that was where I had issues.

I checked online on how to deploy my NPM package, I got it on the first try. I ran some commands

npm publish

It took some time but finally, my package was on, NPM and anyone could use it. Then I was so excited to install my NPM package and use it.

npm install -g methane-cli

It worked and soon, my package was on my computer.

methane-cli

As usual, it rendered the package name and descriptions, which was cool, then I tried generating a react component and that’s where the problem started.

methane-cli g -c MyComponent

Why, What Happened Exactly?

Well I built the package to be very flexible and users can configure the package to their taste but the issue I had was that my computer was not able to locate the configuration file in the CLI package to read the default configuration to generate the components.

I debugged and debugged and debugged, and each time I push, I had to republish my NPM package so I had up to 10 different versions 😅

I later fixed the bug and I pushed again, and I was really happy when it worked fine. I tested it on my react projects and it worked fine, I then made a post about it, told friends who write React, and shared the link to the GitHub repository.

I am still working on the package and I would release more updates very soon.

Thanks for reading.

If you want to know more about methane-cli and how it works, you can check the github repo.

GitHub Repo

github.com/adedoyin-emmanuel/methane-cli

Npm package

npmjs.com/package/methane-cli