Build an Electron App in Under 60 Minutes

[@jasonacheampong8748]

This is one of the best coding tutorials I have ever seen PERIOD. He explains the topic very well and prevents any confusion.

[@hayf0_bs]

on these simple ones, basically he's just using official documentation. but yea, sometimes i fount better to listen some things

[@mattural20]

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.

[@BeastieKarlbovsky]

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

[@sync3217]

I was thinking about the same thing too. And if we publish the app it will be good using MongoDB or SQL dbs

[@Altanis1]

fs.writeFile('./file.json', JSON.stringify(whatever_the_input_was), err => { if (err) throw err; // Successfully written to file }

[@davidaffran7447]

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

[@ErnestGWilsonII]

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!

[@TraversyMedia]

LOL that is awesome. TV channel, that would be nice :)

[@javierpacareu]

Bend the knee in front of your god Traversy

[@muhammadfarooqi]

Have you every tried too? brow!!!!

[@mac8867]

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 } } );

[@parsonsmarcus]

This same preference has to be set in the creation of the addWindow in order for "require" to work correctly. Thanks, Robb!

[@willhamilton9042]

Thanks!!!

[@israellucena926]

"addWindow = new BrowserWindow({ width: 300, height: 200, title: 'Add Shopping List Item', webPreferences: {nodeIntegration: true} });"

[@__VAL__]

@@israellucena926 Thank you

[@r2_rho]

This was incredibly helpful, thank you Robb!

[@MicroCheese64]

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.

[@mitlandir5761]

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!

[@ErikSjaastad]

So glad this was my intro to Electron! Saturday morning well spent!

[@isururanaweera1191]

How is your electron knowledge now?

[@mahakileach9223]

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

[@l.b.7114]

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

[@static2601]

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

[@Zeghabioussama]

i faced a problem when i write const electron = require('electron') in script tag

[@travisbarton4288]

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

[@Fanoflix]

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

[@tempez1918]

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!

[@maxeminem777]

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

[@bank_coder]

Best Instructor Alive ..... Your Passion Makes Us To Easily Fulfill And Follow Our Dreams ! Thanks Brad

[@davidconnelly]

The volume and quality of work that you're producing is staggering! My mind is blown.

[@KellenChase]

... 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!

[@dericbytes]

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.

[@muneebahmad8772]

electron is very handy and good for desktop applications thank you sir & always thumbs up for Traversy media

[@svetoslavasenov5609]

This is the best electron tutorial I have seen. Can't wait for the next one with the database access.

[@SetszawA]

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.

[@lukehero]

Amazing! I just learnt everything necessary from this one video. Went from not knowing anything about it to building my complete app. Thank you!

[@raghav9o9]

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

[@das_evoli]

I'm shocked how easy this is. Thank you for this presentation

[@naveenraina3145]

Wow. This is the first electron video that gave me so much insight of electronjs. Great work.

[@the2cguy]

If you still get an error "require is not defined" even with nodeIntegration, use : webPreferences: { nodeIntegration: true, contextIsolation: false }

[@Ur_Local_Leia]

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.

[@akashdalvi5419]

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.

[@emanuelmateusinacio2850]

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!

[@pembatamang8233]

great work man. I am an android dev with some exp with js. Just started electron today and this tutorial went smooth af thanks!!

[@SRG-Learn-Code]

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.

[@khanhsb15]

Thanks Brad. The lesson is very short and easy to understand so that I can easily access the electron app

[@shooorov]

if you're using 'electron >= version 12' use new BrowserWindow({ webPreferences:{ nodeIntegration:true, contextIsolation: false } });

[@ozgunsenyuva]

Thank you, this was what I am looking for.

[@josepservat211]

Even in 2019, this is still a great tutorial :)

[@1045geo]

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!

[@danielk.3017]

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.

[@leomacherla]

For anyone getting errors at 39:53, in the Clear Items click event, remove the .webContents from mainWindow.webContents.send('item:clear')

[@ayushwebmaster]

Wow 175 dislikes, no one should dislike this video, period! This is amazing, keep up the good work mate!

[@dougiehawes916]

Crash learning electron for an upcoming interview. This is just what I need.

[@weejohntee]

good luck!

[@zone66]

this is my first programmers-youtube-channel abonnement :) such a fun tutorial, was nice to follow up.

[@AmienPhillips]

This is brilliant thank you! I accidentally spent an hour watching it without even intending to

[@1tuan1]

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!

[@amrullokhuja]

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(); }

[@anyname7620]

Very useful thanks!

[@PineappleQuesadillas]

Fantastic tutorial! Especially loved the attention to detail and getting the small stuff right.

[@JD-hq1kn]

Brad... Your channel is one of the best thing I discovered in my life

[@WtfBronson]

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!

[@SethuSenthil]

This guy always knows what i'm planning to learn next! Like how?!!

[@samdavidpaul]

Because we computer engineers walk through the same route.

[@LeoPacheco87]

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!

[@achuziachristopher4432]

Enrolled for your electron course on udemy. You are the very best Brad, You are awesome

[@AntonioRibeiro-qs3fy]

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

[@pcgs_]

Brad, you're the best, really!!! I'm learning so much with your tutorials. Congratulations!

[@redb100]

Love the animated intro Brad, it looks awesome!

[@mhdz10]

Dude you really have a natural talent to explain things. Thanks! =)

[@yorl418]

it dosen't work for me. I retry to copy your code to see if my code is the same but your code don't work too. When I click on add item the window don't hide and nothing apparead in my shopping list I think it's an update that crash this.

[@sebastianiuga3020]

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

[@anthonyradin7166]

nice thank you

[@samceriousting2653]

thanks !

[@harshuldesai8901]

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);

[@enuske]

53:46 "..Ok, its going through some crap..." I loled. Great tutorial!!!

[@shishirkumarsky]

This tutorials should be must watch. I followed this tutorial in linux(Ubuntu 16.04), everything works fine!

[@paulsantiagovaldez5312]

I'm having a problem in 39:00, i cant display the items when i click add item. How can i fix it? Thanks for the response

[@dimaskhrisna3059]

DId you get solution bro? bcs i got the same thing

[@muhammadaousaja6732]

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.

[@armenkesablyan1340]

Well done my friend. Best ElectronJS Video on youtube.

[@embedyt]

dude. only one midroll? this deserves more. Feelsbadman

[@kapilpatel9379]

very nicely described, I recommend this to anyone new with electron

[@brigetokai3756]

Hi Traversy media please can you do a video tutorial on electron app with mysql where user submits a form from frontend it get inserts insert into tables.I am really finding difficulties with eelctron and mysql database querying , update and deleteing please help me witha video of that

[@Gruximillian]

Hi Brad, thanks for this great tutorial! I have one question, at 22:54, you typed .on('close') for the addWidnow garbage collection event, but for the main window you used .on('closed'). Is this a typo or there are really two different events, 'closed' and 'close'?

[@abubakr4081]

At 39:10, if you dont get the results in your mainWindow after clicking submit in the addWindow; goto mainWindow declaration- mainWindow = new BrowserWindow({ webPreferences: { nodeIntergration: true }}); same issue as 31:55, newer version of electron nodeIntegration default value is switched from true to false

[@subodh.r4835]

I'm getting an Uncaught error saying 'require not defined' in the step at 31:56. The internet says to install and use Browserify but it's leading to more errors. Please help

[@vikarnsinghSpySinER]

Same error I am getting.. can anyone help

[@KoDesign0]

Thank you so much, this really helped me out to begin production. Easy and straight forward. Wish i could like a video twice!

[@TheSweatCatcher09]

Thank you for the detailed tutorial, helped me a lot a novice on electron..

[@amey7064]

Question: If I am adding a event listener for 'dblclick' on which is the list container, how does JavaScript know element to remove?

[@annekinmeyburgh8797]

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.

[@nitishdhiman6616]

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.

[@rodyjanegama2552]

Hi Brad, Thanks a lot for this tutorial. I am very new to NodeJS and I will convert all my desktop applications to node and use mySQL to store data. Although I do understand all of your code, I am having one problem which is to list the item on the mainWindow.html. Nothing happens when I click the Add button and I followed all your instructions. Would know what might be reason? Thanks

[@NiveythaWaran]

Hello, I'm having the same issue. Did you ever figure this out? (I know it's been ages since the comment)

[@thanatosor]

This is really what Electron Tutorial should look like ..

[@irinap.2276]

Amazing tutorial as usual. Thank you, Brad!

[@Token-p1s]

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

[@hunl.919]

Is anyone having trouble with getting past the ipcRenderer around 38:00? I don't know if it's my ipcMain that's not sending or ipcRenderer not receiving in the mainWindow.

[@maximilianwolf632]

Works for me

[@sebaperalta2001]

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

[@rickelmonoggin]

Very useful for getting started with Electron.

[@amiralmusawi9030]

You've got a great channel here. Thanks for all of the work, subscribed!

[@daniellujan9129]

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.

[@luismelo4131]

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

[@scotdotwtf]

amazing tutorial, actually learned a lot from this.

[@BrunoMateusvvp]

Awesome tutorial, and I learned much more about electron in this vid than reading electrons' docs. Thanks!

[@rupeshchandramohanty416]

Thank you for this amazing tutorial Brad! It was fun

[@andrewtechful]

Great video! Thanks a lot for sharing the knowledge. I am starting to love Electron, it's fairly easy to get the hang of.

[@Welcometomyjourney20]

Like it before even watch it! Cuz Traversy is always trusted!

[@dipusreedhar5717]

Great Tutorial!!!! Crystal clear !!!! Best of its kind!!!

[@nixon6216]

it wont work if you try it tho

[@dipusreedhar5717]

@@nixon6216 it worked for me... Done some changes

[@Noisecooore]

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')

[@Mrnonamsss]

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.

[@firelordkushroll]

this is good shizzle. thank you for this video. got a foundation made, fully working, and with bootstrap. many thanks /bow

[@janagap3538]

Fantastic channel after the new Boston! Love this channel

[@knowah.]

Brad is in an entirely different league than New Boston. Bucky was a good teacher in that he was easy/interesting to follow, not the best at correctly covering material. Brad is good at both. Bucky's whole philosophy was 'why bother learning why/how it works if it works.'

[@fleischer444]

What keyboard do you use? Love the sound!!

[@wondercreator8244]

I think mechanical keyboard

[@mmogib]

Thank you brother I do appreciate and respect what you do. Keep up the good work. You're making a difference in this wolrd.

[@sahandjavid8755]

Thank you for this. Explaining important stuff through simple example, that was just perfect.

[@timbarrett4580]

This was incredibly informative and helpful! It's so cool that I can make these now. Thank you!

[@Funfridaywork]

Thank you, finally I will able to start working on electron.

[@themarksmith]

Love this guys content - this is one youtuber I would donate to on patreon!