Build an Electron App in Under 60 Minutes

FULL 6 HOUR COURSE:

CODE: Code for this project
PACKAGER TUTORIAL PAGE:
ICON PAGE:

BECOME A PATRON: Show support & get perks!

ONE TIME DONATIONS:

COURSES & MORE INFO:

FOLLOW TRAVERSY MEDIA:

NEED WEB HOSTING?

NEW DISCORD CHAT SERVER:

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

[mattural]

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.

[jasonacheampong]

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

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

[MicroCheese]

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.

[davidaffran]

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

[mac]

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

[mitlandir]

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!

[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 <li> item <li> in HTML) and then append the <li> to the <ul>.

What he does is the exact same thing, but just 1 line longer lol XD

[l.b.]

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

[mahakileach]

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

[static]

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

[travisbarton]

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

[tempez]

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!

[davidconnelly]

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

[maxeminem]

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

[svetoslavasenov]

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

[bank_coder]

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

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