Skip to content

Instantly share code, notes, and snippets.

Last active December 28, 2022 14:02
Star You must be signed in to star a gist
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.



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

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


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": ""
    "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
Copy link

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?

Copy link

mieco commented Jan 9, 2020

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

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 or

Copy link

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:

If anyone runs into this issue, I have a repo here that builds correctly using yarn dist

Thanks @simonsankar and @mieco for your help!

Copy link

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

Copy link

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.

Copy link

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