Let's Build an Electron App with React.js - Part 1

If you enjoy this video, I highly recommend reading this post by kitze on medium:
This was the first really good article I found when I started exploring this topic, and it's where a number of tips in this video came from, including using the concurrently and wait-on packages, as well as the start script used to run the app.

I'm still pretty new to working with electron, feedback throughout this project is more than welcome!

Here is a quick recap of the steps in this video in case it's helpful:

npx create-react-app app-name
cd app-name
yarn add concurrently
yarn add wait-on
Run it!
Here is the start script from the video:

[zayneio]

If you enjoy this video, I highly recommend reading this post by kitze on medium:

This was the first really good article I found when I started exploring this topic, and it's where a number of tips in this video came from, including using the concurrently and wait-on packages, as well as the start script used to run the app.

[rohitjadhav]

i am getting an error on windows where BROWSER is not found
(EDIT)
Solved it using SET BROWSER=none&&yarn start

[fazzyakamello]

Look forward for more tuts bro! Can’t wait

[JavascriptForEverything]

Thanks, finally I can use react with electron

[alicapwn]

Doesn't work for me, I just get a blank screen when running with electron.

[vishnukarthikmadupuri]

Hi i am getting error main.js file not found how to resolve this?

[jorgedavalos]

can an already built react app convert to electron?

[ricardobermudeztellez]

i may read a file with fs.readfile de node in this proyect?

[Drake]

[0] 'BROWSER' is not recognized as an internal or external command,
[0] operable program or batch file.
[0] BROWSER=none npm start exited with code 1

[sardorbekaminjonov]

if you browser=none is not working, just create .env file and put BROWSER=none inside save restart

[furank_i]

How would I be able to use the production version of the react app and release it? Would I have to do yarn build and do a whole new electron app with the contents of the build folder?

[realtechnerd]

Thank you so much for this tutorial. This really helped me, thumbs up from me!

[anasselidrissi]

i know it might stupid question or out of context i saw you use both npm and yarn is there any specific reason for that ?
(all i know is that yarn is better than npm since its faster)

[christophermarshall]

Amazing tutorial but don't you think its a bit counter intuative to have a Web app (react) that could easily be hosted online but then its being restricting by having to download and install before users can use it? I may have missed something surrounding benefits of having the react wrapper.

[cristiannerylozada]

Develop an app with react but only some images are rendered. Any suggestion? It only works with online images but I don't understand why it doesn't work offline?

[SajalSirohiBIS]

Hi zayne, thank you for the video. I ma facing a little problem, whenever I execute the program by "npm start", apart from the electron window, same tab is also opening in my chrome browser showing the port localhost:3000. Can you suggest how can I stop the this from happening or what i am doing wrong. Thanks!

[petermakaumutuku]

I got this error:-
0] 'BROWSER' is not recognized as an internal or external command,
[0] operable program or batch file.
[0] BROWSER=none npm start exited with code 1

[gwsounddsg]

Help! I'm getting a white screen and can't figure out why. I'm getting two errors "Unable to load preload script" and "Cannot find module preload.js". Both of those errors I think has to do with main.js line 11 where it preloads the file preload.js. But in your project, and mine, there is no preload.js file. Not sure if that's causing it but I can't figure it out after following the tutorial to a T.

[anirudhjoshi]

the react app is not loading in my electron window its just white screen, please help!!

[moneyDev]

doesn't work BROWSER error, if use fix form comments then react opens in a browser and no electron window opens. bad tutor