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:

And this might be useful if you’d like to debug your 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.