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.