Electron with React - Building a desktop applications with React and Electron

[@alvaroj.tobarmayorquin7125]

Finally a good tutorial of electron, you have no idea how long i was looking for an excellent video like yours!! So clear, you had help me a lot!!! Thank you so much. Greetings from Colombia!

[@danielelgressy]

what a great video ! please upload more Electron videos, we need it !

[@yosefefriemrosner5587]

got it to work. you did a great job teaching. its like my 10nth video/article today trying to get the dist part and then you explain and suddenly boom i know it thanks

[@CodingWithJustin]

Great job!

[@yosefefriemrosner5587]

@@CodingWithJustin thanks

[@aleksasevic4020]

I like Electron because it lets me bring my favourite tech to build desktop apps. Great content btw, would love to see more content about Electron!

[@felixl.7687]

Thank you! Finally a video that covers what's actually promised in the title and not making a 3 hours video, starting from absolute zero and missing out on the actual topic.

[@saiverx]

Thanks for making this video! It really summarized how I would go forward in migrating my existing react app to electron perfectly

[@DorjeDark]

Awesome tutorial, tyvm, I hope you didn't stop creating excellent videos like this.

[@jeremyashcraft2053]

While convenient, the remote module is deprecated and recommended not to be used for communicating between the main and renderer processes. the remote module is _10,000 times slower than ipcMain/ipcRenderer_ and is also less secure.

[@KjKase]

Every tutorial I find uses remote... I'll have to keep looking for one that does it the recommended way, or maybe I'll just have to start reading through documentation myself I guess.

[@MerrStudio]

Guys, if the electron app is not showing for you then it's probably because of "wait-on tcp:3000". For some reason wait-on is not finished once something on tcp:3000 happens, in our case our react app is built and shown. You can remove "wait-on tcp:3000 && " part from electron:start and you will start showing the window, but it's gonna be blank for the time of react build. I don't know how to circumvent that.

[@mdyusufkhan101]

Do you mean that the electron:start script should be blank at the time of react build?

[@MerrStudio]

@@mdyusufkhan101 "electron:start": "electron ."

[@henrygrechcini]

I found a better approach was to use `wait-for-localhost 3000`. Does require a module install but seems to fix the issue.

[@hainguyenhoang7800]

@@henrygrechcini you saved my day!

[@bmejia220]

Justin, you have one of the most useful dev channels out there. Thanks for sharing the knowledge, brother! 👍

[@allhailalona]

thank you for this tutorial. oh man... it's like jumping to freezing water every time i study these huge subjects alone.

[@hamtaroyt]

And they taught you a very outdated and discouraged method of making React apps. Do not use Create React App because it's no longer maintained and abandoned.

[@juleswinnfield1437]

Loved this video! Great for quickfire learning.. I had no idea what half the stuff in this video was until I stumbled across this :)

[@AshuSingh-mw2wt]

It's better to use preload script for communication between main and renderer process and remote module is deprecated.

[@ashutosh7944]

TNice tutorials is the best tutorial. Simply explained to a newbie, great job man.

[@sangeethnandakumar2534]

High quality extremely helpful tutorial.

[@crashbandicoot0707]

Good tutorial, thanks, I have a question, I have a app with react hook form and axios, when a build the app, the app show white screen, but when I use npm run electron-serve that run the app in the dev env the app run very well

[@bryanronnie6765]

Same doubt

[@sengfoong2779]

Hi I have the same prob as yours, are you able to fix it?

[@gonza8699]

I'm having the same problem...

[@deeprajbaidya3508]

@@bryanronnie6765when u do npm run build , the project compiles into html css and js files in build folder and to serve it u need a web server, for that u can serve using nginx and it will work fine when u serve it with electron

[@LrNas]

I was having problem to use -c.extraMetadata I found a way to solve, in the package.json, add to the build properties the following: "extraMetadata":{ "main":"build/index.js" } Another important thing: You dont need to put node_modules folder on files, as it is not needed to build.

[@clarkjr.canlog4647]

I had problems in doing the executable file, I just installed yarn and follow the scripts on your package.json and it worked perfectly

[@mayankbinjola8035]

I am getting this error Command "electron:serve" not found. please tell how to resolve this.

[@estranhokonsta]

Enabling nodeIntegration is only a bad practice if you are getting external content that you cannot control. And even if the content is "theoretically" secure, it is the responsibility of the dev to make sure that enabling nodeIntegration is not a risk issue.

[@brianmoses4359]

Great video, very clear explanation!

[@sengfoong2779]

Anyone know why after I build the app, all the contents (UI) are disappeared?

[@nithinreddy1242]

Thanks for an awesome tutorial. Can I know why you are including node_modules into the electron build ?

[@-0-__-0-]

I'm having issues with mine. No matter what I do, react would always open on a new browser window.

[@thalindabandara1552]

can you do one with electron-boiler-plate that you showed in the beginning I am stuck linking js files. after building it's not working

[@sergsergesrgergseg]

same

[@sprioleau]

The style, cadence and code-pasting in this video is awfully similar to that of @fireship. Shout out to using Jeff’s (Delaney) video recommendations. Well executed!

[@XanderMcL]

The moment I saw the text appearing like that haha. Its a much better style too, most coding tutorials are long and drawn out, I subscribed just because of that.

[@harshtripathi9219]

Can we establish auto Updater functionality using this setup of React+Electron?

[@merictunc]

Electron is best way to develop web apps. I've started w/ WPF however electron and react is game changer.

[@sauloalmeidadev]

great video, man. thanks a lot

[@anthonyfink633]

Hello Justin window.require("path") not an function. how possible to fix that ?

[@YamShargil]

Same problem

[@federicomiraglia315]

Same here

[@barkallahomar7316]

we need more videos about electron !

[@juleswinnfield1437]

4:40 - why is it best practice not to enable this? Is that including when you're building desktop apps with Electron?

[@mantelor]

its best practice for security reasons. You an use IPC to communicate between your react part and your main.js file. This would happen by setting up an api in the preload.js file

[@shubhamthanekar9311]

While building electron app I'm getting this GTK input files error. ⨯ Warning: Missing input files: ⨯ Warning: Missing input files: ⨯ Warning: Missing input files: C:\GTK\bin\libpangowin32-1.0-0.dll ⨯ Warning: Missing input files: C:\GTK\bin\libpangowin32-1.0-0.dll C:\GTK\bin\libglib-2.0-0.dll C:\GTK\bin\libgmodule-2.0-0.dll C:\GTK\bin\libexpat-1.dll C:\GTK\bin\libexpat-1.dll C:\GTK\bin\libcairo-2.dll C:\GTK\bin\libgthread-2.0-0.dll C:\GTK\bin\libpango-1.0-0.dll C:\GTK\bin\libpangocairo-1.0-0.dll C:\GTK\bin\libfontconfig-1.dll C:\GTK\bin\libgobject-2.0-0.dll C:\GTK\bin\libpangoft2-1.0-0.dll C:\GTK\bin\libfreetype-6.dll C:\GTK\bin\libpng14-14.dll C:\GTK\bin\zlib1.dll C:\GTK\bin\libintl-8.dll

[@MrBill-m2r]

yarn add electron concurrently wait-on cross-env Does not work for me after the initial install why

[@greennwolf1596]

Sorry, I have a question, how can I do the build if the react application has a react router?

[@juancamacho479]

anybody got this to work? seems like there a lot missing that's not mentioned in the video.

[@fitensonwaynchiff8760]

Is this setup works on actual production?

[@ThijmenCodes]

Great video, terrific animations 🙂 Thanks!

[@huybui4122]

Thank for the best tutorial :3

[@nathansantos4197]

after all following code, yarn runs perfect but the electron window dont open at all

[@RooseveltCat]

Same problem. Did you ever figure it out?

[@parvan7716]

does npm works here instead of yarn

[@yishakabrham5002]

thank you very much!

[@heytheremogwai]

uh..so what happens with the index.html that is created via CRA?

[@Valentin_Tango]

Any git with the final code? Video links to the React-Electron starting point.

[@ctenonam4]

I'm having 'window is not defined' error what could it be?

[@JamesQQuick]

Very interesting

[@anonymousghost5384]

What ya gonna do for production run server on client?

[@xCoKeZx]

Very unsecure approach of creating an electron-react app. There is a reason nodeIntegration is set fo false by default. Accessing the fs and path modules should be done using IPC.

[@JenuelDevTutors]

any tutorial, electron local storage or dabase, like sqlite?

[@victorjozwicki8179]

White screen when I add the fs ... Seems like most of the tutorial is outdated :o or deprecated, I've seen some errors dating from 2019 that says it's deprecated

[@himorrivelsjrp]

hello dear, how can I build typescript mode?

[@asifgokakgokak799]

I need help on creating .exe file as I am unable to get .exe after running npm run build command. Even with yarn i dont get this file. Please provide the exact steps. Thanks for your help.

[@mustafaagha8834]

Amazing tutorial

[@gabrielreversopereira3093]

I followed the video exactly, but I have a critical problem and I don't know why. When closing the application my Windows simply crashed with the error: VIDEO_SCHEDULER_INTERNAL_ERROR. The drivers for my Nvidia card are up to date and I don't know what the problem is.

[@hamtaroyt]

This is out of date, do not use "create react app"

[@SuboptimalEng]

🔥

[@นายเมธีสุตภักดิ์]

Thank you.

[@ՎարդանԹառայան]

Thank you

[@Imaginativeone_DF]

Will this work now?

[@hamtaroyt]

No, CRA is heavily discouraged since it is unmaintained and no updates will come out. Create React App (CRA) is no longer recommended to be used.

[@vankurua5730]

I think you shoud "cd react-electron" before"yarn add concurrently wait-on cross-env"

[@habibali9302]

The app is a blank screen

[@iHouqLF]

yarn is just stuck on wait-on tcp:3000 for me

[@magikarp2063]

does anyone get TypeError: fs.existsSync is not a function?

[@karlang2637]

After doing the last step of running npm run "electron:build", I am not getting the dist folder and the windows exe files for the app. Is anyone having the same issue? Please help. I am using election v18, node v16 and react v18. Thank you.

[@karlang2637]

Ok never mind. I realized I forgot to npm install electron-builder!!!

[@aconime]

You left so much stuff un-noted. I had to install an additional 7 or 8 other libraries (which you did not mention) to get this to work. So many errors to fix and debug too. If I was a beginner and didn't know how to fix and install everything needed, I would literally get nowhere with this video. There's a lot more to be mentioned about this video, however, it doesn't really matter as this is the first video I've seen on your channel and maybe it is not made to be followed step-by-step like a tutorial.

[@eyosiaskassahun81]

i agree with your idea. it would help a lot if you could kindly list those libraries you had to install.

[@zauche81]

@Aconime: What libaries did you have to install aswell ?

[@mohammadsubhan1318]

It seems you can only comment and not help the community ... at least this guy helped the community in some way 🤷‍♂

[@fishplus510]

fireship lookin ah video 💀💀💀💀💀

[@MerrStudio]

ikr

[@tuckertcs]

Is this like an overview of a series? There's no explanation for node, or how to install electron without yarn. If I didn't already know how node, npm, and npx worked, I would be lost. And Linux Mint doesn't use yarn, so I'm literally stuck on the second command here.

[@hamtaroyt]

Do not use Create React App!!

[@taferscript]

Tks!

[@zeno_aratus]

no sqlite3

[@ajadavis2000]

think this video was time dependent, and no longer works. other general feedback: skips parts of development process on video (results may vary) uses @electron/remote with huge warning sign on it when viewing the npm page without discussion best practice to not enable nodeIntegration without mentioning alternative nice add format size function

[@yosefefriemrosner5587]

please help

[@assimilater-quicktips]

Too much "we'll insert this code block"...I didn't really get a good grasp of the structure of a react-electron app from this video. It probably doesn't help that I am not familiar with react, only electron and only a bit.

[@kvendev]

well, doesnt open the window, maybe already outdated

[@kvendev]

aint no window popping up

[@MerrStudio]

same, have you managed to find a fix? all react electron guides have the same issue

[@kvendev]

@@MerrStudio I guess react is already outdated/lacks conpatibility, I've stopped using it cuz it's too complicated for the few features I needed. I switched back to webdev and only use JS, jQuery and templating with EJS. Sorry, cant help you more bout that subject :/

[@kvendev]

@@MerrStudio I guess it didnt get any useful fix since my commentary 5months ago

[@MerrStudio]

@@kvendev I actually have found a reason and you can see it in my newest comment under this very video. The reason is not React nor Electron, but wait-on - for some reason this process is not working as intended, i.e. passing into next command after retrieving an answer from passed address, which in our case is tcp:3000. You can circumvent this by manually invoking electron or just deleting the wait-on altogether, the electron app will be blank until react project builds but it's not a big deal besides that.

[@ramazanaktas748]

People seem confused. This is not a tutorial.

[@talhazaryab]

Premium content

[@alfredenglund]

very bad and outdated tutorial! dont waste your time

[@jehnzcode]

Electron is slow

[@CreaturesOrigins]

Outdated.

[@Mal-nf2sp]

Please do not copy other people's styles.

[@alihusham1560]

Guys when I try ` const {app} = window.require('@electron/remote') ` the app just crash and show blank white page with no error message?

[@YamShargil]

Same problem. window.require is not a function

[@gonza8699]

hi, I'm having a problem here, when I run yarn electron:serve the app works just fine, but when I build it with electron:build it only shows a white screen.. Does anybody knows how to fix this? thx