Electron React hot reload & multi launch script — the one minute setup

Coffee is my hot reload 😅 ~ photo by Blake Richard Verdoorn

This is an improvement of this article but the process is perfectly functional for a classic Electron app !

The purpose of this story is to make a basic improvement to our React Electron app.

🔀 What is Concurrently ?

Concurrently is a npm package which allows you to run multiple commands concurrently. Like npm run watch-js & npm run watch-less “but better”.

The repository is here and the package page here.

🔁 What is electron-reloader ?

Electron-reloader is a simple auto-reloading for Electron apps during development; when files used in the main process are changed, the app is restarted, and when files used in the browser window are changed, the page is reloaded.

The repository is here.

🚀 Let’s go for the setup !

From here, I consider you’ve already installed electron or electron and react. If not don’t hesitate to check the following article “React typescript & Electron — the one minute setup”.

💡i work with yarn but all the process is functional with npm too.

1° step — Install deps

yarn add -D electron-reloader
yarn add concurrently

Pretty easy, here we install :

• electron-reloader for the hot reload (reload the app if a changes are made in the code)
• concurrently for running both the launch script of Parcel and Electron

💡 I need to launch Parcel & Electron following this implementation in our article “React typescript & Electron — the one minute setup”.

2° step — Setup electron-reloader

Open your main electron file (generally is index.js or main.js) and add to the top of it :

try {
  require('electron-reloader')(module);
} catch {}

Normally you have something like :

const { app, BrowserWindow } = require('electron');
const path = require('path');
try {
  require('electron-reloader')(module);
} catch {}
/**
 * creates a new browser window with a preload script and loads index.html file into this window
 * @returns {void}
 */
function createWindow() {
  // .......

💡 The try/catch is needed so it doesn't throw “Cannot find module ‘electron-reloader’” in production.

And voila ! This is a pretty simple setup, the reloader takes a set of options, if you want to learn more about that look at the doc.

3° and final step — Setup concurrently

We continue with the hard thing and setup the concurrently package. For that you need to :

• add a scripts in your package.json
• and that’s all 😁

For example my script is :

"start": "parcel serve ./public/index.html --public-url ./"
// and
"electron": "electron ."

• the start command launch the compilation of react
• and the electron command launch the main.js electron file (so an electron window)

With concurrently we just need one command :

concurrently "command a" "command b"

So my command looks like now :

"start": "concurrently \"parcel serve ./public/index.html --public-url ./\" \"electron .\""

And well done folks ! You have one script for the two and a hot reload in your Electron app 👍

The concurrently strength is in these options; take the time to look the doc about that here.