/

Create an app with Electron and React

Create an app with Electron and React

How to create an Electron Node.js desktop application using create-react-app

2021 UPDATE: I highly recommend using electron-react-boilerplate instead of the approach described in this post

Table of Contents

When I first used Electron in 2015 it was not yet clear that it would be so pervasive in modern apps, and I was kind of shocked by the resulting app size.

But, Electron is clearly here to stay and it’s not mandatory that your app should feel slow and consume tons of memory, like VS Code demonstrates every day to me (on a not blazing fast machine).

So, here’s a quick start for a React app with create-react-app, ready to roll with ESlint integration.

Install Node.js if you haven’t already

On macOS:

1
brew install node

Move to your development folder

1
cd ~/dev

Create react app

1
2
npx create-react-app app
cd app

Add electron

1
2
npm install electron
npm install --save-dev electron-builder

Install foreman to allow executing the app from command line

1
npm install foreman -g

Install the create-react-app dependencies

1
npm install

Configure eslint

.eslintrc.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
 "env": {
 "browser": true,
 "commonjs": true,
 "es6": true,
 "jest": true
 },
 "parserOptions": {
 "ecmaFeatures": {
 "jsx": true
 },
 "sourceType": "module"
 },
 "rules": {
 "no-const-assign": "warn",
 "no-this-before-super": "warn",
 "no-undef": "warn",
 "no-continue": "off",
 "no-unreachable": "warn",
 "no-unused-vars": "warn",
 "constructor-super": "warn",
 "valid-typeof": "warn",
 "quotes": [
 2,
 "single"
 ],
 "semi": [
 "error",
 "never"
 ]
 },
 "parser": "babel-eslint",
 "extends": "airbnb",
 "plugins": [
 "react",
 "jsx-a11y",
 "import"
 ]
}

Now add ESlint and some of its helpers

1
npm install eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-import

This is what you should have right now:
Create React App with Electron

Now tweak the package.json file to add some electron helpers.
Right now its content is something like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
 "name": "gitometer",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "electron": "^1.7.5",
 "eslint": "^4.5.0",
 "eslint-config-airbnb": "^15.1.0",
 "eslint-plugin-import": "^2.7.0",
 "eslint-plugin-jsx-a11y": "^6.0.2",
 "eslint-plugin-react": "^7.3.0",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-scripts": "1.0.11"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject"
 },
 "devDependencies": {
 "electron-builder": "^19.24.1"
 }
}

(don’t mind versions, outdated as soon as I publish this)

Remove the scripts property and change it with

1
2
3
4
5
6
7
8
9
10
11
12
"scripts": {
 "start": "nf start -p 3000",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject",
 "electron": "electron .",
 "electron-start": "node src/start-react",
 "react-start": "BROWSER=none react-scripts start",
 "pack": "build --dir",
 "dist": "npm run build && build",
 "postinstall": "install-app-deps"
},

On Windows you might need to have a .env file with BROWSER=none in it as environment variables do not work like in Linux/macOS

As you can see, start was moved to react-start, but the rest is unchanged, and some electron utils were added.

Also add

1
2
"homepage": "./",
"main": "src/start.js",

and

1
2
3
4
5
6
7
8
9
"build": {
 "appId": "com.electron.electron-with-create-react-app",
 "win": {
 "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
 },
 "directories": {
 "buildResources": "public"
 }
}

The end result should be:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
 "name": "gitometer",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "electron": "^1.7.5",
 "eslint": "^4.5.0",
 "eslint-config-airbnb": "^15.1.0",
 "eslint-plugin-import": "^2.7.0",
 "eslint-plugin-jsx-a11y": "^6.0.2",
 "eslint-plugin-react": "^7.3.0",
 "react": "^15.6.1",
 "react-dom": "^15.6.1",
 "react-scripts": "1.0.11"
 },
 "devDependencies": {
 "electron-builder": "^19.24.1"
 },
 "homepage": "./",
 "main": "src/start.js",
 "scripts": {
 "start": "nf start -p 3000",
 "build": "react-scripts build",
 "test": "react-scripts test --env=jsdom",
 "eject": "react-scripts eject",
 "electron": "electron .",
 "electron-start": "node src/start-react",
 "react-start": "BROWSER=none react-scripts start",
 "pack": "build --dir",
 "dist": "npm run build && build",
 "postinstall": "install-app-deps"
 },
 "build": {
 "appId": "com.electron.electron-with-create-react-app",
 "win": {
 "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
 },
 "directories": {
 "buildResources": "public"
 }
 }
}

Now create a file named Procfile in the project root folder, with this content:

1
2
react: npm run react-start
electron: npm run electron-start

Enough with the setup!
Let’s now start writing some code.

src/start.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const { app, BrowserWindow } = require('electron')

const path = require('path')
const url = require('url')

let mainWindow

function createWindow() {
 mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: true
 }
 })

 mainWindow.loadURL(
 process.env.ELECTRON_START_URL ||
 url.format({
 pathname: path.join(__dirname, '/../public/index.html'),
 protocol: 'file:',
 slashes: true
 })
 )

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

src/start-react.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const net = require('net')
const childProcess = require('child_process')

const port = process.env.PORT ? process.env.PORT - 100 : 3000

process.env.ELECTRON_START_URL = `http://localhost:${port}`

const client = new net.Socket()

let startedElectron = false
const tryConnection = () => {
 client.connect({ port }, () => {
 client.end()
 if (!startedElectron) {
 console.log('starting electron')
 startedElectron = true
 const exec = childProcess.exec
 exec('npm run electron')
 }
 })
}

tryConnection()

client.on('error', () => {
 setTimeout(tryConnection, 1000)
})

Start up
That’s it!

Run

1
npm start

and you should see the React sample app coming up in a native app:
React Sample in Electron

Thanks to

This post was heavily inspired by https://gist.github.com/matthewjberger/6f42452cb1a2253667942d333ff53404

tags: [“Electron”, “React”, “Node.js”, “desktop application”, “create-react-app”, “ESlint”]