Image: Miroslav Kostic (freeimages.com)

Desktop apps using Electron, Preact and Material Design

Recently, I found myself wanting to build an ElectronJS based application. It’s the kind of mental itch we developers routinely feel needs scratching. In the 90s I spent what seemed like a lifetime building desktop apps using C/C++ on the Windows platform. So admittedly, the thought of revisiting desktop development seemed a bit nostalgic.

During the past few months, we’ve discussed various use cases for desktop apps at Flywheel Sports and team members had already ventured to create sample applications during our past hackathons.

After watching several YouTube videos and Electron Fundamentals by Jake Trent on Plurasight, I felt like I was ready to dive in. However, I ended up taking a few hours to investigate the tools I wanted to use in my first Electron app. At Flywheel Sports we’re big fans of ReactJS — and my AngularJS is more than a bit rusty — so unless I was going to take a detour to learn another library I would end up using ReactJS.

In two past projects, I used PreactJS (the “Fast 3kB alternative to React with the same modern API”) and wanted to try using that with my electron app. One of the projects where I used Preact is on the dashboard of our Flywheel Hydra Router microservice. However, this time, I wanted to move away from using Bootstrap and try Google’s Material Design.

One of the YouTube videos I watched was Damodar Lohani’s Create react app and electron (Not for beginners), an 8-minute tutorial showing how to use Electron and React to create desktop applications. The approach I had in mind was slightly different but I found much of Damodar’s insights helpful.

Update: looks like there some prior work here as well: here and here

Damodar’s main.js and electron-wait-react.js files, shown later in this post, were directly usable. The only changes I made were minor formatting changes and replaced the use of yarn with npm.

Rather than type the code below you can browse the github repo for a look at the completed demo.

Setting up a Preact environment

We begin by installing the Preact CLI tool and then using it to create our boilerplate application. In the example below I specified the material design template because I appreciate pretty things. This post won’t get into using material design inspired components but you can find out more at the preact-material-components documentation site. Make sure to click on the hamburger menu on the upper left to view a treasure throve of goodness.

$ npm install -g preact-cli
$ preact create material epmd

Once that completes we can cd into the app folder and start the app.

$ cd epmd && npm run start

At this point we can view the sample app via the http://localhost:8080 Next, we’ll transform the web app into an Electron desktop app.

Adding Electron

We begin this transformation by installing electron and electron-builder. Electron is the runtime and electron-builder is used to simplify creating native builds for Mac, Windows and Linux.

$ npm install electron electron-builder --save-dev

Take note of the electron version. Mine shows electron@2.0.2 at the time of this writing.

We’ll need to make a few changes to the project’s package.json. First rename the dev key under scripts to pdev. The reason for this is that we’ll need to introduce another dev key as we build the dev workflow.

Now add a new dev key in the scripts section. I’ll explain this entry a bit later.

"dev": "nf start",

When we used the Preact-CLI to create our boilerplate project the package.json it created contains this entry:

"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",

We’ll need to modify the above line to change dev to pdev:

"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s pdev",

Continuing in the scripts section add these two entries.

"electron": "electron .",
"ebuild": "npm run build && node_modules/.bin/build"

Next we’ll add the following entries, which are required by electron builder, near the top of the package.json:

"description": "Electron Preact Material Design",
"homepage": "./",
"main": "electron/main.js",
"build": {
  "productName": "EPMD Demo App",
  "appId": "com.cjus.epmd",
  "electronVersion": "2.0.2",
  "files": [
    "build/**/*",
    "electron/*"
]},

The project now requires an electron folder with a main.js file as indicated in the package json above as the value of the main key.

$ mkdir electron

Then add the main.js file. This is the file which uses electron to create a native desktop window.

We’re almost done! During the development process, we’ll want to see the changes to our electron app without having to do a full native build each time. To accomplish this goal we’ll install node foreman. Earlier we added a dev entry into the scripts section of our package json.

"dev": "nf start",

The nf command stands for “Node Foreman”. Let’s install that now.

$ npm install -g foreman

Foreman requires a Procfile which lets it know which scripts to run at dev time. In our case that will be a react script and an electron one. Both scripts need to run.

react: npm start
electron: node electron-wait-react.js

The electron-wait-react.js script is used to delay the start of our electron application until our react / preact dev server is ready. We’ll place that file at the root of our project.

We can start our new electron project using:

$ npm run dev

Note: do not use npm start to start your project, instead use npm run dev in order to use node foreman as described above.

So that gives us an Electron desktop app which uses Preact and Material Design.

If you’d like to try this out — checkout the github repo and the following posts:

A build process for an Electron/Preact app

And this might be useful if you’d like to debug your Electron app using Visual Studio Code.

Debugging an Electron app using Visual Studio Code

—

Thanks for reading! If you like what you read, hold the clap button below so that others may find this. You can also follow me on Twitter.