Desktop application with Electron & React (CRA)
Tags: javascript, react, node
Published: 2020-05-24 07:56:25

When it comes to building cross-platform Desktop applications with Javascript, [Electron](https://electronjs.org) 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:

![Electron Window](https://dev-to-uploads.s3.amazonaws.com/i/ur5xm06e5km89ktelgb5.jpg)

Congratulations!! Your first desktop application is up and running!!

Now all you need to package your application is to run `npm run package`.

<h2>Final notes</h2>
That's all folks. That is all you need to set up a basic desktop application using React and Electron. Check out the GitHub [repo](https://github.com/iampikai/electron-react) for this tutorial.

Watch this space for more!!