Create a Desktop App With JavaScript & Electron - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Web Development Traversy Media Video: 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:
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

Published: Wednesday, October 19, 2022 1:35 PM
Category: Web Development Traversy Media

11 Views

Related Videos

An Intro To Electron - Desktop Apps with JavaScript

by Best Webhosting Added 4 years ago 74 Views / 0 Likes

In this video we will just start to scratch the surface with Electron which is a library to create desktop applications using only HTML, CSS and JavaScript. We will use code from the quick start and create a very simple system info desktop app Quick Start Repo: https://github.com/electron/electron-quick-start SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia htt
New Course Alert - Electron From Scratch: Desktop Apps With JavaScript

by Best Webhosting Added 3 years ago 48 Views / 0 Likes

5 DAY PROMO - $9.99 https://www.udemy.com/course/electron-from-scratch/?couponCode=DISCOUNT5DAY 30 DAY PROMO - $12.99 https://www.udemy.com/course/electron-from-scratch/?couponCode=DISCOUNT30DAY
Create Desktop Apps With Web Technologies - NW.js

by Best Webhosting Added 4 years ago 72 Views / 0 Likes

In this video I will show you how to use the NW SDK (Node-Webkit) to create a desktop app with web technologies (HTML/CSS/JS, React, Node, etc). We will take a vanilla JS app and create a desktop version of it in about 10 minutes. Code: https://github.com/bradtraversy/breakout_desktop_nw Vanilla Web Projects Course: (FEBRUARY1399) https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75 • Become a Patron: Sh
Build an Electron App in Under 60 Minutes

by Best Webhosting Added 4 years ago 80 Views / 0 Likes

In this video we will build a desktop application using Electron.js which allows us to build desktop apps using only JavaScript. We will build a minimal shopping list app with a custom menu and multiple windows and implement Materialize CSS for styling. We will also publish the app to a Windows .exe file using the Electron Packager. CODE: Code for this project https://github.com/bradtraversy/electronshoppinglist PACKAGER TUTORIAL PAGE: https://www.chr
How to Post to Instagram from Desktop on PC or Mac

by Best Webhosting Added 3 years ago 38 Views / 0 Likes

In today’s video, we’ll learn how to post to Instagram from desktop on PC or Mac. Blog post: https://www.elegantthemes.com/blog/marketing/how-to-post-to-instagram-from-desktop-on-pc-or-mac •️ Learn more about Divi: https://www.elegantthemes.com/gallery/divi • Like us on Facebook: https://www.facebook.com/elegantthemes/ #Instagram #Marketing #ElegantThemes
How to Set Up Email On Your Windows Desktop

by Best Webhosting Added 4 years ago 99 Views / 0 Likes

GoDaddy Guide Joplin walks you through how to set up your Office 365 email account on your Windows desktop using Outlook 2016. In this video, we’ll show you: - How to add your email account to your Windows desktop - How to use this account everywhere on your device or not - How to access your inbox directly by clicking on the Outlook application Check out more from this course here: http://go.me/SetupEmail Subscribe to GoDaddy: http://bit.ly/GoDaddy-S
The 9 Best AI Art Generators (Desktop and Mobile)

by Best Webhosting Added 12 months ago 16 Views / 0 Likes

I tested out a wide range of AI art generators to find out which ones are best and worth your time. From free and paid, to mobile and desktop. Let's get into the best ai art generator apps! My top pic, Jasper AI Art ➡ https://davidutke.com/ai AI art is pretty wild and fun. Most of the generators I used struggled with hands, and creating people. But overall if you're looking to create an avatar for social media or some sort of futuristic landscape you
Desktop GUI App With Python & Tkinter

by Best Webhosting Added 4 years ago 82 Views / 0 Likes

In this video we will build a CRUD GUI app with Python, the Tkinter library and Sqlite3 Sponsor: Linode Cloud Hosting Get $20 Free by visiting https://www.linode.com/traversy Code: https://github.com/bradtraversy/part_manager • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/t
Setting Up Email On Your Mac Desktop

by Best Webhosting Added 4 years ago 89 Views / 0 Likes

GoDaddy Guide Joplin walks you through how to set up your Office 365 email account on your Mac desktop using Outlook 2016. In this video, we’ll cover: - How to find the Outlook 2016 app on your desktop - The steps to add a new account to your Outlook app on your desktop Check out more from this course here: http://go.me/SetupEmail Subscribe to GoDaddy: http://bit.ly/GoDaddy-Subscribe GoDaddy links: https://www.godaddy.com https://www.godaddy.com/how-t
How to Match Your Desktop & Mobile Menu Bar with Divi

by Best Webhosting Added 4 years ago 90 Views / 0 Likes

In today’s Divi post, we’re going to share a quick tip that will help you enhance your mobile designs. We all know that your design on mobile is just as important as it is on desktop, but because of some standard settings within Divi, not all changes you make in the Theme Customizer look the same on Desktop as they do on mobile. Read the article here: https://www.elegantthemes.com/blog/divi-resources/how-to-match-your-desktop-mobile-menu-bar-with-divi
WD My Book 4TB Desktop External Drive Review

by Best Webhosting Added 4 years ago 89 Views / 0 Likes

WD My Book 4TB Desktop External Drive Review More Tech Videos & Reviews: https://goo.gl/cDfoZY The Western Digital My Book is one of the best external desktop hard drive experiences I think I've had in a long time. It is reliable, whisper quiet and works well as a backup solution and working hard drive for my video and photography files as well as my graphic design work. This external drive was extremely affordable and has worked out well for me, and
How to View the Mobile Version of WordPress Sites from Desktop

by Best Webhosting Added 4 years ago 77 Views / 0 Likes

Are you wanting to preview the mobile version of your WordPress site on your desktop? Previewing the mobile layout helps you understand how your website looks on mobile devices for your users while you have the editing capabilities of your desktop computer. In this video, we'll show you two simple ways to easily preview your site's mobile layout in WordPress. This video brought to you by RafflePress, the best WordPress giveaway plugin available, take