Developing Apps with Electron and Spectron (Part 1): Installation and Setup

Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. This means that you can take what you know about web application development and use it to create applications that can easily be bundled for native use on Windows, MacOS and Linux machines.

Spectron is a framework for easily writing integration tests for your Electron app.

This series of posts will explain how to set up Electron and Spectron so that you can begin writing desktop applications using a test-driven approach.

Setup

Before starting, you will need to have Node installed on your machine.

Then, from a terminal run the following commands to initialize a new Node project:

# Create a folder
mkdir myProject

# cd into the folder
cd myProject

# Initialise a new Node project
npm init -y

Installation

Now install Electron and Spectron into your project:

# Install Electron
npm install electron --save-dev --save-exact

# Install Spectron
npm install --save-dev spectron

Folder Structure

Create a test folder, a main.js file and an index.html file in your project folder.

mkdir test
touch main.js
touch index.html

The tests will live in the test folder, main.js will be the main entry point into your application and index.html will be the first template for displaying content.

The folder structure should now look like this:

myProject/
├── node_modules/
├── test/
├── package.json
├── main.js
└── index.html

What Next?

Now that we have a skeleton project we can begin writing tests.

Part 2 takes you through the process of writing a simple failing test to check that the app is running and that its main window has opened correctly.