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


javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, weโ€™ll outline the data types of JavaScript.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Letโ€™s deep in dive that how things going to work in GC.

Create a Line Through Effect with JavaScript

In this post we are going to create an amazing line through effect, with help of CSS and lots of JavaScript. So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.html, main.js and styles.css inside it.

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.