Building awesome CLIs with JavaScript and Oclif

Building awesome CLIs with JavaScript and Oclif

<strong>Originally published by </strong>Federico Kauffman <em>at&nbsp;</em><a href="https://www.streaver.com/blog/posts/building-CLIs-with-javascript-and-oclif.html" target="_blank">streaver.com</a>

Originally published by Federico Kauffman at streaver.com

Let's first define a CLI

A quick Google search yields, of course, a Wikipedia article with the CLI definition:

A command-line interface or command language interpreter (CLI), also known as command-line user interface, console user interface and character user interface (CUI), is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines). A program which handles the interface is called a command language interpreter or shell (computing).

So, in a nutshell, a CLI is a program that can understand requests made by a user in the form of text and then act and execute code in response to that.

This kind of programs are very useful for many different use cases, from simple CLIs like the cal Bash tool that displays the current month, to extremely complex ones like kubectl for managing Kubernetes clusters.

Even if you don't use CLIs directly every day (which is very unlikely), you probably are being indirectly affected by them, for example, git is a CLI, gcc the GNU compiler, create-react-app a scaffolding CLI for generating React apps, and many more.

How to build your own CLIs

Like many things in the tech world the answer is: "it depends". There are many ways to build them and all of them are probably valid in different contexts. In this case, I am going to explore how to build one with JavaScript and Oclif: a Node.JS Open CLI Framework (by Heroku), which includes a CLI for building CLIs ๐Ÿค”.

DANGER

From now on I will assume you are comfortable with JavaScript and the NPM ecosystem in general, if you are not, you will probably get a general idea, but I recommend you read something about that before starting ๐Ÿ˜ƒ.

Getting started with Oclif

In my opinion, building something is usually a great way to learn, so in this case, I did some brainstorming with @flarraa and decided to build a "Copa Libertadores" CLI (see Wikipedia) .

The idea is to provide a set of commands that can retrieve and display information about the already played matches and upcoming ones for the "Copa Libertadores" championship.

Let's dig in!

The Oclif CLI, has two possible ways to generate CLI projects, one is npx oclif single mynewcli and the second one is npx oclif multi mynewcli, in this case, we are going to generate a multi-command CLI.

We would like our command to look like libertadores games:alllibertadores games:pastlibertadores games:upcoming and this is consistent with Oclif's multi-command CLI generation.

Initializing the project

First, we initialize the project by doing:

npx oclif multi libertadores-cli

This will ask some questions and after that, it will install everything you need to start coding!

$ npx oclif multi libertadores
npx: installed 442 in 32.454s

 _-----_     โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
|       |    โ”‚      Time to build a     โ”‚
|--(o)--|    โ”‚  multi-command CLI with  โ”‚

---------ยด โ”‚ oclif! Version: 1.13.1 โ”‚ ( _ยดU_ ) โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ /A\ / | ~ | '._.'__ ยด |ยฐ ยด Y

? npm package name libertadores-cli ? command bin name the CLI will export libertadores ? description A simple CLI to get information about "Copa Libertadores" right in your terminal ? author Federico Kauffman ? version 0.0.0 ? license MIT ? Who is the GitHub owner of repository (https://github.com/OWNER/repo) streaver ? What is the GitHub name of repository (https://github.com/owner/REPO) libertadores-cli ? Select a package manager yarn ? TypeScript No ? Use eslint (linter for JavaScript) Yes ? Use mocha (testing framework) Yes ? Add CI service config circleci (continuous integration/delivery service)

I have selected some defaults I like and now you have a bunch of files and folders which will be our main structure for the project. Next enter the directory with cd libertadores-cli.

I am going to briefly explain what Oclif has generated for us:

.
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ bin
โ”‚   โ”œโ”€โ”€ run
โ”‚   โ””โ”€โ”€ run.cmd
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ src
โ”‚   โ”œโ”€โ”€ commands
โ”‚   โ”‚   โ””โ”€โ”€ hello.js
โ”‚   โ””โ”€โ”€ index.js
โ”œโ”€โ”€ test
โ”‚   โ”œโ”€โ”€ commands
โ”‚   โ”‚   โ””โ”€โ”€ hello.test.js
โ”‚   โ””โ”€โ”€ mocha.opts
โ””โ”€โ”€ yarn.lock

5 directories, 9 files

Looking at the tree of files you can see the bin directory which contains the binaries to run the command on each platform (Unix/Windows).

You see the src folder with an index.js file which simply exports an internal Oclif package which will load the available commands, and those commands are defined in the files placed in the src/commands folder. By default, Oclif generates a hello command, let's run that and see what we have:

$ ./bin/run

A simple CLI to get information about "Copa Libertadores" right in your terminal

VERSION libertadores-cli/0.0.0 darwin-x64 node-v11.13.0

USAGE $ libertadores [COMMAND]

COMMANDS hello Describe the command here help display help for libertadores

If you run the hello sub-command you get:

$ ./bin/run hello

hello world from ./src/commands/hello.js

Last but not least, you have the tests folder where you will place all your tests, in fact, Oclif already created some tests, and we can run them with npm run test or yarn test.

Creating the first command

First, we can delete the hello command since we are not going to use it, simply delete the src/command/hello.js and tests/commands/hello.test.js.

Now we can use the Oclif CLI generator command, let's create the games:all command with:

npx oclif command games:all

This will create all the files needed for the command (including tests) and also will update the README.md file automatically to include the new command.

We are going to get the details for "Copa Libertadores" from http://www.conmebol.com/es/copa-libertadores-2019/fixture, and we are going to use puppeteer to enter the site and get the data.

$ yarn add puppeteer --save
const puppeteer = require("puppeteer");
...
class AllCommand extends Command {
  async run() {
    ...
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(
      "http://www.conmebol.com/es/copa-libertadores-2019/fixture",
      { waitUntil: "load", timeout: 0 }
    );

// Insert some really crazy code to parse the HTML
// you can find this at https://github.com/streaver/libertadores-cli

this.log(results);

} }

Now we can execute libertadores games:all and we will get the results right there on the terminal:


As you may have noticed I also added a "loading" feature to give the user some visual feedback. In order to add that, you simply install the package cli-ux and then wrap the "slow" parts of the code in some start/stop calls:

Install it like this:

yarn add cli-ux --save

Add the spinner with something like:

const { cli } = require('cli-ux');
...

cli.action.start('Fetching data'); //Do something that takes time cli.action.stop(); ...

Now, at this point we have the CLI, we can write tests for it! Oclif comes with some nice defaults for testing this kind of CLIs. In this particular case, you just want to test that the output to the terminal is what you expect. Fortunately, that is exactly what the auto-generated test for the command does, you only need to adapt that code!

I will leave this task to you (the reader, just like Math books) ๐Ÿ™„...or you can check them out in the official repository for the "Copa Libertadores" CLI.

Install the CLI, stay up-to-date and don't miss games anymore โค๏ธโšฝ๏ธ!

-----------------------------------

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

โ˜ž Talking to Python from JavaScript (and Back Again!)

โ˜ž Top 12 Javascript Tricks for Beginners

โ˜ž Functional Programming in JavaScript

โ˜ž JavaScript for Machine Learning using TensorFlow.js

โ˜ž Learn JavaScript - JavaScript Course for Beginners

โ˜ž The Complete JavaScript Course 2019: Build Real Projects!

โ˜ž Become a JavaScript developer - Learn (React, Node,Angular)

โ˜ž JavaScript: Understanding the Weird Parts

โ˜ž Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

โ˜ž The Full JavaScript & ES6 Tutorial - (including ES7 & React)

โ˜ž JavaScript - Step By Step Guide For Beginners

โ˜ž The Web Developer Bootcamp

โ˜ž MERN Stack Front To Back: Full Stack React, Redux & Node.js


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

How to Retrieve full Profile of LinkedIn User using Javascript

I am trying to retrieve the full profile (especially job history and educational qualifications) of a linkedin user via the Javascript (Fetch LinkedIn Data Using JavaScript)

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.