Skip to content

Instantly share code, notes, and snippets.

@matthewjberger
Last active March 11, 2024 10:21
Show Gist options
  • Save matthewjberger/6f42452cb1a2253667942d333ff53404 to your computer and use it in GitHub Desktop.
Save matthewjberger/6f42452cb1a2253667942d333ff53404 to your computer and use it in GitHub Desktop.
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"
    }
}

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
@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

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

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

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.

@aliadjiba
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