How to build a React based Electron app

Electron and React both do not need any introduction in present days. When Electron provide us an easy and fast way to develop native Windows or Mac-OS application, React library makes web development more structure and modular by it’s component based approach. Combination of Electron and React will be an awesome way to develop desktop application.

There are few boilerplate available for electron+react combination, one of the most popular one is —

electron-react-boilerplate/electron-react-boilerplate

For a beginner this boilerplate may feel bit complex (I felt the same when i started), that’s why in this tutorial I want to show you simplest way to pair electron with react.

I am assuming you have already installed Node.js and also create-react-app library using npm or yarn. Now lets build our application.

Create your react app using below command —

npx create-react-app <your_app_name> --typescript

Note: Please use typescript option when using create-react-app to create your application. Recent version of electron builder has typescript dependency.

Once your application successfully created, open the project in any editor, I prefer Visual Studio Code.

So this is the basic structure of our new project with minimum installed libraries. Let’s install few other libraries which we require to build electron app.

From command prompt navigate inside your project folder and then execute below command —

yarn add cross-env electron-is-dev
                              or
npm install --save cross-env electron-is-dev

once complete then run this —

yarn add --dev concurrently electron electron-builder wait-on
                             or
npm install concurrently electron electron-builder wait-on

after adding all required library

Now create a file “electron.js” inside Public folder of your project directory, and paste code below inside that —

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({ width: 900, height: 680 });
mainWindow.loadURL(
isDev
? "http://localhost:3000"
: `file://${path.join(__dirname, "../build/index.html")}`
);
mainWindow.on("closed", () => (mainWindow = null));
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});

We are almost done, we just need to do bit of change in our package.json file.

Add below information in your package.json file —

"description": "<your project description>",
"author": "<author of app>",
"build": {
"appId": "<com.your_app>"
},
"main": "public/electron.js",
"homepage": "./",

and update scripts element inside your package.json like below —

"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"react-eject": "react-scripts eject",
"electron-build": "electron-builder",
"release": "yarn react-build && electron-builder --publish=always",
"build": "yarn react-build && yarn electron-build",
"start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""
},

That’s it, we are now ready to generate our react based electron app. Now from command prompt execute command —

yarn start
or
npm run start

yahoo! our React-Electron app is running…

For distribution purpose use command —

yarn build
or
npm run build

Once yarn build command successful, you can see a new folder dist has been created inside your project folder. Navigate inside that folder and you can find installer file of your application.

Now you can install your app using that installer or can distribute it.

If you like to know more in details about React-Electron app creation to it’s distribution then refer to this tutorial —

Takeaways on Building a React Based App with Electron - The Stream Blog

happy coding …