Nikita SemenistyiTech Lead

Implementing CLI for Electron apps

21 September 2017


Electron is gaining more and more popularity and practically became the go-to platform for building cross-platform desktop applications. It appears to be one of the most convenient options from both the developer and business sides of view - it helps drastically cut development costs by being truly cross-platform and is fun to deal with utilizing the latest web technologies.

I personally have been leading the development of a complex Electron application for over year and a half now (my teammate covered our lessons of utilizing Electron in a recent article. We have been able to implement lots of functionality and a big part of it was not just adding more stuff to be rendered but also providing ways for users to interact with the app in various handy ways. One of them was through the console.

Why would you need CLI for a desktop app?

Well, this might be a tool for your power users. CLI can help automate some tasks so that one would not have to open the app and manually perform them. For example, convert file formats, import data or synchronize state.

Having a console interface gives the possibility to integrate your app as one step of a continuous integration process. This can greatly improve the impact your application has on your users’ productivity.

Furthermore, CLI is a convenient way to perform batch operations - i.e. perform the same action to an array of files. To open up even more possibilities for your users, you could also tweak your app to support Unix-style pipes, which would allow them to perform transformations on data in a language they already know.

CLI in Node.js

JavaScript has achieved an unparalleled position of being a truly universal language. It is executed on all kinds of devices and in all kinds of environments. Console applications are no exception. Node and npm have made it easy for us to develop applications with a console interface and install them into the system.

The main pillar of CLI is reading user input. There are plenty of modules helping you do this job and one of the most prominent is yargs. It allows you to declare commands and options your application accepts with a concise configuration. Here’s an example:

I’ve written down more tips for creating CLI apps with Node.js in this other article. Feel free to take a look if you are interested.

Electron implementation

So, essentially, Electron consists of 2 types of processes - main and renderer - and both of them are based on Node.js. Hence, we should be able to call our app through the command-line interface just as we would do with a regular Node.js app.

The basic check to learn if your application was called via CLI is as simple as checking the number of arguments passed when calling the application:

You may want to add some more conditions due to the way your app works, but it will not get much more sophisticated anyway.

Then we should execute the condition on app ready to learn if it is indeed called from terminal:

In case we want the app to function in CLI mode, we should just set the BrowserWindow show option to false and window dimensions to 0.

After adding these code snippets to your app, you will be able to run the app just like this:

However, to run the app correctly on Windows, you should tweak the command to look like this:

This will keep your application running within the same session until it explicitly stops the corresponding process.

Nice touches to add

Help

Have you ever found yourself staring at the cursor in the command line trying to remember what command you need to enter? It is only fair then to help your users recall the command without needing to leave the terminal window.

Take a look at how npm does it while having dozens of commands:

You can easily implement a similar help screen with the help of the yargs module we looked at above in the article.

Spinner

Your app most probably has some long-running operations. Normally, you would remedy it with a spinner. So why don’t you utilize one in console as well? For example, take a look at this module.

Logging

In the absence of a graphical UI, text is the only medium with which you can give feedback to your user. Therefore, you should add elaborate logging. You might also want to introduce log levels as an option in order to have the ability to choose just the right amount of output you want to see from the app:

1: don't log anything

2: log errors only

3: log errors and info

4: log errors and info and show spinner

Debugging

Finally, you should help yourself by allowing debug options to be passed. Being built on top of Node and Chromium, Electron provides a rich pool of developer tools available at your disposal to easily debug the app. The most prominent of them are Visual Studio Code for backend debugging (or any other app implementing Inspector or Debugging Protocol for Node) and Selenium for frontend acceptance testing.

To plug into your app, they need to pass some CLI options to it. However, if you create your own handler for the command-line interface, their options will not be passed through. One way to achieve this is to simply search for these options in your arguments and, if found, execute the app in the normal mode (not CLI):

Conclusion

You’ve seen how easy it actually is to implement a CLI mode within an Electron app. In my opinion, it is one more testimony to the power of the JavaScript ecosystem.

  • Дмитрий Демиденко

    Hi Nikita! Could you share working project on github? I read your article but cant run app. Could you help me?