Build a realtime Desktop app using Electron and React

We are all victims of a revolution where building apps and websites becomes easier every single day and Electron js is definitely a part of this revolution.

Electron is a framework for creating desktop applications with all the emerging technologies including JavaScript, HTML and CSS. Basically, Electron framework takes care of the hard parts so that you can focus on the core of the application and revolutionize its design.

In this tutorial, I will be going over what you need and how to write a functional Electron app with React. Specifically, we will be:

• Setting up local environment for Electron and React
• Writing code to render your app
• Handle both react dev server and electron dev server

Here are the steps :

1. Setup create-react-app

facebook/create-react-app

Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…

github.com

2. Install electronJS

npm install --save-dev electron

3. Add electron-starter.js file in root directory

const electron = require(‘electron’);
const app = electron.app;

const BrowserWindow = electron.BrowserWindow;const path = require(‘path’);
const url = require(‘url’);// Keep a global reference of the window object, if you don’t, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;function createWindow() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600}); // and load the index.html of the app.
 const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, ‘/../build/index.html’),
    protocol: ‘file:’,
    slashes: true
 });
 mainWindow.loadURL(startUrl); // Open the DevTools.
 // mainWindow.webContents.openDevTools(); // Emitted when the window is closed.
 mainWindow.on(‘closed’, function () {
    mainWindow = null
 })
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on(‘ready’, createWindow);// Quit when all windows are closed.
app.on(‘window-all-closed’, function () {
 // On OS X it is common for applications and their menu bar
 // to stay active until the user quits explicitly with Cmd + Q
 if (process.platform !== ‘darwin’) {
   app.quit()
 }
});app.on(‘activate’, function () {
 // On OS X it’s common to re-create a window in the app when the
 // dock icon is clicked and there are no other windows open.
 if (mainWindow === null) {
   createWindow()
 }
});

4. Add a main entry to package.json for electron-starter.js.

{
   “name”: “electro-reactro”,
   “version”: “0.1.0”,
   “private”: true,
   “author”: “Nitesh Soni”,
   “description”: “starter kit for react based desktop application”,
   “devDependencies”: {
      “electron”: “¹.4.14”,
      “react-scripts”: “².1.1”,
   },
   “dependencies”: {
      “react”: “¹⁵.6.2”,
      react-dom”: “¹⁵.4.2”
   },
   “main”: “./src/electron-starter.js”,
   “scripts”: {
      “start”: “react-scripts start”,
      “build”: “react-scripts build”,
      “test”: “react-scripts test — env=jsdom”,
      “eject”: “react-scripts eject”,
      “electron”: “electron .”
   },
   “browserslist”: [
      “>0.2%”,
      “not dead”,
      “not ie <= 11”,
      “not op_mini all”
   ]
}

5. Add relative path to package.json for electron app

 “homepage”: “./”,

6. Add foreman

forman is process management tool which launch/manages both react dev server and electron dev server.

npm install — save-dev foreman

and add the following Procfile

react: npm run start
electron : npm run electron

7. Add electron-wait-react.js file to root directory

We will keep a simple node script to electron-wait-react.jsthat waits react dev server to start, then starts electron server.

const net = require(‘net’);
const port = process.env.PORT ? (process.env.PORT — 100) : 3000;process.env.ELECTRON_START_URL = `http://localhost:${port}`;const client = new net.Socket();let startedElectron = false;
const tryConnection = () => client.connect({port: port}, () => {
   client.end();
   if(!startedElectron) {
      startedElectron = true;
      const exec = require(‘child_process’).exec;
      exec(‘npm run electron’);
   }
 }
);tryConnection();client.on(‘error’, (error) => {
  setTimeout(tryConnection, 1000);
});

8. In final step, will add following command to package.json

“dev”: “nf start -p 3000”,

and now we can execute:

npm run dev

---

If you’re lazy to do all of the above steps, just browse the example repo where you have everything ready.