Thanks Brad, this is really great work. Using electron v5 here, the BrowserWindow calls need to include webPreferences: {nodeIntegration: true} now, otherwise the electron functions are not available in the html pages. (ie.: “Uncaught ReferenceError: require is not defined”) // Create new main window mainWindow = new BrowserWindow( { webPreferences: { nodeIntegration: true } } );
There’s something about how you go through these tutorials that makes stuff I struggle to get all the time clear as a bell. Fantastic work. Many thanks.
As always the first thing I want to say is: "Thank you, Brad ! ". It would be awesome to continue with this tutorial by adding more functionalities to the app, like saving our list to a JSON file (locally), retrieving saved JSON lists(locally), upload them to some kind of web-server, download resources from the web, etc...
Dude, I've listened to a few teachers on youtube and you really do a great job. no fluff just simple, clear communication. Appreciate your work. Thanks Brad :)
Damn you Brad! I can't stop watching your videos! I have no idea where you find the time to make these videos I barely have the time to power watch them! The funny thing is I think my wife thinks we have the Traversy media channel on TV! I watch most of your videos on the Chromecast on a very large screen in total comfort and I really enjoy your content. As I sit here watching a yet another great video I am certain that my next trip in front of the computer I will indeed sign up for your Patreon and help support your channel and thank you for all the great work that you do!
WOW.. just wow i've been using electron now for about a year and yet i still come back to this video every couple of days when i forget how to do something. thank you
This was a really good tutorial. I spent hours trying to understand and build an app with little understanding, this tutorial was extremely helpful in getting my app from start to finish. I built my app as he went along. Now finished with the first version, built and shipped. Really good way of teaching, I hope to watch more from him
I must say, I watch a few online guides on various JS-related stuff and yours are by far my favorite! I love it how you pace your guides in a way that is not slow, but also not too fast to type/think along! Keep up the good work!
At 38:30. If you don't quite understand it, here's a shorter way of doing it that does the exact same thing. And its easier to understand. const li = document.createElement('li'); li.innerHTML = item ul.appendChild(li) Thats it. You just created a li HTML tag, put item into it (which translates to item in HTML) and then append the to the . What he does is the exact same thing, but just 1 line longer lol XD
Before I saw this video, I didn't even know that a desktop application can be made with Javascript. Thank you for that. I applaud your skills and looking forward to more of your videos. Subbed
OMFG the BEST! I started learning electron last weekend, a couple tutorials and MANY documentations later I had little to show for it. One day working with this tutorial and I have a complete app and MUCH better understanding of the frameworks. Thank you!!
... I probably shouldn't be this excited, but I have written my first electron application and it feels great! going to look into this best way to add persistence of data for an app like this, and then I am going to tackle making a personal finance app with this as a start in that journey. thank you so much!
Thanks Brad this really helped me a lot. Just for people coming here, using electron v9 you can just do "mainWindow.loadfile('fileName')" instead of all the joining strings thing.
Thank you dude! This is the only tutorial that showed how to actually change the icon of an electron app I checked like 2 or 3 pages from Google and used a few weeks to figure this out: life saver!! Good Work, keep it up!
Thank you very much, great lesson well explained. It took me 2 hours and a half to complete the tutorial but I've never use electron, git bash and even javascript for a purpouse. Glad I've found this resource.
Thanks for the content Brad. I just noticed that addWindow will opened no matter if there is one already open. Just check if addWindow is defined and focus it. Under click event on Add item: if (addWindow) { addWindow.focus(); } else { createAddWindow(); }
I think that Electron tutorials would be a great idea for your channel, lots of people, including me are looking for some high quality tutorials on Electron, especially from a person like you, your way of teaching is really effective. Thanks for awesome videos, keep making them :)
Thanks I watched whole tutorial but I didn't understand it fully. So, I think I have to take some tutorial but your tutorial is very amazing. Pls make more stuff like this. Thanks Brad
I have been watch alot of diffrent types of videos and i have to say that, this is the best one yet. I understand the code and thats great. Thanx for taking your time to do this.
Thanks for the video, I'm a student application developer, I only know how to make websites so far, having electron as a tool and someone who explains me on how to use it, is nice indeed.
Hello dear sir Brad, My name is Zed, I am Currently a software engineering student and I learned a lot form your videos, I highly appreciates your efforts for students like us, I highly look up to you, I respect you a lot, you are the best teacher on You-tube. I have a few questions for you and I hope you will answer my questions. Question Number 1) How can we create Sign-Up and Log-In forms using electron in a desktop application? Question Number 2) How can we create Admin, Staff (Dashboard) using electron in a desktop application? Question Number 3) How can we create an (A.I. Chat bot) using electron in a desktop application, which will interact wit the humans of real world, talk to the humans, ask questions like (what is your name sir?), and save all of the information that it gets from the real world and store it in it's database, and also be able to greet the humans of real world when application starts like (Welcome respected Sir, How may I assist you) ? Respected Sir Brad these were my questions for you, I hope you will help me out, I need your assistance in solving these questions, I will be highly thank full to you for your help for the rest of my life. Thank you very much I really like your videos a lot You are the best.
If you get a 'require is not defined error', add this - webPreferences: {nodeIntegration: true} - inside 'mainWindow' in the main.js file. They changed nodeIntegration to false recently for security reasons. This fixes it just do your research though.
Thanks Mr. Traversy and Traversy Media...I just want to say if anyone is having trouble with a errno 1 / elifecycle error be sure to globalize the electron software by running npm install -g electron-packager in the command prompt
Dude..you are amazing.. after spending and refunding $30 on udemy courses and couldn't learn anything.. You dove right into creating simple app that people can slowly build onto if they wanted to, and now it has made it much easier for me to understand JavaScript. although, I replaced everything in this video with TypeScript since i'm coming from a C# background ;) I cannot thank you enough, Cheers!
e.target is a reference to the li that set off the eventlistener(the element that you double clicked), then with .remove() it removes the element it references, i.e. the li.
Thanks for this video. This is one of the best tutorials I've ever found. The amount of valuable knowledge I got from this video is amazing. I can't even believe how you were able to come up with such a project that teaches a lot in under an hour. Will definitely subscribe and become a patron. Thanks a lot and keep up with your great tutorials!
Hey man. Thank you. The more videos you do the better we become. We want practical examples (as you already do), maybe something related to DB. Thank you once again. You are great!
For those getting the require error, pass webPreferences: {nodeIntregation: true} when creating windows. Aaaaand, shortcuts are made for a reason, use them! Can't click 4 times to make a folder :D
this tutorial was very helpful for me since i had no idea how to properly package an app and i was wondering if you could make a tutorial about how to package the app for the windows store:D
Thanks, Brad! Another great video! Right now im trying to become a full stack js developer and your content helped me with almost all i needed! THANK YOU!
Thanks , great video. One suggestion, maybe explain object destructuring once at the start and save time on the rest of the video by doing (eg at 29:55) const {ipcRenderer} = require('electron')
This is absolutely beautiful! Congrats on your success! Obviously suscribed! Can you do a tutorial port of this app in React Native for mobile? I'm sure there are plenty of other people that would like to see it
Microsoft released a 64 bit version of visual studio code. and it's awesome. i encourage everyone to use it. what i like about visual studio code is the built in console so you don't have to switch between windows or split screen because not everyone has a big screen. i like sublime text because it's very lightweight unlike atom.
Hey Brad, Thanks for this tutorial man. It's been a while I've been following you and you really are the mentor every Web Developer needs. Could you please do a tutorial on Electron and help us add Database to it and maybe explain some concepts such as Updating the app and etc. Really keen to learn more about the Electron. Love From India.
Sorry for so many comments, but I also learned I need this in BOTH instantiations of "new BrowserWindow" for "require" to work in script tags: webPreferences: { nodeIntegration: true // allows access to 'process' of node, and use of 'require' }
This reminds me of a programming language in DOS called Clipper by Computer Associates, which I used for a long time until Visual Basic 3.0 came out. in the 90s it simulated object-oriented programming using arrays.
one of the best tutorials i've ever seen. I'll try to modify it little bit, i mean add shortcuts for new item. I have one question - what can i use to store items after closing the app?
If anyone gets a 'object could not be cloned error' during this part 32:57, new electron objects do not allow sending of non serializable objects. So a HTMLElement can no longer be sent. You can send the string in the input, though. So replace the line with: ipcRenderer.send('item:add', item.value);
An invaluable set of bindings for me when using Vanilla JS is to bind "querySelector" and "querySelectorAll" to let's say a single underscore for querySelector and a double underscore for querySelectorAll: let _ = document.querySelector.bind(document); let __ = document.querySelectorAll.bind(document); And then this: document.querySelector('#item')... Becomes: _('#item')...
![Eminem - Temporary (feat. Skylar Grey) [Official Music Video]](http://i.ytimg.com/vi/ZaK9Wi5ho0o/mqdefault.jpg)
Thanks Brad, this is really great work. Using electron v5 here, the BrowserWindow calls need to include webPreferences: {nodeIntegration: true} now, otherwise the electron functions are not available in the html pages. (ie.: “Uncaught ReferenceError: require is not defined”)
// Create new main window
mainWindow = new BrowserWindow(
{
webPreferences: {
nodeIntegration: true
}
}
);
This same preference has to be set in the creation of the addWindow in order for "require" to work correctly. Thanks, Robb!
Thanks!!!
"addWindow = new BrowserWindow({
width: 300,
height: 200,
title: 'Add Shopping List Item',
webPreferences: {nodeIntegration: true}
});"
@@israellucena926 Thank you
This was incredibly helpful, thank you Robb!
This is one of the best coding tutorials I have ever seen PERIOD. He explains the topic very well and prevents any confusion.
on these simple ones, basically he's just using official documentation. but yea, sometimes i fount better to listen some things
There’s something about how you go through these tutorials that makes stuff I struggle to get all the time clear as a bell. Fantastic work. Many thanks.
As always the first thing I want to say is: "Thank you, Brad ! ". It would be awesome to continue with this tutorial by adding more functionalities to the app, like saving our list to a JSON file (locally), retrieving saved JSON lists(locally), upload them to some kind of web-server, download resources from the web, etc...
I was thinking about the same thing too. And if we publish the app it will be good using MongoDB or SQL dbs
fs.writeFile('./file.json', JSON.stringify(whatever_the_input_was), err => {
if (err) throw err;
// Successfully written to file
}
Dude, I've listened to a few teachers on youtube and you really do a great job. no fluff just simple, clear communication. Appreciate your work. Thanks Brad :)
Damn you Brad! I can't stop watching your videos! I have no idea where you find the time to make these videos I barely have the time to power watch them! The funny thing is I think my wife thinks we have the Traversy media channel on TV! I watch most of your videos on the Chromecast on a very large screen in total comfort and I really enjoy your content. As I sit here watching a yet another great video I am certain that my next trip in front of the computer I will indeed sign up for your Patreon and help support your channel and thank you for all the great work that you do!
LOL that is awesome. TV channel, that would be nice :)
Bend the knee in front of your god Traversy
Have you every tried too? brow!!!!
if you're using 'electron >= version 12'
use
new BrowserWindow({
webPreferences:{
nodeIntegration:true,
contextIsolation: false
}
});
Thank you, this was what I am looking for.
I like the way this tutorial was done. Dude just seems like a chill, informative dude and he doesn't talk like a robot. Good stuff.
i faced a problem when i write const electron = require('electron') in script tag
WOW.. just wow i've been using electron now for about a year and yet i still come back to this video every couple of days when i forget how to do something. thank you
Great to see how simple it is to use Electron if you now of to build webpages. Thanks for letting me see how you work.
This was a really good tutorial. I spent hours trying to understand and build an app with little understanding, this tutorial was extremely helpful in getting my app from start to finish. I built my app as he went along. Now finished with the first version, built and shipped. Really good way of teaching, I hope to watch more from him
I must say, I watch a few online guides on various JS-related stuff and yours are by far my favorite! I love it how you pace your guides in a way that is not slow, but also not too fast to type/think along! Keep up the good work!
So glad this was my intro to Electron! Saturday morning well spent!
How is your electron knowledge now?
At 38:30. If you don't quite understand it, here's a shorter way of doing it that does the exact same thing. And its easier to understand.
const li = document.createElement('li');
li.innerHTML = item
ul.appendChild(li)
Thats it.
You just created a li HTML tag, put item into it (which translates to item in HTML) and then append the to the .
What he does is the exact same thing, but just 1 line longer lol XD
Before I saw this video, I didn't even know that a desktop application can be made with Javascript. Thank you for that.
I applaud your skills and looking forward to more of your videos.
Subbed
OMFG the BEST!
I started learning electron last weekend, a couple tutorials and MANY documentations later I had little to show for it.
One day working with this tutorial and I have a complete app and MUCH better understanding of the frameworks. Thank you!!
... I probably shouldn't be this excited, but I have written my first electron application and it feels great! going to look into this best way to add persistence of data for an app like this, and then I am going to tackle making a personal finance app with this as a start in that journey. thank you so much!
Best Instructor Alive ..... Your Passion Makes Us To Easily Fulfill And Follow Our Dreams ! Thanks Brad
The volume and quality of work that you're producing is staggering! My mind is blown.
Thanks Brad this really helped me a lot. Just for people coming here, using electron v9 you can just do "mainWindow.loadfile('fileName')" instead of all the joining strings thing.
Thank you dude! This is the only tutorial that showed how to actually change the icon of an electron app I checked like 2 or 3 pages from Google and used a few weeks to figure this out: life saver!! Good Work, keep it up!
Thank you very much, great lesson well explained. It took me 2 hours and a half to complete the tutorial but I've never use electron, git bash and even javascript for a purpouse. Glad I've found this resource.
Amazing! I just learnt everything necessary from this one video. Went from not knowing anything about it to building my complete app. Thank you!
Thanks for the content Brad. I just noticed that addWindow will opened no matter if there is one already open.
Just check if addWindow is defined and focus it.
Under click event on Add item:
if (addWindow) {
addWindow.focus();
} else {
createAddWindow();
}
Very useful thanks!
Thanks Brad. The lesson is very short and easy to understand so that I can easily access the electron app
I think that Electron tutorials would be a great idea for your channel, lots of people, including me are looking for some high quality tutorials on Electron, especially from a person like you, your way of teaching is really effective. Thanks for awesome videos, keep making them :)
I'm shocked how easy this is. Thank you for this presentation
Such great video, you man are the real MVP. This video from 5 years ago is more helpful than any other updated Electron tutorial I could find.
great work man. I am an android dev with some exp with js. Just started electron today and this tutorial went smooth af thanks!!
Thanks I watched whole tutorial but I didn't understand it fully. So, I think I have to take some tutorial but your tutorial is very amazing. Pls make more stuff like this.
Thanks Brad
I have been watch alot of diffrent types of videos and i have to say that, this is the best one yet. I understand the code and thats great. Thanx for taking your time to do this.
Wow. This is the first electron video that gave me so much insight of electronjs. Great work.
This is the best electron tutorial I have seen. Can't wait for the next one with the database access.
Thanks for the video, I'm a student application developer, I only know how to make websites so far, having electron as a tool and someone who explains me on how to use it, is nice indeed.
Hello dear sir Brad, My name is Zed, I am Currently a software engineering student and I learned a lot form your videos, I highly appreciates your efforts for students like us, I highly look up to you, I respect you a lot, you are the best teacher on You-tube.
I have a few questions for you and I hope you will answer my questions.
Question Number 1) How can we create Sign-Up and Log-In forms using electron in a desktop application?
Question Number 2) How can we create Admin, Staff (Dashboard) using electron in a desktop application?
Question Number 3) How can we create an (A.I. Chat bot) using electron in a desktop application, which will interact wit the humans of real world, talk to the humans, ask questions like (what is your name sir?), and save all of the information that it gets from the real world and store it in it's database, and also be able to greet the humans of real world when application starts like (Welcome respected Sir, How may I assist you) ?
Respected Sir Brad these were my questions for you, I hope you will help me out, I need your assistance in solving these questions, I will be highly thank full to you for your help for the rest of my life.
Thank you very much
I really like your videos a lot
You are the best.
If you get a 'require is not defined error', add this - webPreferences: {nodeIntegration: true} - inside 'mainWindow' in the main.js file. They changed nodeIntegration to false recently for security reasons. This fixes it just do your research though.
Thanks Mr. Traversy and Traversy Media...I just want to say if anyone is having trouble with a errno 1 / elifecycle error be sure to globalize the electron software by running npm install -g electron-packager in the command prompt
For anyone getting errors at 39:53, in the Clear Items click event, remove the .webContents from mainWindow.webContents.send('item:clear')
Even in 2019, this is still a great tutorial :)
This guy always knows what i'm planning to learn next! Like how?!!
Because we computer engineers walk through the same route.
Dude..you are amazing.. after spending and refunding $30 on udemy courses and couldn't learn anything..
You dove right into creating simple app that people can slowly build onto if they wanted to, and now it has made it much easier for me to understand JavaScript. although, I replaced everything in this video with TypeScript since i'm coming from a C# background ;)
I cannot thank you enough,
Cheers!
Question: If I am adding a event listener for 'dblclick' on which is the list container, how does JavaScript know element to remove?
e.target is a reference to the li that set off the eventlistener(the element that you double clicked), then with .remove() it removes the element it references, i.e. the li.
Enrolled for your electron course on udemy. You are the very best Brad, You are awesome
for update reference, Electron enables menu items with "role". See documentation for insight on it, but role: quit would add a menu item with quit
This tutorials should be must watch. I followed this tutorial in linux(Ubuntu 16.04), everything works fine!
Crash learning electron for an upcoming interview. This is just what I need.
good luck!
Thanks for this video. This is one of the best tutorials I've ever found. The amount of valuable knowledge I got from this video is amazing. I can't even believe how you were able to come up with such a project that teaches a lot in under an hour. Will definitely subscribe and become a patron. Thanks a lot and keep up with your great tutorials!
this is my first programmers-youtube-channel abonnement :) such a fun tutorial, was nice to follow up.
very nicely described, I recommend this to anyone new with electron
Awesome tutorial, and I learned much more about electron in this vid than reading electrons' docs. Thanks!
Dude you really have a natural talent to explain things. Thanks! =)
Hey man. Thank you. The more videos you do the better we become. We want practical examples (as you already do), maybe something related to DB. Thank you once again. You are great!
For those getting the require error, pass webPreferences: {nodeIntregation: true} when creating windows.
Aaaaand, shortcuts are made for a reason, use them! Can't click 4 times to make a folder :D
nice thank you
thanks !
Brad, you're the best, really!!! I'm learning so much with your tutorials. Congratulations!
electron is very handy and good for desktop applications thank you sir & always thumbs up for Traversy media
Brad... Your channel is one of the best thing I discovered in my life
Fantastic tutorial! Especially loved the attention to detail and getting the small stuff right.
This is brilliant thank you!
I accidentally spent an hour watching it without even intending to
wow, this Electron tutorial is one of the best i have ever seen!. I hope you will post more of this and maybe Electron with Sql/Sqlite.
great work!
this tutorial was very helpful for me since i had no idea how to properly package an app and i was wondering if you could make a tutorial about how to package the app for the windows store:D
Thanks, Brad! Another great video! Right now im trying to become a full stack js developer and your content helped me with almost all i needed! THANK YOU!
Thank you so much, this really helped me out to begin production. Easy and straight forward. Wish i could like a video twice!
If you still get an error "require is not defined" even with nodeIntegration, use :
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
Thank you for the detailed tutorial, helped me a lot a novice on electron..
Thanks , great video. One suggestion, maybe explain object destructuring once at the start and save time on the rest of the video by doing (eg at 29:55)
const {ipcRenderer} = require('electron')
Brad I love your detailed tutorials.Can you please make a tutorial of how to integrate electron with Angular 4 instead of just vanilla JavaScript
This is absolutely beautiful! Congrats on your success! Obviously suscribed!
Can you do a tutorial port of this app in React Native for mobile? I'm sure there are plenty of other people that would like to see it
Microsoft released a 64 bit version of visual studio code. and it's awesome. i encourage everyone to use it. what i like about visual studio code is the built in console so you don't have to switch between windows or split screen because not everyone has a big screen. i like sublime text because it's very lightweight unlike atom.
What keyboard do you use? Love the sound!!
I think mechanical keyboard
@@wondercreator8244 think he meant switches
Thank you for this. Explaining important stuff through simple example, that was just perfect.
Hey Brad, Thanks for this tutorial man. It's been a while I've been following you and you really are the mentor every Web Developer needs. Could you please do a tutorial on Electron and help us add Database to it and maybe explain some concepts such as Updating the app and etc. Really keen to learn more about the Electron.
Love From India.
Sorry for so many comments, but I also learned I need this in BOTH instantiations of "new BrowserWindow" for "require" to work in script tags:
webPreferences: {
nodeIntegration: true // allows access to 'process' of node, and use of 'require'
}
this is good shizzle. thank you for this video. got a foundation made, fully working, and with bootstrap. many thanks /bow
When i begin working my first work is check out your patreon
Big thanks for great contents. I really like your style keep it up.
This reminds me of a programming language in DOS called Clipper by Computer Associates, which I used for a long time until Visual Basic 3.0 came out. in the 90s it simulated object-oriented programming using arrays.
Very useful for getting started with Electron.
Thank you for this amazing tutorial Brad! It was fun
53:46 "..Ok, its going through some crap..." I loled. Great tutorial!!!
Great, simple to follow tutorial. Thank you!
Btw, only thing that bugged me was that you weren't doing arrow functions but that's my coder OCD, heh
Wow 175 dislikes, no one should dislike this video, period!
This is amazing, keep up the good work mate!
Love the animated intro Brad, it looks awesome!
Thank you, finally I will able to start working on electron.
one of the best tutorials i've ever seen. I'll try to modify it little bit, i mean add shortcuts for new item. I have one question - what can i use to store items after closing the app?
Bib Ivanov You can use native JavaScript storage to persist the data, nedb is one example.
amazing tutorial, actually learned a lot from this.
Amazing tutorial as usual. Thank you, Brad!
Add nodeIntergeration : true
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
Thank you brother
I do appreciate and respect what you do. Keep up the good work.
You're making a difference in this wolrd.
Thanks for this great introduction to Electron JS.
Well done my friend. Best ElectronJS Video on youtube.
This is really what Electron Tutorial should look like ..
If anyone gets a 'object could not be cloned error' during this part 32:57, new electron objects do not allow sending of non serializable objects. So a HTMLElement can no longer be sent. You can send the string in the input, though. So replace the line with:
ipcRenderer.send('item:add', item.value);
You've got a great channel here. Thanks for all of the work, subscribed!
thanks @Brad for this awesome tutorial. Even after 2 years it is helping me :)
super clear understanding! Thanks Mr Brad!
Great video! Thanks a lot for sharing the knowledge. I am starting to love Electron, it's fairly easy to get the hang of.
Fantastic tutorial, very well paced, many thanks!
Thanks for this great video. Awesome explanation and easy to read code and understand
An invaluable set of bindings for me when using Vanilla JS is to bind "querySelector" and "querySelectorAll" to let's say a single underscore for querySelector and a double underscore for querySelectorAll:
let _ = document.querySelector.bind(document);
let __ = document.querySelectorAll.bind(document);
And then this:
document.querySelector('#item')...
Becomes:
_('#item')...
Awesome video Brad. Can you please do a video on how to run an Express App in Electron