Creating Electron app from React code base

The documentation was awesome. And most of the things did work. However, only one change that I had to do was below

First of all, took the react web application to a different folder and did a yarn to install and verify the app is still running.

Yarn start => to make sure the react web app is running

Now add electron using the step below

yarn add electron electron-builder --dev

Add some dev tools we'll need.

yarn add wait-on concurrently --dev
yarn add electron-is-dev

Now we need the electron.js file for Browser window, which looks like the below


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')}`);
  if (isDev) {
    // Open the DevTools.
    //BrowserWindow.addDevToolsExtension('');
    mainWindow.webContents.openDevTools();
  }
  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();
  }
});


Add the below to the scrips section

"dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

Add the below main tag

"main": "public/electron.js",

Just make sure the electron.js is present inside the public folder

Now, running yarn dev should bring up the application in the electron window/


To solve this we need to use the electron-renderer as the Webpack target... but we don't want to eject CRA to do it. So we use Rescripts. Let me show you.
This is required to add some modules such as fs etc.


yarn add @rescripts/cli @rescripts/rescript-env --dev

Now the react scripts to be converted from


"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",


To


"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",


Now below two files to be geared


.rescriptsrc.js
And have the content below

module.exports = [require.resolve('./.webpack.config.js')]

And another file .webpack.config.js
With the below contents

// define child rescript
module.exports = config => {
  config.target = 'electron-renderer';
  return config;
}

Now run once again and make sure the package is running in dev mode.

This process is breaking the app!! .... now when attempt to start, it just does not load properly. It just give the white screen.


"electron-pack": "build -mw"

To

"electron-pack": "electron-builder -mw"

OK .. looking into further details, below is the error that was seen in the web console.

Uncaught ReferenceError: require is not defined
    at Object.crypto (external "crypto":1)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/react-scripts/node_modules/sockjs-client/lib/utils/random.js (random.js:4)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/react-scripts/node_modules/sockjs-client/lib/utils/event.js (event.js:3)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object../node_modules/react-scripts/node_modules/sockjs-client/lib/transport/websocket.js (websocket.js:3)

Looking through the details of this error, found that the electron.js file is having the require statements.
Browsing around, got the solution like this below


 mainWindow = new BrowserWindow({
    width: 900, height: 680, webPreferences: {
      nodeIntegration: true
    }
  });
That's all, it started working.


References:
https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer
https://github.com/electron/electron/issues/17241