Pimp your Command Line Interface Bro!

Command Line Interfaces (CLI for close friends) are still so useful but are not always so beautiful. While hacking on a new GitLab CLI these summer nights, I was thinking on how I can beautify and UXify it. Here is the story of this CLI, with tips and tricks to build modern CLI in NodeJS.

First thing first, we are talking about NodeJS based CLI here. If you are not from this funky world, you can still read and share how you can apply the same things in your prefered language by sharing a comment below. I assume that you have node and npminstalled. If not, take a look to the awesome nvm.

npm install -g one-more-gitlab-cli

Once installed, it is available from your terminal as gitlabcommand(OK, I will change the command name, but I was not inspired...).

A good CLI must show help if the command does not receive good arguments, here is the current output (hopefully all good NodeJS CLI modules provides such feature without any pain):

You can now use the gitlabcommand on any git repository but it needs some configuration. To ease the configuration process and to be able to configure per repository, just because you may use several gitlab providers and also several git remotes, the CLI configuration uses git configto handle this: No special file to create, just reuse git tools. For now, it only supports global configuration (but there is an issue about supporting local one). Configuring means adding your gitlab url and a gitlab token (the token can be found in your gitlab instance in the profile/account page, use the ‘Private Token’ available on the top of your account page) to your git global configuration:

Once done, you can go on any repository related to the gitlab instance you just defined, and use the CLI. For now, it supports basic operations on issues and merge requests (but some funky ones are planned):

The early version was just providing some standard CLI features and quite raw output. But as for Web UI, I believe that CLI also needs to provide nice ‘UX’. Here are the modules I added to move from raw to nice output as shown in the video above.

Arguments parsing

I wanted to give yargs a try this time. Nothing really special to say on the feature side, it can parse anything, check, transform, generate help, etc, etc. The only bad point is its documentation. The only way to learn how you can use it is to look at the examples in the source code.

Style

Even if we are far from Web UIs, adding some colors and formatting text is quite nice to pinpoint important parts. The chalk module is here to ease your life and you can do almost everything with it. Here is how a GitLab issue can be displayed in some lines of code:

Bold title, light description, backgound color on issue state: better than a plain raw text in some lines of code:

(I will not say how better is to use Moment.js to display dates, you should already know it…)

Displaying list

By getting a list of items, a nice way to display it will be in a table. Do you remember the old days you were doing table/tr/td in your Web pages? It was not fun at all, but doing it in a CLI is quite better with cli-table.

Which will print something like this:

There are still tons of tiny modules you can add to beautify your CLI, I personally overuse ora to create spinners (the one you can see when launching a command) and blessed-contrib to create dashboards. You can also notify your users that a new version of the CLI is available by using update-notifier, etc... All of this working on terminals, on all OS.

The one-more-gitlab-cli is in its early days, there are tons of possibilities with the GitLab API, tons of ideas to provide more advanced and funky features. So stay tuned, you will probably receive updates in the CLI itself ;)