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

  Рет қаралды 186,825

Justin Brooks

Justin Brooks

Күн бұрын

Пікірлер: 123
@alvaroj.tobarmayorquin7125
@alvaroj.tobarmayorquin7125 2 жыл бұрын
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
@danielelgressy 3 жыл бұрын
what a great video ! please upload more Electron videos, we need it !
@aleksasevic4020
@aleksasevic4020 3 жыл бұрын
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!
@yosefefriemrosner5587
@yosefefriemrosner5587 3 жыл бұрын
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
@CodingWithJustin 3 жыл бұрын
Great job!
@yosefefriemrosner5587
@yosefefriemrosner5587 3 жыл бұрын
@@CodingWithJustin thanks
@bmejia220
@bmejia220 3 жыл бұрын
Justin, you have one of the most useful dev channels out there. Thanks for sharing the knowledge, brother! 👍
@felixl.7687
@felixl.7687 2 жыл бұрын
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
@saiverx 2 жыл бұрын
Thanks for making this video! It really summarized how I would go forward in migrating my existing react app to electron perfectly
@jeremyashcraft2053
@jeremyashcraft2053 3 жыл бұрын
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
@KjKase 2 жыл бұрын
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.
@ashutosh7944
@ashutosh7944 2 жыл бұрын
TNice tutorials is the best tutorial. Simply explained to a newbie, great job man.
@MerrStudio
@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
@mdyusufkhan101 Жыл бұрын
Do you mean that the electron:start script should be blank at the time of react build?
@MerrStudio
@MerrStudio Жыл бұрын
@@mdyusufkhan101 "electron:start": "electron ."
@henrygrechcini
@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
@hainguyenhoang7800 Жыл бұрын
@@henrygrechcini you saved my day!
@DorjeDark
@DorjeDark Жыл бұрын
Awesome tutorial, tyvm, I hope you didn't stop creating excellent videos like this.
@juleswinnfield1437
@juleswinnfield1437 2 жыл бұрын
Loved this video! Great for quickfire learning.. I had no idea what half the stuff in this video was until I stumbled across this :)
@sangeethnandakumar2534
@sangeethnandakumar2534 2 жыл бұрын
High quality extremely helpful tutorial.
@estranhokonsta
@estranhokonsta 3 жыл бұрын
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.
@allhailalona
@allhailalona 5 ай бұрын
thank you for this tutorial. oh man... it's like jumping to freezing water every time i study these huge subjects alone.
@hamtaroyt
@hamtaroyt 4 ай бұрын
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.
@AshuSingh-mw2wt
@AshuSingh-mw2wt 3 жыл бұрын
It's better to use preload script for communication between main and renderer process and remote module is deprecated.
@crashbandicoot0707
@crashbandicoot0707 3 жыл бұрын
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
@bryanronnie6765 3 жыл бұрын
Same doubt
@sengfoong2779
@sengfoong2779 3 жыл бұрын
Hi I have the same prob as yours, are you able to fix it?
@gonza8699
@gonza8699 3 жыл бұрын
I'm having the same problem...
@deeprajbaidya3508
@deeprajbaidya3508 2 жыл бұрын
@@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
@sengfoong2779
@sengfoong2779 3 жыл бұрын
Anyone know why after I build the app, all the contents (UI) are disappeared?
@brianmoses4359
@brianmoses4359 2 жыл бұрын
Great video, very clear explanation!
@mayankbinjola8035
@mayankbinjola8035 3 жыл бұрын
I am getting this error Command "electron:serve" not found. please tell how to resolve this.
@-0-__-0-
@-0-__-0- Жыл бұрын
I'm having issues with mine. No matter what I do, react would always open on a new browser window.
@clarkjr.canlog4647
@clarkjr.canlog4647 2 жыл бұрын
I had problems in doing the executable file, I just installed yarn and follow the scripts on your package.json and it worked perfectly
@LrNas
@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.
@thalindabandara1552
@thalindabandara1552 3 жыл бұрын
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
@sergsergesrgergseg 3 жыл бұрын
same
@JamesQQuick
@JamesQQuick 3 жыл бұрын
Very interesting
@nithinreddy1242
@nithinreddy1242 10 ай бұрын
Thanks for an awesome tutorial. Can I know why you are including node_modules into the electron build ?
@sprioleau
@sprioleau 3 жыл бұрын
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
@XanderMcL 3 жыл бұрын
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
@harshtripathi9219 4 ай бұрын
Can we establish auto Updater functionality using this setup of React+Electron?
@anthonyfink633
@anthonyfink633 2 жыл бұрын
Hello Justin window.require("path") not an function. how possible to fix that ?
@YamShargil
@YamShargil Жыл бұрын
Same problem
@federicomiraglia315
@federicomiraglia315 Жыл бұрын
Same here
@sauloalmeidadev
@sauloalmeidadev 3 жыл бұрын
great video, man. thanks a lot
@SuboptimalEng
@SuboptimalEng 3 жыл бұрын
🔥
@juleswinnfield1437
@juleswinnfield1437 2 жыл бұрын
4:40 - why is it best practice not to enable this? Is that including when you're building desktop apps with Electron?
@mantelor
@mantelor 2 жыл бұрын
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
@ThijmenCodes
@ThijmenCodes 2 жыл бұрын
Great video, terrific animations 🙂 Thanks!
@MrBill-m2r
@MrBill-m2r Жыл бұрын
yarn add electron concurrently wait-on cross-env Does not work for me after the initial install why
@huybui4122
@huybui4122 3 жыл бұрын
Thank for the best tutorial :3
@shubhamthanekar9311
@shubhamthanekar9311 2 ай бұрын
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
@juancamacho479
@juancamacho479 3 жыл бұрын
anybody got this to work? seems like there a lot missing that's not mentioned in the video.
@parvan7716
@parvan7716 Жыл бұрын
does npm works here instead of yarn
@aconime
@aconime 3 жыл бұрын
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
@eyosiaskassahun81 3 жыл бұрын
i agree with your idea. it would help a lot if you could kindly list those libraries you had to install.
@zauche81
@zauche81 2 жыл бұрын
@Aconime: What libaries did you have to install aswell ?
@mohammadsubhan1318
@mohammadsubhan1318 11 ай бұрын
It seems you can only comment and not help the community ... at least this guy helped the community in some way 🤷‍♂
@mustafaagha8834
@mustafaagha8834 3 жыл бұрын
Amazing tutorial
@merictunc
@merictunc 3 жыл бұрын
Electron is best way to develop web apps. I've started w/ WPF however electron and react is game changer.
@Valentin_Tango
@Valentin_Tango Жыл бұрын
Any git with the final code? Video links to the React-Electron starting point.
@barkallahomar7316
@barkallahomar7316 3 жыл бұрын
we need more videos about electron !
@greennwolf1596
@greennwolf1596 Жыл бұрын
Sorry, I have a question, how can I do the build if the react application has a react router?
@ctenonam4
@ctenonam4 2 жыл бұрын
I'm having 'window is not defined' error what could it be?
@nathansantos4197
@nathansantos4197 2 жыл бұрын
after all following code, yarn runs perfect but the electron window dont open at all
@RooseveltCat
@RooseveltCat Жыл бұрын
Same problem. Did you ever figure it out?
@heytheremogwai
@heytheremogwai 2 жыл бұрын
uh..so what happens with the index.html that is created via CRA?
@gabrielreversopereira3093
@gabrielreversopereira3093 4 ай бұрын
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
@hamtaroyt 4 ай бұрын
This is out of date, do not use "create react app"
@fitensonwaynchiff8760
@fitensonwaynchiff8760 Жыл бұрын
Is this setup works on actual production?
@xCoKeZx
@xCoKeZx 2 жыл бұрын
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.
@anonymousghost5384
@anonymousghost5384 2 жыл бұрын
What ya gonna do for production run server on client?
@JenuelDevTutors
@JenuelDevTutors 3 жыл бұрын
any tutorial, electron local storage or dabase, like sqlite?
@yishakabrham5002
@yishakabrham5002 4 ай бұрын
thank you very much!
@asifgokakgokak799
@asifgokakgokak799 3 жыл бұрын
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.
@himorrivelsjrp
@himorrivelsjrp 3 жыл бұрын
hello dear, how can I build typescript mode?
@victorjozwicki8179
@victorjozwicki8179 3 жыл бұрын
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
@vankurua5730
@vankurua5730 Жыл бұрын
I think you shoud "cd react-electron" before"yarn add concurrently wait-on cross-env"
@karlang2637
@karlang2637 2 жыл бұрын
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
@karlang2637 2 жыл бұрын
Ok never mind. I realized I forgot to npm install electron-builder!!!
@magikarp2063
@magikarp2063 2 жыл бұрын
does anyone get TypeError: fs.existsSync is not a function?
@tuckertcs
@tuckertcs 3 жыл бұрын
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.
@Imaginativeone_DF
@Imaginativeone_DF 5 ай бұрын
Will this work now?
@hamtaroyt
@hamtaroyt 4 ай бұрын
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.
@habibali9302
@habibali9302 2 жыл бұрын
The app is a blank screen
@นายเมธีสุตภักดิ์
@นายเมธีสุตภักดิ์ 2 жыл бұрын
Thank you.
@ՎարդանԹառայան
@ՎարդանԹառայան Жыл бұрын
Thank you
@iHouqLF
@iHouqLF Жыл бұрын
yarn is just stuck on wait-on tcp:3000 for me
@fishplus510
@fishplus510 Жыл бұрын
fireship lookin ah video 💀💀💀💀💀
@MerrStudio
@MerrStudio Жыл бұрын
ikr
@hamtaroyt
@hamtaroyt 5 ай бұрын
Do not use Create React App!!
@ajadavis2000
@ajadavis2000 2 жыл бұрын
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
@taferscript
@taferscript 2 жыл бұрын
Tks!
@assimilater-quicktips
@assimilater-quicktips 3 жыл бұрын
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
@kvendev 2 жыл бұрын
well, doesnt open the window, maybe already outdated
@kvendev
@kvendev 2 жыл бұрын
aint no window popping up
@MerrStudio
@MerrStudio Жыл бұрын
same, have you managed to find a fix? all react electron guides have the same issue
@kvendev
@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
@kvendev Жыл бұрын
@@MerrStudio I guess it didnt get any useful fix since my commentary 5months ago
@MerrStudio
@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.
@zeno_aratus
@zeno_aratus 3 жыл бұрын
no sqlite3
@talhazaryab
@talhazaryab 2 жыл бұрын
Premium content
@alfredenglund
@alfredenglund 7 ай бұрын
very bad and outdated tutorial! dont waste your time
@ramazanaktas748
@ramazanaktas748 2 жыл бұрын
People seem confused. This is not a tutorial.
@yosefefriemrosner5587
@yosefefriemrosner5587 3 жыл бұрын
please help
@jehnzcode
@jehnzcode Жыл бұрын
Electron is slow
@CreaturesOrigins
@CreaturesOrigins Жыл бұрын
Outdated.
@Mal-nf2sp
@Mal-nf2sp 3 жыл бұрын
Please do not copy other people's styles.
@alihusham1560
@alihusham1560 2 жыл бұрын
Guys when I try ` const {app} = window.require('@electron/remote') ` the app just crash and show blank white page with no error message?
@YamShargil
@YamShargil Жыл бұрын
Same problem. window.require is not a function
@gonza8699
@gonza8699 3 жыл бұрын
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
ELECTRON: why people HATE it, why devs USE it
17:19
The Linux Experiment
Рет қаралды 195 М.
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 99 МЛН
Интересно, какой он был в молодости
01:00
БЕЗУМНЫЙ СПОРТ
Рет қаралды 2,6 МЛН
Electron with React JS under 40 min!
36:36
Eincode
Рет қаралды 88 М.
01 - Setting up an Electronjs desktop app with basic setup
13:28
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 833 М.
Create a Desktop App With JavaScript & Electron
1:11:48
Traversy Media
Рет қаралды 380 М.
The World Depends on 60-Year-Old Code No One Knows Anymore
9:30
Coding with Dee
Рет қаралды 1 МЛН
Building Real-time Apps with Go | Azim Pulat
54:58
Azim Pulat
Рет қаралды 34 М.
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 99 МЛН