Electron and React App – the basics

Essentials for getting a desktop app up and running using Electron and React.

JUST THE SETUP

For the purpose of this tutorial we’ll call the new app “newapp”

Start by creating a React app

npx create-react-app newapp

Now you need to cd into the newly created directory and install Electron and the other stuff. Both wait-on and concurrently are important for running the app.

cd newapp

npm install electron electron-builder wait-on concurrently --only=dev

npm install electron-is-dev

Add a main.js to the public folder and put this in there

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

function createWindow(){

  // declare the main window
  win = new BrowserWindow({
    width: 1200,
    height: 700
  })

  // load the React local host on main window
  win.loadURL("http://localhost:3000/")

}

app.on('ready', createWindow)

Now you want to open the package.json file and add two key things.

First you want to point it to the main.js file you just created

"main": "public/main.js"

Then you want to add a script to run both React and Electron

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

Basically, your package.json file should look like this.

{
  "name": "newapp",
  "version": "0.1.0",
  "private": true,
  "main": "public/main.js",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "concurrently": "^5.1.0",
    "electron": "^8.2.3",
    "electron-builder": "^22.5.1",
    "electron-dev": "^1.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "wait-on": "^4.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

With lines 5 and 24 being the ones you just added.

Now you can run the app to make sure it works

npm run electron-start

and you should get a window like this one.

If so, it means everything works.