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

Today's video is a practical guide for building desktop apps with React and Electron that can run on Windows, Mac, and Linux. We will be building a simple file explorer that allows users to view file sizes, navigate inside directories and apply a simple file search operation. Todo this, we will walk through the process of setting up an electron app with React and look at how electron interactions with the native operating system.
✨ SOCIAL ✨
Discord - / discord
Twitter - / jsbroks
⚡ RESOURCES ⚡
Source Code - github.com/codingwithjustin/r...
⭐ TIMESTAMPS ⭐
0:00 - Intro
0:46 - Project Setup
4:01 - File Explorer
8:00 - Building Electron App
9:30 - Conclusion

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

[@saiverx]

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

[@danielelgressy]

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

[@bmejia220]

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

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

[@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 :)

[@DorjeDark]

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

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

[@sangeethnandakumar2534]

High quality extremely helpful tutorial.

[@brianmoses4359]

Great video, very clear explanation!

[@ThijmenCodes]

Great video, terrific animations 🙂 Thanks!

[@ashutosh7944]

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

[@sauloalmeidadev]

great video, man. thanks a lot

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

[@huybui4122]

Thank for the best tutorial :3

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

[@nithinreddy1242]

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

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

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

[@barkallahomar7316]

we need more videos about electron !

[@AshuSingh-mw2wt]

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

[@mustafaagha8834]

Amazing 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

[@idcemail123]

Yes, please make a video with electron-react boilerplate plz!

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

[@JamesQQuick]

Very interesting

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

[@mayankbinjola8035]

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

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

[@sengfoong2779]

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

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

[@greennwolf1596]

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

[@SuboptimalEng]

🔥

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

[@Valentin_Tango]

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

[@anonymousghost5384]

What ya gonna do for production run server on client?

[@JenuelDev]

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

[@user-fz4fw3yi3t]

Thank you.

[@-0-__-0-]

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

[@merictunc]

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

[@fitensonwaynchiff8760]

Is this setup works on actual production?

[@user-uo4es2kc7p]

Thank you

[@heytheremogwai]

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

[@Coleski123]

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

[@himorrivelsjrp]

hello dear, how can I build typescript mode?

[@ctenonam4]

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

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

[@taferscript]

Tks!

[@parvan7716]

does npm works here instead of yarn

[@anthonyfink633]

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

[@YamShargil]

Same problem

[@federicomiraglia315]

Same here

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

[@juancamacho479]

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

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

[@magikarp2063]

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

[@vankurua5730]

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

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

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

[@fishplus510]

fireship lookin ah video 💀💀💀💀💀

[@MerrStudio]

ikr

[@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 🤷‍♂

[@iHouqLF]

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

[@habibali9302]

The app is a blank screen

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

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

[@talhazaryab]

Premium content

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

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

[@zeno_aratus]

no sqlite3

[@yosefefriemrosner5587]

please help

[@ramazanaktas748]

People seem confused. This is not a tutorial.

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

[@jehnzcode]

Electron is slow

[@CreaturesOrigins]

Outdated.

[@alfredenglund]

very bad and outdated tutorial! dont waste your time

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