DEV Community

Electron Apps Made Easy with Create React App and Electron Forge

Mandi Wise on July 28, 2020

If you ever need to wrap a React app in Electron, you'll surely find there's no shortage of tutorials that explain how to set up your project in yo...

Read full post

Alfonso • Sep 14 '20 • Edited

Thank you! Excellent guide!
A note for those using react-router 6, you'll need to replace BrowserRouter with HashRouter or you'll get a white screen when building for production.

waliddamou • Feb 12 '21

omg you saved my life bro thank you <3

tuncatunc • Sep 3 '21

Thanks for the tip Alfonso

Kenny De Smedt • Apr 6 '21 • Edited

Well written article helped me with the setup however I still had to do:

npm i -D @electron-forge/maker-squirrel
npm i -D @electron-forge/maker-zip
npm i -D @electron-forge/maker-deb
npm i -D @electron-forge/maker-rpm

Then I ran into other problems, like the file folder was to long and such. I had to fix it by adding

// ....
  "config": {
    "forge": {
      "packagerConfig": {
        "asar": true
      },
// ....

Another thing with this setup although it works the electron app is 300mb .... this is a lot there are probably ways on making it smaller, this could be part of this article or a new one maybe ?

Ririshi • Aug 4 '20 • Edited

Hey Mandi,

I just happened to be working on moving our existing React dashboard from electron-builder to electron-forge, when I stumbled upon your perfectly timed article. I'm running into some issues with setting up the electron forge building process.

We've used create-react-app to set up the application initially, and are now using a folder structure where the src folder contains all our sources. There's also a public folder (from CRA), and we have some extra folders for unit tests and a bunch of files to configure things like GitLab CI, Babel, GraphQL, etc. CRA builds the application for us to the build folder, but when using electron forge to package / make the app, it will copy literally everything in the root folder (including tests, node modules, and our project config files) into the packaged app.

I've been looking for hours on Google to find out how I could specify a folder (e.g. the build folder) for Forge to use, but it seems like that's not possible at all. For the time being, I've just put every non-important folder to the ignore key of the packager config, but that's not a very solid solution.

Hoping you know a bit more about this than I do, and that you might be able to help me out!

Edit: I also just found out that CRA copies the public files into the build folder, but Electron Forge will still use the original files it copied over in the public folder, so you essentially have those files packaged twice in the final executable.

Mandi Wise • Aug 6 '20

Hi Ririshi! This is a bit outside the scope of what I've done with Electron Forge, but if I discover a solution as I continue to experiment with it, then I'll post it here.

Gabriel Alves Cunha • Feb 21 '22

Have u found nothing? :(

Max Liefkes • Sep 23 '21

Any luck resolving this?

SeeingBlue • Nov 18 '20

Install electron-forge globally and run electron-forge init electron-forge-react --template=react

Kenny De Smedt • Apr 6 '21

electron-forge v6 does no longer have a react template

Raí B. Toffoletto • Sep 17 '21

Please do not install npm packages globally... safety first. Npx is there to help 😉

Brittany Navin • Jan 21 '22

I'm using the latest version (v6.0.0) of the wait-on npm package and my electron app didn't ever seem to pop up properly after my react app started up.

To investigate, I started up my react app on port 3000 and then cd'ed into my node_modules/wait-on/bin directory and ran ./wait-on tcp:3000 -v. I was getting the following error.

making TCP connection to 3000 ...
  error connecting to TCP host:localhost port:3000 Error: connect ECONNREFUSED ::1:3000

My react app was 100% running on localhost:3000, as I could access it in my browser.

I stopped that running wait-on process and re-ran wait-on, passing my "localhost" IP into the wait-on command like so: ./wait-on tcp:127.0.0.1:3000 -v

Finally then got TCP connection successful to host:127.0.0.1 port:3000

So i modified the electron script in my package.json as follows:

    "electron": "wait-on tcp:127.0.0.1:3000 && electron .",

Matt Maher • Sep 24 '22

Great debugging here. Saved me.

James McDonald • Aug 1 '22

Thanks Brittany,

Was getting the exact same issue trying to start electron.

Appreciate the post :)

kltliyanage • Oct 1 '21

you can't use Browser= none without using cross env

It gets an error: npm ERR! app@0.1.0 dev: `concurrently -k "BROWSER=none npm start" "npm:electron"`

npm install --save cross-env
"start": "cross-env BROWSER=none react-scripts start",

DerekDavie • Oct 11 '21 • Edited

Very helpful thank you!

I ran into one issue I wanted to document in case anyone else ran into it too. When building I was getting a blank screen and it took me awhile to figure out why. In electron.js I changed:
win.loadURL(
isDev
? "localhost:3000"
: file://${path.join(__dirname, "../build/index.html")}
);

win.loadURL(
isDev
? "localhost:3000"
: file://${path.join(__dirname, "/../build/index.html")}
);

and it was able to launch my app correctly!

emuswailit • Apr 15

Apparently this happens when you skip the "homepage":"./" bit in the tutorial. Honestly after days and days of exploring vite-electron, electron react boilerplate, etc this tutorial was the most helpful to me. Not forgetting the sister tutorial on electron sqlite. Thank you @mandiwise ...in 2024!

macduff111 • Oct 31 '20

Hi
thanks for this it's really useful. I can get the dev version running no problem, but when I try and package with npm run make I get the following error:

Preparing to Package Application for arch: x64
An unhandled rejection has occurred inside Forge:
{ Error: EEXIST: file already exists, mkdir '/var/folders/jh/7xh_52cx65566d0fhgf01z6h0000gn/T/electron-packager/darwin-x64-template'
  errno: -17,
  code: 'EEXIST',
  syscall: 'mkdir',
  path: '/var/folders/jh/7xh_52cx65566d0fhgf01z6h0000gn/T/electron-packager/darwin-x64-template' }

Electron Forge was terminated. Location:
{}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cra-electron-forge-demo@0.1.0 make: `react-scripts build && electron-forge make`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the cra-electron-forge-demo@0.1.0 make script.

I tried Googling, but couldn't find any similar problem. Any ideas?
Thanks

macduff111 • Nov 22 '20

I updated npm and all packages and it now runs OK

Carlos E. Feria Vila • Dec 7 '20

Nice blog. I have one question though: hot reloading seems to work for the ReactJS application but not for Electron; I mean, once any change is done in the electron.js file then the changes do not take effect until stop and run again the "dev" command. Any suggestion on how to add Hot reload also to the Electron code?

Marius Ionescu • Dec 15 '20

This is excellent! Many thanks!

One comment, on windows cross-env needs to be added for BROWSER=none to work correctly.

Erik Yuzwa • Apr 19 '21

likewise! I went with "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\""

Kimita Kibana Wanjohi • May 2 '21

or you can simply add it to your projects .env file. it works the same

Olivier Allouch • Jan 22 '21

I'm also on Windows and I use a .env file.

Kurotsuba • Feb 21 '22

Thank you! This article helps me a lot!

While importing electron-forge with

npx @electron-forge/cli import

I got an error:

could not determine executable to run

I'not sure if this is related to npm version, my version is 8.3.1

finally I solve this with the command below

npm  i -D @electron-forge/cli
npx electron-forge import

This solution comes from electronforge.io/import-existing-p...

Xam-Mlr • Aug 29 '22

Hi Mandi,
Thanks to your tutorial my app was working fine but since i've updated macOS and Node it's not...
Nothing happen anymore when electron is supposed to start.
Do you know where it could come from ?