Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to make an electron app using Create-React-App and Electron with Electron-Builder.

Note: This post is a summary of information paraphrased from an excellent blog post by Christian Sepulveda.

Prerequisites

Instructions

Create the app and download the necessary dependencies.

create-react-app my-app
cd my-app
yarn add electron --dev
yarn add electron-builder --dev
yarn global add foreman # for process management
yarn install

Add electron-quick-start's main.js to src folder as electron-starter.js.

Make the mainWindow.loadUrl call look like this instead:

// load the index.html of the app.
const startUrl = process.env.ELECTRON_START_URL || url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
});
mainWindow.loadURL(startUrl);

Create a file called electron-wait-react.js in src directory:

const net = require('net');
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: port}, () => {
        client.end();
        if(!startedElectron) {
            console.log('starting electron');
            startedElectron = true;
            const exec = require('child_process').exec;
            exec('npm run electron');
        }
    }
);

tryConnection();

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

Ensure that the name, description, author, and version fields of your package.json are filled out. Then make the package.json look like this at the bottom:

"homepage": "./",
  "main": "src/electron-starter.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/electron-wait-react",
    "react-start": "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"
    }
}

Note: The electron-builder quick-start instructions can be found here.

Create a file called Procfile in the root folder of the app and put the following code in it:

react: npm run react-start
electron: npm run electron-start

Run using:

yarn start
@HadyZ
Copy link

HadyZ commented Feb 22, 2019

Hi, I moved step by step and I faced these errors can you help?

$ npm start > airport-miami@0.1.0 start C:\Users\Dev\desktop\itxi\React\airport-miami > nf start -p 3000 2:23:22 PM react.1 | > airport-miami@0.1.0 react-start C:\Users\Dev\desktop\ itxi\React\airport-miami 2:23:22 PM react.1 | > BROWSER=none react-scripts start 2:23:22 PM react.1 | 'BROWSER' is not recognized as an internal or external command, 2:23:22 PM react.1 | operable program or batch file. 2:23:22 PM react.1 | npm 2:23:22 PM react.1 | ERR! code 2:23:22 PM react.1 | ELIFECYCLE 2:23:22 PM react.1 | npm 2:23:22 PM react.1 | ERR! errno 2:23:22 PM react.1 | 1 2:23:22 PM react.1 | npm 2:23:22 PM react.1 | ERR! airport-miami@0.1.0 react-start: BROWSER=none re act-scripts start 2:23:22 PM react.1 | npm 2:23:22 PM react.1 | ERR! Exit status 1 2:23:22 PM react.1 | npm ERR! 2:23:22 PM react.1 | npm ERR! Failed at the airport-miami@0.1.0 react-start script. 2:23:22 PM react.1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2:23:22 PM electron.1 | > airport-miami@0.1.0 electron-start C:\Users\Dev\deskt op\itxi\React\airport-miami 2:23:22 PM electron.1 | > node src/start-react 2:23:22 PM react.1 | npm ERR! A complete log of this run can be found in: 2:23:22 PM react.1 | npm ERR! 2:23:22 PM react.1 | C:\Users\Dev\AppData\Roaming\npm-cache_logs\2019- 02-22T12_23_22_605Z-debug.log [DONE] Killing all processes with signal SIGINT 2:23:22 PM react.1 Exited with exit code null 2:23:42 PM electron.1 | (node:1068) MaxListenersExceededWarning: Possible Event Emitter memory leak detected. 11 connect listeners added. Use emitter.setMaxList eners() to increase limit

@vince1393
Copy link

vince1393 commented Jan 6, 2020

@simonsankar
I tried what you recommended here and cant seem to figure it out. I've checked out a few of your repos and it looks like your dist command is the same.

the error i keep getting on yarn dist is 'build' is not recognized as an internal or external command, operable program or batch file.

Did you have any luck solving this?

@mieco
Copy link

mieco commented Jan 9, 2020

@vince1393
I got the same error, and I use electron-builder instead of build, it works for me.

@simonsankar
Copy link

simonsankar commented Jan 13, 2020

@vince1393 Oh man I havent done any electron projects in a while, and I dont think i ran into that issue. Have you tried cloning either https://github.com/simonsankar/cra-electron-starter or https://github.com/skwid138/electron-create-react-app?

@vince1393
Copy link

vince1393 commented Jan 14, 2020

So i managed to get it to build by using electron builder. I switched my scripts to:

"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/electron-wait-react", "react-start": "react-scripts start", "pack": "electron-builder --dir", "dist": "react-scripts build && electron-builder --win -p always", "postinstall": "install-app-deps" }

I followed the file structure of this: https://github.com/getstream/winds

If anyone runs into this issue, I have a repo here that builds correctly using yarn dist
https://github.com/vince1393/movie_manager

Thanks @simonsankar and @mieco for your help!

@simonsankar
Copy link

simonsankar commented Jan 16, 2020

Ahh thats great to hear!
I just cloned my starter and on my end it still works
Ill try out your edit next

@truonghongtrieu
Copy link

truonghongtrieu commented Apr 3, 2020

Also need to add BROWSER="NONE" to your .env file so your browser dosen't open.
This allows electron to start when you run start.

Thanks @kingsukhoi
This is exactly what I am looking for:
Adding BROWSER="NONE" prevents the browser from opening so that only the Electron app is running.

@alilou99
Copy link

alilou99 commented Oct 16, 2021

i created on it works , but electron api did not work.
I'm tired of trying so much. Please help me to clone the project (react + electron with work electron api ).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment