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:
github.com/bradtraversy/image...
To package your app up for different platforms, you could use one of the following:
github.com/electron/electron-...
www.electronforge.io/
⭐ All Courses:
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Traversy Media On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / 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

Пікірлер: 250

  • @georgebatsiashvili4160
    @georgebatsiashvili4160 Жыл бұрын

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

  • @outsomnia

    @outsomnia

    Жыл бұрын

    mec daaxloebit mag dros daviwye swavla ;d

  • @jfimedia2638

    @jfimedia2638

    7 ай бұрын

    a familiar situation :)

  • @Alien-cr1zb

    @Alien-cr1zb

    4 ай бұрын

    Any advice second year cs and i feel lost

  • @zachjensz
    @zachjensz Жыл бұрын

    Finally I can use all my RAM

  • @akshaypendyala

    @akshaypendyala

    Жыл бұрын

    😂

  • @alirmaity1570

    @alirmaity1570

    Жыл бұрын

    Hahahahahaha

  • @web3media843

    @web3media843

    Жыл бұрын

    nice one hhhh

  • @andriyabu

    @andriyabu

    Жыл бұрын

    Cool 😎 just watch if any smoke coming ou

  • @agussatria7138

    @agussatria7138

    Жыл бұрын

    hhahaha, all tools that are forced to cross platform always end up badly in terms of memory resources. I used to try cordova just made a simple to-do-list app, I ran it on my phone and my phone got hot in just 5 minutes lol

  • @davidemiozzi8589
    @davidemiozzi8589 Жыл бұрын

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

  • @nanohedron
    @nanohedron Жыл бұрын

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

  • @amirnoorani5017
    @amirnoorani5017 Жыл бұрын

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

  • @qwerty74
    @qwerty74 Жыл бұрын

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

  • @kaxabekov1627
    @kaxabekov16273 ай бұрын

    Best tutor for programming on KZread!!!

  • @amhas_tech
    @amhas_tech9 ай бұрын

    The best Electron tutorial on youtube 🙌🙌

  • @TheMvarnell
    @TheMvarnell5 ай бұрын

    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!

  • @jeroen.herczeg
    @jeroen.herczeg2 ай бұрын

    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!

  • @alexpiano
    @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

  • @destinlee
    @destinlee Жыл бұрын

    Good times. Thanks as always Brad. Much love ☮

  • @reidainutilidade8743
    @reidainutilidade874311 ай бұрын

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

  • @iamcasted
    @iamcasted Жыл бұрын

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

  • @Gigusx

    @Gigusx

    Жыл бұрын

    Electron? Remember that Brad has a full course on the topic. Another amazing instructor that made a course on Electron is Stephen Grider!

  • @iamcasted

    @iamcasted

    Жыл бұрын

    @@Gigusx Thank you🥺

  • @rommelpetilo
    @rommelpetilo Жыл бұрын

    thank you Brad for this updated tutorial on electron!

  • @sahilverma_dev
    @sahilverma_dev Жыл бұрын

    I was planning to learn electorn and then you dropped this video. Thanks man

  • @mmvarma.p
    @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.

  • @PROTOTYPZ
    @PROTOTYPZ Жыл бұрын

    Thank you very much for a clear tutorial. I was pulling my hairs out looking for a solid tutorial.

  • @paulthomas1052
    @paulthomas1052 Жыл бұрын

    Great session, Very useful and informative at a great pace. Thanks.

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @kerrykreiter445
    @kerrykreiter445 Жыл бұрын

    One of if not the best Electron videos on KZread. Nice job Brad!

  • @seunolugbemi6394
    @seunolugbemi6394Ай бұрын

    Great tutorial. You're a very good teacher sir!

  • @sumitsarkarbusiness
    @sumitsarkarbusiness Жыл бұрын

    This is the best tutorial I could find ... thank you :-)

  • @itamarribeiro8865
    @itamarribeiro8865 Жыл бұрын

    I will save it on my list so I can follow it later, Tks Brad

  • @learninternetwithkelly8338
    @learninternetwithkelly8338 Жыл бұрын

    He is here again. Thanks Brad!

  • @MedyZeus
    @MedyZeus Жыл бұрын

    Never regret the day I subscribed to your channel dude.. thanks for the video

  • @bennyakaz
    @bennyakaz Жыл бұрын

    Ive been waiting for this. THANKS BRO

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @spacexnix
    @spacexnix5 ай бұрын

    It's amazing. Thank you for a good experience for a newbie

  • @Flamewheel2001
    @Flamewheel200111 ай бұрын

    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

  • @mrbuslov
    @mrbuslov Жыл бұрын

    Extremely awesome video, it's better, than docs. Thanks!

  • @sixtusushahemba9419
    @sixtusushahemba9419 Жыл бұрын

    Thanks for the course, it's very informative and helpful.

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @bobmonsour
    @bobmonsour3 ай бұрын

    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!

  • @thiagot7706
    @thiagot77069 ай бұрын

    I learned so much! Thank you

  • @erasmusmensah
    @erasmusmensah Жыл бұрын

    This content should be made a playlist

  • @dr.margulis7773
    @dr.margulis7773 Жыл бұрын

    Awesome, Brad! 👏👏👏👍

  • @dryoldcrabman6890
    @dryoldcrabman68907 ай бұрын

    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.

  • @jesterlw
    @jesterlw9 ай бұрын

    Awesome tutorial thank you very much

  • @MRAMetharam
    @MRAMetharam Жыл бұрын

    Another great video! Thanx!!! For those interested, to get rid of the menu on the About window... abountWin.setMenu(null);

  • @LarryMarkel
    @LarryMarkel Жыл бұрын

    Great video. Taught me a lot. Felt like Bill Burr was teaching me with your accent!

  • @rockNbrain
    @rockNbrain Жыл бұрын

    Great job dude !

  • @charbelsarkis3567
    @charbelsarkis3567 Жыл бұрын

    Something I've been waiting for. There were so many updates to electron

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @natreextv8516
    @natreextv851610 ай бұрын

    Thanks A LOT! Very helpfull video!

  • @subiebugeye02
    @subiebugeye02 Жыл бұрын

    @traversymedia Brad, I’ve lurked on KZread 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 KZread 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!

  • @idkcoder

    @idkcoder

    Жыл бұрын

    Bobo just use Udemy

  • @subiebugeye02

    @subiebugeye02

    Жыл бұрын

    @@idkcoder what?

  • @Oliver_twist00

    @Oliver_twist00

    11 ай бұрын

    @@subiebugeye02 if you want to program web apps learn c+ javascript is mainely for web apps and web pages, this stuff is really for advanced users in javascript to be able to code desktop apps without learning new languages

  • @rivgadeextras
    @rivgadeextras Жыл бұрын

    I love this guy fr

  • @aogunnaike
    @aogunnaike Жыл бұрын

    Thanks for this 😌

  • @janzenfaidiban
    @janzenfaidiban Жыл бұрын

    Thank you Brad...

  • @savimcgee7443
    @savimcgee744310 ай бұрын

    Always excellent.

  • @SandeepSingh-ye5fh
    @SandeepSingh-ye5fh Жыл бұрын

    Thanks Brad

  • @somethingcoolgoeshere
    @somethingcoolgoeshere Жыл бұрын

    Super cool video! Trying to learn how electron works so I can make my own Music player app

  • @darshanpagar1894

    @darshanpagar1894

    Жыл бұрын

    I am planning to make my own video player. Can you drop your github link

  • @karlkrasnowsky1393
    @karlkrasnowsky139315 күн бұрын

    Hey, thanks for the vid... always fun working with your tutorials... Something that threw me ... when setting the values on the width and height fields of the selected image form, the values were invisible (I thought it was failing) but turned out the text color was opaque for some reason, so setting style color to black to both inputs "fixed" it. May go back and determine the source of the problem and do a more systemic adjustment later, but love your teaching style. No BS and fundamental.

  • @rpaengineer5114
    @rpaengineer5114 Жыл бұрын

    Great tuto Mr brad 🔥🔥 Hope to make project based on TAURI framework 🙏🙏🙏

  • @valenciawalker6498
    @valenciawalker6498Ай бұрын

    Thank you

  • @abhishekpratap8784
    @abhishekpratap8784 Жыл бұрын

    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.

  • @overboostoverboost2541

    @overboostoverboost2541

    Жыл бұрын

    May I ask you to share the code with me for education purposes? Just curious :)

  • @abhishekpratap8784

    @abhishekpratap8784

    Жыл бұрын

    @@overboostoverboost2541 i tried sending 7 msgs and all got deleted

  • @ibrahimsfofanah6215
    @ibrahimsfofanah6215 Жыл бұрын

    Thank you 🙏

  • @repotranstech9614
    @repotranstech9614 Жыл бұрын

    Cool project,we also need an update on progressive web application.Its good for cross platform.

  • @collinsk8754
    @collinsk87547 ай бұрын

    Excellent! 👍👍

  • @flave11
    @flave11 Жыл бұрын

    Thank you for this video toaay

  • @antoniusaguswijaya9341
    @antoniusaguswijaya9341 Жыл бұрын

    man. Thank you!

  • @jagadeeshkj5561
    @jagadeeshkj5561 Жыл бұрын

    Cool background.

  • @christian-schubert
    @christian-schubert Жыл бұрын

    REALLY interesting video, thanks for that Brad! Don't know what I would give for a course on a Vanilla HTML/Javascript/CSS to Native Mobile App conversion [maybe using Cordova?]. The discontinuation of PhoneGap has left a huge gap in that respect (yes, I am WELL aware of its drawbacks, but I'm obviously NOT talking about creating one million plus downloads gaming apps here)

  • @erasmusmensah

    @erasmusmensah

    Жыл бұрын

    Try PWA

  • @christian-schubert

    @christian-schubert

    Жыл бұрын

    @@erasmusmensah Wish it were that simple. Most of the time, it's really a matter of prestige - there are clients out there who INSIST on a native app where a PWA would totally suffice

  • @javascriptes
    @javascriptes Жыл бұрын

    Another classic, I also want to say that there is nothing like development with bare js and nodejs :)

  • @pupfriend

    @pupfriend

    Жыл бұрын

    like raw-dogging in a whorehouse.

  • @yanaytsabary8297
    @yanaytsabary8297 Жыл бұрын

    Love your videos and thanks for sharing your knowledge. Will your updated Udemy course include working with React? I find that there's a big gap there as someone who's coming from React and trying to figure out how to use that With Electron. Also, when is it due to be updated?

  • @user-te2pe5qm8o
    @user-te2pe5qm8o Жыл бұрын

    thank you

  • @poetslayer
    @poetslayer Жыл бұрын

    Thx a lot

  • @haythamaldamen3578
    @haythamaldamen3578 Жыл бұрын

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

  • @glatocha
    @glatocha Жыл бұрын

    ahh, so much needed as those security changes in electron made many many tutorials not suitable

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @Arabian_Epileptic
    @Arabian_Epileptic Жыл бұрын

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

  • @emreaka3965

    @emreaka3965

    Жыл бұрын

    you can do that with c# which is faster and obviously a better choice to develop such applications except for web applications.Right now, You can develop cross-platform (web, macOS, windows, ios, android...) applications with html, css, c#. 😉

  • @nonametrackz7887

    @nonametrackz7887

    8 ай бұрын

    @@emreaka3965 with electron or do i need to use webview?

  • @Rlifshitz19
    @Rlifshitz19 Жыл бұрын

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

  • @selfmaster1123

    @selfmaster1123

    Жыл бұрын

    that would be amazing and helpful tool

  • @johnsunday3548
    @johnsunday3548 Жыл бұрын

    Great stuff mentor...pls do same with react js if possible with a DB...thnks...

  • @muadzrosli
    @muadzrosli Жыл бұрын

    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?

  • @indianolaguitarman
    @indianolaguitarman Жыл бұрын

    What steps must developers creating desktop apps with Electron use to make those accessible to screen reader software that blind folks use? Came across something recently to configure a device for recording wildlife and if it was a web page, could benefit from labels for text edit fields, radio buttons and checkboxes. But with electron, what is the best practice so that the app is then screen reader accessible?

  • @chetanjain4616
    @chetanjain4616 Жыл бұрын

    Great course as always Brad... But personally I am waiting for Tauri Crash Course, they have an amazing framework and I really want to give it a try

  • @AbhishekBM

    @AbhishekBM

    Жыл бұрын

    Check other channels. Brad is a web developer. It's unlikely he'll do a tutorial on a rust based framework

  • @chetanjain4616

    @chetanjain4616

    Жыл бұрын

    @@AbhishekBM Why not? He has done a tutorial on Rust and this is a tutorial on desktop application... I guess it depends on him but it wouldn't be new to his ecosystem

  • @mykus1000

    @mykus1000

    Жыл бұрын

    me too

  • @shomriddhosworld5587
    @shomriddhosworld5587 Жыл бұрын

    yes yes yes yes yes yes! finally

  • @danielvega646
    @danielvega646 Жыл бұрын

    How is your VS code theme called? Looks neato! And thanks a lot for the tutorial, helped me a lot to become familiar with Electron development.

  • @riteshbathwal2118
    @riteshbathwal2118 Жыл бұрын

    I have an electron App with UI built using react and a browserView loading a webpage. Now I want to make async communication from UI renderer process to webpage renderer process. Is it possible ? Even if I use ipcMain to handle ipcRenderer.invoke request from UI, I dont know how to send async request from main process to my browserView process, so that when it returns a response, I can then return response from main process to UI renderer process. Any help here would be appreciated much.

  • @kerem666
    @kerem666 Жыл бұрын

  • @BukkyOdunsi
    @BukkyOdunsi Жыл бұрын

    KZread needs to add a feature to clip favorite channels and videos

  • @etanheyman5009
    @etanheyman5009 Жыл бұрын

    Hey I just started working on a react electron app with typescript, but I'm having difficulty finding a guide/way to do it properly, would you be able to show a way for that? tried using a boilerplate but having problems connecting to the nodejs server.

  • @burd1129
    @burd1129 Жыл бұрын

    Great Video!

  • @karlkrasnowsky1393
    @karlkrasnowsky139315 күн бұрын

    making the height and width fields required on the form elements will forgo the need to check in the submit if they have values. Just saying.

  • @muhammadidrees6650
    @muhammadidrees6650 Жыл бұрын

    We need one project with Advance Angular please 😊, stay blessed Brad 🎉

  • @abhisekdas9976
    @abhisekdas9976 Жыл бұрын

    Please make a video on Tauri App which is an electron replacer.

  • @zulfikarbandhan2783
    @zulfikarbandhan2783 Жыл бұрын

    Could you please make a video on "Create a Desktop App with JavaScript & Tauri"? Thanks Brad for all the good works.

  • @manukyanq

    @manukyanq

    Жыл бұрын

    to the top!

  • @justfun591
    @justfun591 Жыл бұрын

    Electron JS uses chromium to render HTML CSS JavaScript so even if you only have a simple h1 tag it will be more than 100MB in size

  • @imbayi

    @imbayi

    Жыл бұрын

    How is this an issue in 2022? Developers like making a mountain out of a molehill. Today average computer users are just doing fine with PCs and Macs with 256GB of storage. We are no longer storing photos, music and movie files on our computers to worry so much about storage. This is the same argument most developers make against certain technologies arguing that technology X cannot support millions of users yet in the entire life they'll never build a product or service for millions of users. Every dev out there argues as if he is building the next Facebook.

  • @justfun591

    @justfun591

    Жыл бұрын

    @@imbayi Sir.... but if I just want a simple image resizer, for this, I am asked to download 100MBs software then I would definitely think that there should be some malware/spyware/resource consumer program also running with that software

  • @ankitabannore8014
    @ankitabannore80146 ай бұрын

    Thanks for this one! I am creating one desktop application using electron now I want to connect it to the database. Can you tell me anything that I need to do?

  • @wadhajable
    @wadhajable Жыл бұрын

    Thanks sir In this app Can I use RPC (remote procedure call) as in web apps

  • @SodiqOlaniyi
    @SodiqOlaniyi Жыл бұрын

    I was thinking of searching this then this video popped up 🤣

  • @Imaginativeone_DF
    @Imaginativeone_DF Жыл бұрын

    When will the course-update be available?

  • @raqibahmad
    @raqibahmad9 ай бұрын

    can we put an entire react js app inside the rendered folder to make it work on the electron platform ?

  • @kennedychidi7012
    @kennedychidi7012 Жыл бұрын

    I'm done just watching, is time I follow up and start building... I'll be back to testify.

  • @sourabhshukla8625
    @sourabhshukla8625 Жыл бұрын

    I was looking for tauri tutorial

  • @thongnguyen5024
    @thongnguyen5024 Жыл бұрын

    Your index.html (on GitHub) is missing closing tag of button div (line 57).

  • @BSenta
    @BSenta Жыл бұрын

    It doesn't make sense to worry about memory leaks when your application closes. Even in C++ if you have forgot to free stuff in the heap when the whole application ends all of the memory will be claimed back by the OS. It doesn't make sense to set that window to null when your closing your app. Unless electron apps don't 'close' and just run in the background like chrome does even when you close all the windows - which would be stupid if it did this

  • @karlkrasnowsky1393
    @karlkrasnowsky139315 күн бұрын

    Oh, and early implementation of the "about" window is generating a new instance of every selection. If not addressed in later in this tutorial, and easy way to prevent this?

  • @manukyanq
    @manukyanq Жыл бұрын

    Please make video about Tauri framework

  • @maacpiash
    @maacpiash Жыл бұрын

    Can you make a crash course on Solid.js please?

  • @mamupelu565
    @mamupelu565 Жыл бұрын

    Is it still worth it learning angular now? I want to get in the IT market asap, Ive been 3 years as a trainee but doing support stuff

  • @KulturanCov
    @KulturanCov10 күн бұрын

    Great video! What is your VS Code Color Theme? :D Looks like GitHub Darker, but the outlines are less prominent with your theme.

  • @ArmandoBN497
    @ArmandoBN497 Жыл бұрын

    i need help understading how to package it on a mac, i was able to build the relase folder and dmg file after it but im lost after that on how to get the app actuly installed on my laptop

  • @tabdig
    @tabdig Жыл бұрын

    Can you make an tutrial about Pnpm?

  • @user-vk8kt3tp1g

    @user-vk8kt3tp1g

    Жыл бұрын

    Helpline📲 Questions can come in⬆️

  • @sesu6743
    @sesu6743 Жыл бұрын

    Where can i get the electron course?

Келесі