Desktop application with Electron & React (CRA)

#javascript #react #node

When it comes to building cross-platform Desktop applications with Javascript, Electron is one of the most sought after choices of developers.

In this post, we will learn to create a production-ready configuration of React with Electron.

To begin with we need to create our project with create-react-app (CRA).

npx create-react-app electron-react

The next thing we will do is to create a new folder named electron inside of electron-react. This is where we will put all of our electron code.
We will also install electron & electron-builder (to package our application) as dev dependencies.

npm i -D electron electron-builder

We need to make a few changes in the package.json file.
First, we need to add the main property to our package.json file, this will be the entry point to our electron application.

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

Next will add a few scripts to start and package our electron application.

"start": "export BROWSER=none && react-scripts start",
"start-win": "set BROWSER=none && react-scripts start",
"start-electron": "export ELECTRON_START_URL=http://localhost:3000 && electron .",
"start-electron-win": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
"build": "react-scripts build",
"build-electron": "mkdir build/src && cp -r electron/. build/electron",
"build-electron-win": "mkdir build\\src && Xcopy /E /I /Y electron build\\electron",
"package": "npm run build && npm run build-electron && electron-builder build -c.extraMetadata.main=build/electron/main.js --publish never",
"package-win": "npm run build && npm run build-electron-win && electron-builder build -c.extraMetadata.main=build/electron/main.js --publish never",

Note: The scripts that end with -win are for Windows platform, if you are on Windows you need to run these scripts.

Finally, we will add the build property which will be used by electron-builder to package the application.

"build": {
    "appId": "com.example.electron-react",
    "productName": "electron-react",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
}

Now that all of our configurations are done we can finally proceed to write some code.
Create a main.js file in the electron/ folder and add the following code.

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({ width: 600, height: 600, show: false });
  mainWindow.loadURL(
    !app.isPackaged
      ? process.env.ELECTRON_START_URL
      : url.format({
          pathname: path.join(__dirname, '../index.html'),
          protocol: 'file:',
          slashes: true,
        })
  );

  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  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();
  }
});

Note: app.isPackaged is a boolean flag which is true if the application is packaged and false otherwise, this behavior can be used to determine whether the app is running in production or development environment.

Go ahead and run npm start and npm run start-electron.
You should see something like this: