Build setup of Stack

Getting started with Electron is not a big thing, because there are good examples and also for beginners JS code is very readable. It’s more interesting how to put together Electron and React, because it has two different modes: development and production.

React

Development mode in React means, that source files of your program are being watched for changes and whenever a file is changed, webpack is triggered to compile or transpile it. But that’s not all — your browser has a socket connection open to the webpack-dev-server, so hot-reloading is also enabled and happens immediately after any code changes. Per default, a React website is accessed via http://localhost:3000.

Production mode is different. With npm run build you create an optimized production build, taking a couple of minutes. No hot-reloading, but the website is simply accessible via files in the /build directory.

React meets Electron

Electron pretty much has the same two modes for development and production. Either run it via the electron executable or build it using the electron-builder package. So our first goal is to somehow just get an empty React application running in Electron — in development mode, we want hot-reloading and in production mode it should use the optimized version.

Setup idea — step by step

1. Starting with an empty folder, first comes React, because the npm package create-react-app complains about non-empty folders. Just create a new React application.
   Keep in mind that with npm start, we run development mode and npm run build would create the /build directory.
2. Add Electron dependencies.
   The electron-is-dev package helps you to find out which mode is active.
3. Add an Electron entrypoint file in /public folder.
   Running in development mode, all windows should open our React website via http://localhost:3000, else simply open index.html from build folder.
4. Create two scripts: one for running everything in development mode and one for making a build of everything.

Put everything together we have our first commit.

package.json

Probably the most interesting file is the package.json, so let’s have a look at it.

“main” part of the package.json

“main” should point to your entrypoint file.

“scripts” part of the package.json

• “electron-dev” should start React and Electron in development mode
• “electron-pack” triggers “preelectron-pack” which builds optimized React version, then builds Electron application.

“build” part of the package.json

“build” describes what goes into Electron build. In our case, we need everything from React /build folder and /node_modules dependencies.

For development we can now simply run npm run electron-dev and if we change React sources, it’s getting hot-reloaded. The drawback is, that when we change electron.js we have to stop an rerun npm run electron-dev manually. Let’s see if we can get rid of this.