Awesome, makes electron seem so simple. Before watching this, I thought it would be seriously complicated. I love visual studio code (like many of us) and it's great to see such great tools emerging.
Thank you for this brief intro Brad. This is exactly what I was looking for. Now I can finally bring my chess apps all together into a single cross platform GUI!
Great tutorial. Due to breaking changes in Electron, add to createWindow() in the BrowserWindow options to fix the error that says "require is not defined" (same fix needed for Brad's excellent tutorial on 60-minute Electron app): webPreferences: { nodeIntegration: true, contextIsolation: false }
Brad Traversy you are very brilliant, Why i am saying this because i have watched almost all of your videos and they keep on solving all of my issues an example is the PHP OOP and MVC and some of your other videos on react js, node js etc thanks for all you are doing. Keep up with your good works
I have really enjoyed this tutorial, format is very good, not too fast, easy steps, good explanation, keep moving the same direction, Brad! Subscribed, waiting for next videos of this series.
This is sweet! I am working on my senior project in college and am deciding which technologies to use. Originally, I planned to go with Angular2 & Firebase (since you have a solid tutorial on), however, Electron seems legit and I think it has a better use case for my application. Please create a tutorial series for Electron. Which DBMS would be best for Electron? Keep up the great videos man. You've helped me immensely and I have only been watching your videos for a month or so.
MongoDB works great with Nodejs if you want NoSQL b ut if you want SQL Postgres works best with Nodejs.. and anything that works best with nodejs works best with electron
Being more of a backend kind of guy myself I have something like a inner aversion to everything JavaScript, but to be honest Electron is really impressive from what I have seen. Visual Studio Code itself is written with it and I'm really impressed how well it runs on both Windows and Linux. The look and feel is also very consistent and it's not that mess that some cross platform apps tend to be, UI wise. This technology might just be the trick to make myself learn JavaScript without hating my life for having to do it.
I actually love Javascript. I don't need to worry about: Memory management Predefined code. Potentially undefined values. Very useful for dynamic classes, because using this.foo won't crash. Zero division error. According to JS logic anything divided by 0 is infinity, because anything divided by infinity is 0. Type conversion. Having to differentiate between different types of array-ish things. Being limited only to objects if I want to define properties. In JS any variable can have its own properties, including integers. And missing this in other languages is a huge pain for me sometimes! And in the end there's also a ton of ready-made plugins. Animations made easy. Audio handling - really powerful, made easy. WebGL made easy. And I could continue indefinitely.
+Web Probie I busted out laughing when I heard that too! Sometimes technology is like women, sometimes you just get thirsty, and when you get dehydrated, you want mooooooooooooooooooooooooore.
old comment, but react isn''t written in another language. it's still javascript. the entire react library was written using pure javascript. javascript itself is an interpreted language, meaning you can interpret it using any language, but most interpreters like Chrome's V8 use c++
Great tutorial as always. Brad as a suggestion, why don't you develop a CRUD app using electron and sqlite when you finish your research on electron? It occurs to me that this combo can be used for fast developing of small db projects which can be platform independent because both chrome and sqlite run almost everywhere. Nowadays the most common tools for accomplishing this are java and maybe lazarus/pascal which have a steep learning curve. Thanks a lot for your great content, regards from México!
I've been building an Electron app for the last couple of weeks and I'm enjoying it. I had some trouble with the mongoose driver for Mongodb so I had to use the MongoDB official node driver but apart from that it's been going quite smoothly.
I tried learning electron few months before, but couldn't learn as the doc's were confusing and was not able to put everything successfully. great seeing u coming up with the tutorial. am sure I will successfully learn it this time. looking forward to more in-depth vedios. thanks bro
I was searching for info about the Intel Atom CPU, and this came up (Since you use Atom editor). I watched the whole video and got ideas for small desktop apps I want to do :D
You should definitely check out PhotonKit for use with Electron. It is perfect for getting your app to have a native look when choosing your environment. A lot developers use it when building with Electron. Great tutorial by the way!
Cool video. Can't wait to see more. That being said, it would be cool if you maximized your editor, if possible. That right side brightness is painful at night. :)
Hey Brad, would you consider redoing it for 2021. With Electron v12 this does not work and as some comments said, the nodeIntegration trick does not work really
On Reddit someone told me to stay away from Electron because it was too complicated for me. I want to make simple desktop gui-based apps using JavaScript in the front end and Python in the backend.
I am unable to get process to show in the consoles tab of the developers menu, I just get the error "Uncaught ReferenceError: process is not defined at index.html:19" Any help?
This is awesome! Very great tutorial! I've' seen some of your stuff now and I have subscribed to your channel. So, I stopped coding back in 20001 after burning out. I was writing ActiveX and inserting into web browser to distribute. I am finally ready to get back in the game and finally have hope since cross-platform support is here and embedded into the browser. I was looking for a good framework to start with like MEAN. Since, I want to re-write some apps I developed for a vendor years ago, I will still be able to deploy via web server. This is great!
I just don't understand one thing: Why install local and global? Only local is not enough? With that way, will not have 2 versions of the same thing? Thank you!
truecoder I get the concept of global installation. But why both global and local is the question. You need one of them, no matter which. But not both.
Hope you get the answer, but if not so in general when we install a module , plugin or some library globally we can access it from anywhere inside our machine even outside our current project directory . Hope that helps .
Sweet intro! Got any suggestions about solid database managers to use with Electron? Been using Sqlite3 but seems to struggle with Electron for some reason.
Nice tutorial as always. So is it possible to deploy electron to the server along with normal app and create a web app that could cooperate with user's machine?
Hi Brad, This was a brilliant video and I hope to see more on this. I am new to programming. A quick question, how do I package this as a .exe and provide it for someone or other system to fetch their system info.
please tell me, what is difference between win.on('closed') and app.on('window-all-closed'), isn't there only one window ? And closing window does not mean closing entire app?
"BOSS"?!?! :D [Just kidding] :D :P Thank you for the humble and awesome video, it's a great head start for electron.js and me. #respect :) I'll use electron to make all my JS (vanilla) web apps trying to make them into offline standalone desktop apps, let's see... Thanks!! :)
Man how awesome, I'm a web developer myself and the ability to use that to build desktop apps cross platform? ahhhhh thanks for this intro edit: shit... 3:45 does this mean you can't package the apps as say a .exe that doesn't require installing other stuff (like node.js) it would just come inside that .exe as an execution command or something? That would suck if you have to setup an environment that runs an electron app. I use Visual Studio Code that for Linux/Windows I just download a file and run it so maybe...
I got an error. Uncaught ReferenceError: require is not defined Uncaught ReferenceError: process is not defined I am not sure where it went wrong. I followed through code, every detail and I still get the error. Is it my JS?
@@sagardhomaneofficial What does adding HTML code have to do with JavaScript errors? There was nothing in his error that he posted that suggested that id="output" was even needed.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Awesome, makes electron seem so simple. Before watching this, I thought it would be seriously complicated. I love visual studio code (like many of us) and it's great to see such great tools emerging.
When I finally get a javascript job, I'm going all the way back to learn and watch all Brad's videos. One doesn't need anything else.
I've looked at a lot of programming environments and Electron most definitely interests me. Thanks for educating me.
Thank you for this brief intro Brad.
This is exactly what I was looking for.
Now I can finally bring my chess apps all together into a single cross platform GUI!
I love this, you've really opened my eyes to the potential of JS well done :)
Great tutorial. Due to breaking changes in Electron, add to createWindow() in the BrowserWindow options to fix the error that says "require is not defined" (same fix needed for Brad's excellent tutorial on 60-minute Electron app):
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
Thanks so much 4 the sweeeeet kewpage. I'm replacing my JAVA app with this approach and so grateful for your selfless sharing. Stay strong, Code on!
Brad Traversy you are very brilliant, Why i am saying this because i have watched almost all of your videos and they keep on solving all of my issues an example is the PHP OOP and MVC and some of your other videos on react js, node js etc thanks for all you are doing. Keep up with your good works
liked before watching video..that's how much we believe in you, Brad. Keep bringing up cool stuff. You are the best teacher.
Thanks Brad for a cool intro to Electron. Looking forward to the next installment!
I have really enjoyed this tutorial, format is very good, not too fast, easy steps, good explanation, keep moving the same direction, Brad!
Subscribed, waiting for next videos of this series.
This is sweet!
I am working on my senior project in college and am deciding which technologies to use.
Originally, I planned to go with Angular2 & Firebase (since you have a solid tutorial on), however, Electron seems legit and I think it has a better use case for my application.
Please create a tutorial series for Electron. Which DBMS would be best for Electron?
Keep up the great videos man. You've helped me immensely and I have only been watching your videos for a month or so.
MongoDB works great with Nodejs if you want NoSQL b ut if you want SQL Postgres works best with Nodejs.. and anything that works best with nodejs works best with electron
I would go for NeDB
React man. React.
The best electron tutorial which i ever seen. As a beginner its helped me so much. I'm using OS X, some processes are different in MAC.
Being more of a backend kind of guy myself I have something like a inner aversion to everything JavaScript, but to be honest Electron is really impressive from what I have seen. Visual Studio Code itself is written with it and I'm really impressed how well it runs on both Windows and Linux. The look and feel is also very consistent and it's not that mess that some cross platform apps tend to be, UI wise.
This technology might just be the trick to make myself learn JavaScript without hating my life for having to do it.
Yes it is a very intriguing technology. I am excited to learn more about it. Right now I just know the very basics
same
I actually love Javascript. I don't need to worry about:
Memory management
Predefined code.
Potentially undefined values. Very useful for dynamic classes, because using this.foo won't crash.
Zero division error. According to JS logic anything divided by 0 is infinity, because anything divided by infinity is 0.
Type conversion.
Having to differentiate between different types of array-ish things.
Being limited only to objects if I want to define properties. In JS any variable can have its own properties, including integers. And missing this in other languages is a huge pain for me sometimes!
And in the end there's also a ton of ready-made plugins. Animations made easy. Audio handling - really powerful, made easy. WebGL made easy.
And I could continue indefinitely.
I am thirsty for more indeed. Please, I am begging you.
+Web Probie I busted out laughing when I heard that too! Sometimes technology is like women, sometimes you just get thirsty, and when you get dehydrated, you want mooooooooooooooooooooooooore.
no such thing as leavx thirsx or not, say, do any nmw, no nerx
My God! JavaScript is becoming the god of all programming languages front-end, back-end, graphics rendering, and now desktop apps!
OH MY GOD
I have been waiting for this - i utterly detested JS because i couldnt write desktop stuff.
this is brilliant
old comment, but react isn''t written in another language. it's still javascript. the entire react library was written using pure javascript. javascript itself is an interpreted language, meaning you can interpret it using any language, but most interpreters like Chrome's V8 use c++
Same bro
Cool. Awesome introduction to Electron.
Been creating C# forms apps for years, planning to give this a go as been learning node and react in recent weeks .
Great tutorial as always. Brad as a suggestion, why don't you develop a CRUD app using electron and sqlite when you finish your research on electron? It occurs to me that this combo can be used for fast developing of small db projects which can be platform independent because both chrome and sqlite run almost everywhere. Nowadays the most common tools for accomplishing this are java and maybe lazarus/pascal which have a steep learning curve. Thanks a lot for your great content, regards from México!
Just what I wanted to know! Thank you for jumping in ad just doing it for us!
Great intro video, nice and simple as it should be so we can easily follow all of it. Well done. Look forward to more.
I learnt PHP using one of your guides!!! Thanks a bunch
really surprised at number the of really good apps built by big companies with this library, impressive
I've been building an Electron app for the last couple of weeks and I'm enjoying it. I had some trouble with the mongoose driver for Mongodb so I had to use the MongoDB official node driver but apart from that it's been going quite smoothly.
I tried learning electron few months before, but couldn't learn as the doc's were confusing and was not able to put everything successfully.
great seeing u coming up with the tutorial. am sure I will successfully learn it this time.
looking forward to more in-depth vedios.
thanks bro
Yes they are very confusing
Thank you soo much!!!!! I was looking for something like this. Please do continue on this series please. Thank you
Please do more videos about electron!!! Brad, this is so awesome!
Thanks Brad, nice intro to Electron,
great tutorial brad
I was searching for info about the Intel Atom CPU, and this came up (Since you use Atom editor). I watched the whole video and got ideas for small desktop apps I want to do :D
This was an awesome intro Brad! Thanks so much.
Wow ... that was fun. You're right ... leaves one thirsty for more.
We are waiting more Brad Good job Bro
Perfect into to Electron - just what I was looking for - cheers
You should definitely check out PhotonKit for use with Electron. It is perfect for getting your app to have a native look when choosing your environment. A lot developers use it when building with Electron. Great tutorial by the way!
+Werther'sOriginal - great suggestion, thanks
Cheers man, I really appreciate your content. Keep it coming!
Cool video. Can't wait to see more. That being said, it would be cool if you maximized your editor, if possible. That right side brightness is painful at night. :)
awesome! Hope you do more videos about Electron and how to build desktop apps with it
BRad this is a cool app here can’t wait to c more
Hey Brad, would you consider redoing it for 2021. With Electron v12 this does not work and as some comments said, the nodeIntegration trick does not work really
this is thumbs up for me.. yes i do enjoy watching in this app.
" My Thank's "
i've been waiting for this. or even if there was electron+external api
Amazing Thanks and please make a full series on it thats cover all the basic crud functionality with electron please.... thanks alot
On Reddit someone told me to stay away from Electron because it was too complicated for me. I want to make simple desktop gui-based apps using JavaScript in the front end and Python in the backend.
your work is so great ,i love it
I love how u explain things
I am unable to get process to show in the consoles tab of the developers menu, I just get the error "Uncaught ReferenceError: process is not defined
at index.html:19"
Any help?
Inside your "win = new BrowserWindow({width: 800,....}" you need to add "webPreferences: { nodeIntegration: true }"
Thank's that you exist man!!!)))
Interesting. I will try it soon.
I already have an idea which app I going to build :) Waiting for more lessons
Yeah, this is one of those technologies that really makes your gears move and anxious to start creating stuff
Traversy Media no kidding!
This is awesome! Very great tutorial! I've' seen some of your stuff now and I have subscribed to your channel. So, I stopped coding back in 20001 after burning out. I was writing ActiveX and inserting into web browser to distribute. I am finally ready to get back in the game and finally have hope since cross-platform support is here and embedded into the browser. I was looking for a good framework to start with like MEAN. Since, I want to re-write some apps I developed for a vendor years ago, I will still be able to deploy via web server. This is great!
Very nice introduction, thank you.
great work man
At 18:30 it showing me process is not defined and also renderer is not defined pls help me....
have you found any solution to this issue? I get the same error.
@@1045geo yes
@@1045geo let win = new BroswerWindow({
webPrefrences:{nodeIntegration : true}
})
@@raghav9o9 thank you. I will give it a try. Cheers!
I just don't understand one thing: Why install local and global? Only local is not enough? With that way, will not have 2 versions of the same thing? Thank you!
Did you find out why?
same question here... why installing 2 times?
so you dont have to be in the project dir to run `electron .`
truecoder I get the concept of global installation. But why both global and local is the question. You need one of them, no matter which. But not both.
Hope you get the answer, but if not so in general when we install a module , plugin or some library globally we can access it from anywhere inside our machine even outside our current project directory . Hope that helps .
and here i was thinking javascript was just for web design, had given up on it thank you for this
Excellent video... learn a lot
Sweet intro!
Got any suggestions about solid database managers to use with Electron?
Been using Sqlite3 but seems to struggle with Electron for some reason.
Traversy
you are the best !
Very nice.
When will you make a course on electron?
Great tutorial. Thanks! Would love to see more on this from you. Couldn't find part 2 (if it's done)
Perfect intro, thanks
Thank you TraversyMedia
You put me on to a lot of cool stuff!
Your vids are awesome, thanks a lot.
Hello, this was a very good video! Will you make more Electron videos?
Awesome!! Lots of potential!!!!
Nice tutorial as always. So is it possible to deploy electron to the server along with normal app and create a web app that could cooperate with user's machine?
Thanks for the tutorial.. looking forward for more videos on same topic... :)
I couldn't find the promised follow up. Did you stop looking at Electron? Otherwise a great series of videos, thank you.
Brad,
Would love if you did one with webusb and electron! :)
you're awesome, i owe you a lot man, wish that one day i could pay you back
Thanks man alot for this work
Thanks Brad!
great tutorial
could u tell me anything to get battery info?
I'm so happy that this exists so that I don't have to touch C++ or C#
Thanks for the tutorial! Wouldn't it be better to download the CSS file locally? What about using the app without an internet connection?
Jean-Simon Robert Ouimet I would say yes. However, for the purposes of an intro to tutorial, linking it would be fine.
Yes definitely. I should have mentioned that. I only did it to make things quicker.
Had to add
webPreferences: {
nodeIntegration: true
}
in win = new BrowserWindow function
Thanks , you really help me bro!
Hi Brad, This was a brilliant video and I hope to see more on this. I am new to programming. A quick question, how do I package this as a .exe and provide it for someone or other system to fetch their system info.
do you have a full POS system course for electron?
Please continue !!!! ♥
please tell me, what is difference between win.on('closed') and app.on('window-all-closed'), isn't there only one window ? And closing window does not mean closing entire app?
Great! please make a tutorial series and thank you for your efforts, great channel, Keep it up (y)
Nice - very interesting... Thanks
"BOSS"?!?! :D
[Just kidding] :D :P
Thank you for the humble and awesome video, it's a great head start for electron.js and me. #respect :)
I'll use electron to make all my JS (vanilla) web apps trying to make them into offline standalone desktop apps, let's see... Thanks!! :)
Hi Traversy,
it a good tutorial.
Thank you very much! You're really amazing!
Are you going to do more keystone.js videos? The first one you did was great and sparked my interest for it!
Pedogoat i plan on it. Im still trying to figure out what i want to do with it
Man how awesome, I'm a web developer myself and the ability to use that to build desktop apps cross platform? ahhhhh
thanks for this intro
edit: shit... 3:45 does this mean you can't package the apps as say a .exe that doesn't require installing other stuff (like node.js) it would just come inside that .exe as an execution command or something? That would suck if you have to setup an environment that runs an electron app.
I use Visual Studio Code that for Linux/Windows I just download a file and run it so maybe...
great tutorial , thanks a lot
sweet Intro c:! you earned a new sub
brother, where is the gear icon? it is not in the description
This is good
But I had a small doubt will it use any default browser to show html pages
great video, thanks!
I got an error.
Uncaught ReferenceError: require is not defined
Uncaught ReferenceError: process is not defined
I am not sure where it went wrong. I followed through code, every detail and I still get the error. Is it my JS?
Try by adding following code
My First Electron App
@@sagardhomaneofficial What does adding HTML code have to do with JavaScript errors? There was nothing in his error that he posted that suggested that id="output" was even needed.
جزاك الله خيرا
Please do a webseries on complete app with electron (notes app for example).
Thank You
Thanks Brad