Back to Posts Download PDF

Electron, Getting Started

by Josh Kaplan, Jun 12, 2016

What is Electron?

Electron is a framework for running Node.js applications on the desktop. This allows you to quickly write simple cross-platform GUI applications. This post details my experience getting started with electron.

It’s built by GitHub and used to build their Atom text editor. Electron is also used to create a lot of other popular apps such as Slack and Visual Studio Code.

Getting Started

Recommended Prerequisites:

If you’re familiar with JavaScript and some basic web development, you can jump right in. First install Electron using npm: npm install -g electron-prebuilt. This allows you to run your app. You can package the prebuilt Electron framework with your app when you deploy it so your users arent dependant on it.

I started by taking a look at the guides section of the Electron Docs, which is somewhat annoyingly alphabetical rather than lesson-based. I began with their Quick Start, which starts you off with some basic boilerplate code, stuctured as follows:

your-app/
├── package.json
├── main.js
└── index.html

If you’re familiar with Node.js, the package.json file can be created by running npm init in the root directory of your project. Or you can create it manually. The index.html file can contain whatever you want for now, it’s what will be displayed. The interesting part here is the main.js file. I’ll cut it down a bit for my example here.

const electron = require('electron'); 
const {app} = electron;               // Module to control application life.
const {BrowserWindow} = electron;     // Module to create native browser window. 

var win = null;                       // Global window reference

/**
 * Initialize our application by opening a browser window 
 * to our index.html file.
 */
function init() {
    win = new BrowserWindow({width: 800, height: 600});

    win.loadURL(`file://${__dirname}/index.html`);

    // When window is closed, quit the program.
    win.on('closed', () => {
        app.quit()
    });
}

// This method will be called when Electron is initialized.
app.on('ready', init);

To run your app, just type electron . from the root directory of your project. You should see something like this:

Hello World

That’s it! You can package your Electron apps as standalone executables pretty easily. Just follow the Electron Application Distribution guide.

Another Application

Rather than spending a lot of time on a project to get started, I decided I’d quickly throw together an application to do something I’ve always wanted: desktop applications for Google Inbox and Google calendar.

It’s not really fair to call this an application, really its just a wrapper for existing Google apps. But it let’s me run these a little more nicely without having them as browser tabs. Here is the sample code for my Google Tools app:

/**
 * main.js
 *
 * Josh Kaplan <[email protected]>
 * June 12, 2016
 * 
 * An Electron wrapper for Google Inbox and Calendar.
 */

const electron          = require('electron');
const {app}             = electron; 
const {BrowserWindow}   = electron; 

var inbox;
var calendar;

/**
 * Initilize all windows
 */
function init() 
{
    createInboxWindow();
    createCalendarWindow()
}

/**
 * Creates a window for inbox
 */
function createInboxWindow() 
{
    inbox = new BrowserWindow({
        width: 1000, 
        height: 600, 
        x: 50,
        y: 50,
        title: 'Inbox'
    });

    inbox.loadURL(`http://inbox.google.com`);

    inbox.on('closed', function() {
        inbox = null;
    });
}

/**
 * Creates a window for calendar
 */
function createCalendarWindow() 
{
    calendar = new BrowserWindow({
        width: 1000, 
        height: 600, 
        x: 100,
        y: 100,
        title: 'Calendar'
    });

    calendar.loadURL(`http://calendar.google.com`);

    calendar.on('closed', function() {
        calendar = null;
    });
}

/*--------------------( App Events )--------------------*/

// Start our app
app.on('ready', init);  

// Quit when all windows are closed.
app.on('window-all-closed', function() {
    app.quit();         
});

// When app is clicked
app.on('activate', function() {
    if (inbox === null) {
        createInboxWindow();
    }
    if (calendar === null) {
        createCalendarWindow();
    }
});

There you go! Electron is as simple as that. It’s a powerful tool to write cross platform apps in very much the same style as writing a website. There’s a lot more that can be done and I plan to explore Electron some more. I’ll cover Electron is more detail in a later post.