How to Prototype a CLI Using CommanderJS and InquirerJS in Less Than 3 Hours
By: Amy Lily
Tags: UX Research, JavaScript, Prototyping, Cli, UX

Let’s get started!

First of all let’s create a workspace and install a few packages.

Initialization:

$> mkdir macha && cd macha

$> npm init -y

Your output should look like this:

{

"name": "macha",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

After you initialize the package, we need to install commanderJS, inquirerJS along with 2 npm modules: colors, to add colors to our CLI, and pad,to add padding to the outputs. These will come in handy afterwards.

$> npm install --save commander inquirer colors pad

Now that our project is initialized, we need to add a bin field into the package.json file. In the bin field, we need to add macha , because this is going to be our app name in the CLI.

{

"name": "macha",

"version": "1.0.0",

"description": "",

"main": "index.js",

"bin": {

"macha": "./bin/index.js"

}, "scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [],

"author": "",

"license": "ISC"

}

Add 2 folders to your working directory ( bin and lib ):

You will need to create a bin folder and a lib folder in your working directory. Under bin is where index.js lives, this is where you will put all your commands and how you want to structure them. Under lib is where you store all you commands such as list and order . This folder handles all the command outputs. You will need one additional file where you store all your values, let’s name it menu_items.js .

|-macha

|-bin

|-index.js

|-lib

|-menu_items.js

|-list.js

|-order.js

|-node_modules

|-package.json

Create items in our menu menu_items.js :

This step, we are going to put all the items in our menu into one place menu_items.js . In this file, we need to export all the variables so we can use it in other modules.

Create your first command output list.js :

In the list.js file, you will import the tea variable from menu_items.js and customize how you want to show the output. I use pad and colors to make the space between outputs easily readable.

Create a list command in index.js:

In our index.js file, we will define the list command so when the prompt calls a list command, it will call the list.js file to show the output.

Now let’s try to run the command from your terminal.

In your macha directory, run:

~/macha> node bin/index.js

Your output should look like this:

Create a proper sub-command list :

Let’s create a proper list sub-command, the commanderJS way. We want to be able to run $> macha list from our command prompt, so we need to create list as a sub-command with CommanderJS.

The way it works is Commander will parse arguments in program.parse(arguments) , which leaves any args not consumed by the program options in the program.args array.

In the example above, we need to add the Shebang line on the first line (as we will make it global later). Then create a list command with Commander. The convenient thing about this library is that, commanderJS will create a default help argument for you. There are different options and flavors you can choose from in commanderJS specific options, where you can choose how you want to customize your command.

Finally, add process.agrv in the last line, so Commander can parse user inputs.

Before we run, let’s install this CLI app globally so you can access this command from any prompt.

$> npm install -g ./