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

This comment has been minimized.

Copy link

commented Jul 4, 2017

hi, thx for this work.

I'm looking for to use mysql module under "creat-react-app & electron". Connection can't be established beacause "Net" module isnt provided. Do you have a solution?
thank you

@amalantony

This comment has been minimized.

Copy link

commented Aug 22, 2017

You need to stress that adding the "homepage": "./" in package.json is mandatory. This ensures that create-react-app builds the static assets for electron as opposed to a web application.

@taewo

This comment has been minimized.

Copy link

commented Sep 15, 2017

Hi! thanks to your post.

It is just working in local.
If i want packaging create-react-app(use npm electron-packager), How can i do this?
And then use npm electron-installer-dmg .

@notdrone

This comment has been minimized.

Copy link

commented Oct 9, 2017

@taewo you'll need to do npm run build before this to generate the static files

@resurge

This comment has been minimized.

Copy link

commented Oct 26, 2017

To add HMR (Hot Module Reloading) just replace the contents of your src/index.js file with this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

registerServiceWorker();

function render(Component) {
  ReactDOM.render(
    <Component />,
    document.getElementById('root')
  );
}

render(App);

if (module.hot) {
  module.hot.accept('./App', () => {
    const NextApp = require('./App').default;
    render(NextApp);
  })
}

To add SASS support just follow these guidelines:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc
and then replace the start-js script with nf start -p 3000

@mhebrard

This comment has been minimized.

Copy link

commented Jan 31, 2018

How do I build my electron app ?
npm start works fine, both web and desktop
npm run build works fine, build folder ready for web version
but I cannot build the desktop version... which command, which script
plz.

@Pau1fitz

This comment has been minimized.

Copy link

commented Jan 31, 2018

@mhebrad did you try yarn run dist?

@Nahasean94

This comment has been minimized.

Copy link

commented Feb 13, 2018

@pau 1 fitz.. What will that do? Mine says "command dist not found"
@mhebrad...how did you solve this issue? Even after adding "homepage" :". /" to my package.json to mine, referencing it in index.html of my electron app does not work... I get a blank page with one only the title of the page I added in the html page.. Plus any other custom html that I added. Anything wrote in react does not work... Anyone please help..

@kingsukhoi

This comment has been minimized.

Copy link

commented Mar 13, 2018

May I suggest adding npm-run-all to devDependencies and put this in scripts

"start": "run-p \"reactStart\" \"electronStart\"",
    "electronStart":"electron .",
    "reactStart": "react-scripts start",

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.

@simonsankar

This comment has been minimized.

Copy link

commented Apr 6, 2018

@Nahasean94 @mhebrard I think i got a solution.
So i tried just doing yarn dist: didnt work due to the build config specified here not being good enough now.
So i removed it completely and ran yarn dist again: (CRA is now supported by electron-builder so it makes its own proper config), but new problem.
The config looks for an electron.js file in the public folder to run the app.. so basically the electron-starter.js just without the devTools open. So i copied it into the public and renamed it to electron.js and ran yarn dist yet again. This time it worked, it builds the reactscript then the electron part, but be sure to wait for the process to be complete building everything. :D
So to tidy things up, just change the main entry point in your package.json to 'public/electron.js' and use that instead of the electron-starter.js that was in src folder just to avoid using 2 of the same files basically.
Hope this helps! :D

@ofarukcaki

This comment has been minimized.

Copy link

commented May 22, 2018

After building app, when I launched the only thing I see is a white screen with "React App" title. What I'm doing wrong? Any idea

@Ferigit

This comment has been minimized.

Copy link

commented May 26, 2018

Hi, I am also getting the same problem as @ofarukcaki(blank page with no error in devtools). Could you solve it?

@victorbueno

This comment has been minimized.

Copy link

commented Jun 8, 2018

Add "extends": null to build block. See Issue 2030

@Howl0s

This comment has been minimized.

Copy link

commented Jun 22, 2018

@kingsukhoi I get Uncaught Exception: ReferenceError: url is not defined at App.createWindow in a modal on top of a white screen electron app

@skwid138

This comment has been minimized.

Copy link

commented Oct 13, 2018

Using this gist and what @simonsankar said I created a repo with these changes as to use as a template. Hope it's helpful to someone.

@nayunhwan

This comment has been minimized.

Copy link

commented Jan 11, 2019

I created Electron-Create-React-App-TypeScript Repository following this document. Thx a lot! 👍

@zcmgyu

This comment has been minimized.

Copy link

commented Feb 5, 2019

I’ve injected electron-prebuilt-compile into project to use ES6 syntax (cannot use spread operator). So I added babel loader as well but Create-react-app will give a warning related to babel config.
If you don’t mind could you please give me some idea to resolve it. (bow)

@HadyZ

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.