Create Cross-Platform Desktop Node Apps with Electron

Call me old-fashioned, but I have always preferred using a desktop app suited to each purpose. I feel that if all I'm going to use is a browser for everything I do, then why have a 'proper' computer? On a practical level, I travel frequently and am generally 'between' internet connectivity or using unstable internet connections, and 'real' applications are typically far better at allowing effective offline working.

I appreciate how complex developing and maintaining native desktop applications is and can understand why companies push users towards web or cross-platform versions. There has been a plethora of options for accomplishing this over the decades. Flash, Air, Java and Sliverlight are all options that promised this capability with varying degrees of success.

The main problem with these options is that they generally involved learning another language (which defeats the point) or forced users to install plugins plagued with stability, performance and security problems.

We all know the power of JavaScript and web technologies and have seen a wave of options for developing and packaging cross-platform desktop apps using this knowledge.

Electron, by GitHub is one option, but as I already happily use several apps built with it, it seemed a good option to investigate. After two years of development, including one name change (from Atom shell), Electron has recently reached version 1.0, always a milestone in any project's existence. What better time to see what it's capable of.

Installing Electron

Electron has a quick start project and pre-built releases available, but let's dive straight in the deep end and install Electron via npm:

npm install electron-prebuilt -g

Or for Mac Homebrew lovers, via Cask:

brew install Caskroom/cask/electron

Whichever option you follow, you should end up with an executable electron binary.

This application is only used for bundling and running your final project, not for creating one. For this you can use any standard text editor or IDE.

An Electron project requires three files:

• index.html: The web page rendered by default.
• main.js: Starts the app and creates a browser window to render HTML.
• package.json: Lists the application dependencies, meta data and files needed.

You Need a Hero

In this example I am going to create a simple application that connects to the Marvel API, pulls in 25 super heroes and displays their name and thumbnail image. It will display a system notification when the process is complete and have an OS-like application icon. An end-user will not be aware of how the application was created or be able to view the source code.

You can find the final project on GitHub.

Open package.json and add the following:

{
  "name": "hero-browser",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "dotenv": "^2.0.0",
    "md5": "^2.1.0"
  }
}

This is a standard package.json file and follows the same format and options as node.js. Here setting the application name, version, main JavaScript file and dependencies.

Continue reading %Create Cross-Platform Desktop Node Apps with Electron%

by Chris Ward via SitePoint