Create a Desktop App With JavaScript & Electron

In this video, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.

💻 Code:

To package your app up for different platforms, you could use one of the following:

⭐ All Courses:

💖 Show Support

👇 Follow Traversy Media On Social Media:

Timestamps:
0:00 - Intro
3:05 - Resources
4:48 - Setup & Install Dependencies
8:08 - Create Main Window
12:45 - Common Boilerplate
15:53 - Show Devtools
18:10 - Using Electronmon
18:54 - Adding the UI Theme
21:26 - Content Security Policy
23:00 - Menu Customization
27:36 - Menu Roles
30:00 - About Window
31:53 - Start Renderer JS / Load Image
38:15 - Get Original Dimensions
39:40 - Using Preload
44:28 - Show Output Path
46:43 - Toastify Alerts
50:58 - Form Submit Handler
53:54 - IPC Renderer (Send)
56:44 - IPC Main (Recieve)
59:35 - Resize Image
1:05:32 - Catch Message In Renderer
1:07:32 - Make mainWindow Global
1:10:22 - Test Production Mode

[georgebatsiashvili]

Was 2017 when i first started learning programming and this channel was first in my list. After 5 years in my career as senior dev still coming back to this to learn new stuff. thank u so much ^^

[davidemiozzi]

spent a whole day trying to get things going, came here, and now everything is illuminated. Hands down the best programming tutorials around!

[nanohedron]

Thanks Brad. I don't think I'll ever be able to repay you for all the great training.

[mmvarma.p]

Dude, I am literally checking for latest Electron tutorial. Many people comment about this, but never thought it will happen to me. Anyway thanks buddy.

[kaxabekov]

Best tutor for programming on YouTube!!!

[amirnoorani]

This week I was working on Electron and suddenly I saw your video notification on my phone. As always thank you Traversy

[qwerty]

Absolutely perfect timing. I wanted to do something very close to this.

[MRAMetharam]

Another great video! Thanx!!!

For those interested, to get rid of the menu on the About window...

abountWin.setMenu(null);

[jeroen.herczeg]

Thank you for the tutorial!
I like that you focus on electron and not on adding a front-end framework in the mix.
It made the way you explained the main process, renderer and IPC communication very clear!

[Konslufius]

One of those products that aged like the finest milk in terms of tutorials. I'm glad that this one is still relevant <3

[subiebugeye]

@traversymedia

Brad, I’ve lurked on YouTube and other sites for a while as I am trying to learn JavaScript for a upcoming Bootcamp and I’ve been stressing because I keep getting stuck in trying one resource and moving to the next as it feels too slow. I watched some of your JavaScript YouTube videos and am completely impressed with how you structure the learning topic and your tone that you teach in. You make beginners feel welcomed and hopeful. I just purchased two of your courses on Udemy and want to thank you for the top tier content and hope you are getting enough support to continue producing such high quality material. Please, if you don’t do it already, start a podcast man. I, among many others, would love to dive into that content with you. Cheers my friend!

[abhishekpratap]

Today i made a screen recorder using electron, I wish this video would have come a few days earlier. Would have saved a lot of time.

[iamcasted]

this is really what i was searching information for atleast a month now, thank you

[bobmonsour]

I went through this slowly and carefully...took several hours so that I could digest things...especially the ipc stuff. It makes a lot more sense now. I do hope you'll update your udemy course on this some day. That said, I know enough to be dangerous now and I really like what can be done with Electron. Thanks!

[TheMvarnell]

Excellent work explaining this. I got a lot out of seeing how it all worked, and coding along. Really appreciate the time you took to make it!

[dryoldcrabman]

This was super useful! Thank you so much! What would be super helpful is showing how to set up a webpack in the renderer. And show how to set up a framework in the rednerer.

[alexpiano]

Thanks for this one, I have never tried electronjs, it was something I was kinda avoiding but I find it super interesting. And also it refreshes a lot the knowledge of node usage. Don't hesitate to make more ;)
All the best from Barcelona

[Flamewheel]

I just finished your react udemy course and then i was researching a a problem i wanted to solve and this youtube video was exactly concept i was looking for

[Arabian_Abomination]

Html/css/js can be used now to build pretty much any software, server side, front end, even mobile apps and of course desktop apps with electron. No other stack can compete hence why JS is the #1 programming language :)

[reidainutilidade]

Thank you for this video. I watch from begin to end, and I was not have any problem during development.