Create a Desktop App With JavaScript & Electron

Back end — 22/10/2022 · 30 Comments



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

💻 Code:
https://github.com/bradtraversy/image-resizer-electron

To package your app up for different platforms, you could use one of the following:
https://github.com/electron/electron-packager
https://www.electronforge.io/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

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

30 Comments

  1. Thank you for your work did you consider Neutralinojs as much smaller and much faster than electron because it uses chrome library

  3. I don't mean to disrespect, but why are we still using electron in the holy year of 2022? There are plenty more options that use simple html, css and js and are easy to learn and easier to run performance wise. I would personally promote NW.js and Tauri more then Electron. You don't have a Tauri course and the NW.js one is 2 years old. Keep it up though, you were one of the first channels I watched when I started learning to program and I appreciate your help.

  4. Can you do a video on building a Youtube to MP3 Converter? All the ones online are sketchy. It would be awesome if we could build our own. Love the video!

  7. Thanks a ton!! You're awesome as always.
    Can you do a short video on how to make a basic html css javascript website GDPR compliant? I made a website for a client in UK and have Google analytics tracking turned on. How do I apply a cookie consent system on the website?

  9. Has anyone gotten a 'mainWindow is not defined' message' after bringing in shell and creating the 'Open dest folder' and 'Send success to render'? I can see that the resized image is sent to my folder but the message and location do not pop up. This is a t about 1:05 of this video. At this point my error message stops working as well (when I test by uploading non-image). Any suggests would be welcomed thanks.

  14. Year 2000:
    -You had HTA which were HTML container with full system access. Ran HTML+ VB Script
    -VB6 – desktop application development IDE which produces native code, can do what the system is capable of.

    2022: lets make desktop apps using Javascript and it will consume only 1GB of memory.

  15. Hi Brad. I was wondering, how do you get the css file used in this electron app? Since it is Tailwind css, did you design elsewhere and treeshaking the classes first or that is full css in Tailwind?

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

Leave a Reply

© 2023 53GB