Configuring a basic Electron dev environment

Electron Background

Electron is one of several frameworks that allow developers to build native desktop apps using web technologies. Electron in particular has gained significant traction: companies like Github (creators and ongoing developers of Electron), Microsoft, and Slack build products using Electron.

Getting started with Electron is straightforward. The documentation is thorough, the Quick Start guide is excellent, and the Electron team even produced a sample app to demonstrate the extensive functionality of the framework. This guide is intended to address the next step: getting a useful build environment created and configured to make app development easier.

At the end of this guide, you’ll have a basic development environment created that will reload when you make changes as you’re developing. Note: this guide assumes basic familiarity with JavaScript, Node, and NPM. We also won’t be exploring integration of front-end web development frameworks like React or Angular - there are plenty of other guides to help integrate those into your project.

Installing Electron

There are a few ways to install Electron. Installing the prebuilt version distributed by Github is probably the easiest. Install it globally using npm:

    npm install electron-prebuilt -g

Creating a new project

Create a new directory to store the project. Run npm init to create a package.json file in the directory.

Next, create a folder called app to hold your files. Under the dev folder, create subdirectories for your JavaScript and styling. You can optionally create one more folders under app, like assets to store images, fonts, or other application assets, and css to hold your processed CSS files.

Once you’re done creating those folders, your directory will look something like this:

    ├── app
    │   ├── assets
    │   ├── js
    │   ├── css
    │   └── views
    ├── gulpfile.js
    ├── index.html
    ├── main.js
    └── package.json

Note: node_modules will also be present here, but can be ignored for purposes of this guide. It’s also common to separate development directories and packaged app directories. Separating development directories from app directories allows processing of SASS/LESS, transformation of your JavaScript (minification, transpiling, etc.), and transformations for other files before they are consumed by the app. These transformations can all be done with Gulp, but are outside the scope of this guide.

Creating a basic Electron app

Now that the folder structure is configured, let’s get a basic Electron app running. Hop into package.json and make sure the main field is pointed at main.js.

Now open, main.js - this will be the entry point for your Electron app. This file doesn’t need to contain much to get started. You can basically copy the contents from the main.js file in the Electron Quickstart guide.

Add some simple HTML to index.html -

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Basic Electron</title>
  </head>
  <body>
    <h1>Hello, Electron!</h3>
    <h3>This is a basic Electron demo.</h3>
    <button id='example-button'>Click to show an alert</button>
  </body>
<script type="text/javascript" src="./dev/js/button_press.js"></script>
</html>

We are loading a JavaScript file in ./dev/js/ when loading this file. This is an example of how we can run JavaScript on the Renderer Process (i.e., in the browser window), go ahead and created that script -

let button = document.getElementById('example-button');

button.addEventListener('click', ()=>{
  alert('Example button pressed!');
});

Cool - now we can run Electron by simply calling the Electron runtime in the current directory:

electron .

You should see an Electron app open; pressing the alert button should show an alert.

Electron app running

Live reloading with Gulp

Gulp is a task runner and build system written in JavaScript. Gulp can be used in an Electron environment to process JavaScript (minification, transpilation, obfuscation, etc.), compile LESS and SASS, package up builds, and more.

For our simple example, we’re going to have Gulp minify our JavaScript and drop it in the “app” folder and then watch certain files for changes. Once certain files change, Gulp will either restart the app (if JavaScript files change) or simply reload the app if our HTML changes.

Installing Gulp

Install Gulp globally using NPM

npm install -g gulp

You can also install Gulp in just this repo (by omitting -g above), but installing it globally will drop it in usr/local/bin and enable easy access to Gulp CLI tools.

Creating your Gulp file

Create gulpfile.js in the root of the project.

We initially want Gulp to watch our /app/js directory, our index.html file, and our /app/css directory. When files in these change, the app should get reloaded.

Gulp’s API is quite simple. We’re going to be leaning on the .watch() method. Add the following to gulpfile.js:

    const gulp = require('gulp');

    // Create an electron-connect server to enable reloading
    const electron = require('electron-connect').server.create();

    gulp.task('start', ()=>{
      electron.start();
      //Watch js files and restart Electron if they change
      gulp.watch(['./app/js/*.js'], electron.restart);
      //watch css files, but only reload (no restart necessary)
      gulp.watch(['./app/css/*.css'], electron.reload);
      //watch html
      gulp.watch(['./index.html'], electron.reload);
    });

In this case, we’ve named Gulp task is named “start”. Running gulp start from your terminal will launch the app. Once the app is running, making changes to the app will cause it to reload immediately. Give it a try!

Code for this basic app and dev environment is on Github.