Build a Desktop App with Electron… But Should You?

A complete beginner’s tutorial for Electron JS ⚡ along with an overview of its pros and cons. In about 10 minutes, we build a desktop screen recorder from scratch with JavaScript that is installable on Mac, Windows, or Linux.

Full Electron Tutorial: https://fireship.io/lessons/electron-screen-recorder-project-tutorial
Source Code: https://github.com/fireship-io/223-electron-screen-recorder
Electron Forge: https://www.electronforge.io/

#tutorial #javascript #electron

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.

My VS Code Theme

– Atom One Dark
– vscode-icons
– Fira Code Font

50 Comments

  1. Cloud Rivas on December 18, 2020 at 9:55 pm

    The fact that you put Latarian Milton in this video is why I love this channel.

  2. Pranav Shivashankaran on December 18, 2020 at 9:55 pm

    I am not getting the pop as specified in timeline 7:11 in windows 10

  3. Bas Bakker on December 18, 2020 at 9:57 pm

    "But should you"
    No.

    Yup, that’s all

  4. Alex Dobson on December 18, 2020 at 9:59 pm

    Great tutorial, love the snappy approach… too much burble in most others. Sadly in Mac Catalina the app only records the desktop, mouse and the electron app itself … all other app windows aren’t visible in the output. The content is still awesome (despite Mac OS & API changes). Thank you!

  5. random User on December 18, 2020 at 10:00 pm

    It does not work

  6. Sergio Campbell on December 18, 2020 at 10:00 pm

    I got a question. When a put "videoOptionsMenu.popup();" I click in the button, but nothing hapens… do not shows the sources 🙁

  7. ARGmaster Play on December 18, 2020 at 10:02 pm

    +1

  8. Ian Chui on December 18, 2020 at 10:03 pm

    bro wtf! Winston Churchill is the man

  9. Simon Hallin on December 18, 2020 at 10:06 pm

    OBS: Imma head out
    Fraps: Wait on me

  10. Pridify Gaming on December 18, 2020 at 10:06 pm

    "These drawbacks don’t matter to most developers" — and that’s exactly where the problem lies. Huge app size and high CPU+RAM usage slows down low- to mid-end computers significantly, especially when Chrome is also open with 20+ tabs. Remember the old days when optimization was at the pinnacle of development, and games like Crash Bandicoot and old NES/SNES games used clever tricks and optimizations to make the code run fast? Yeah, now it’s super easy to ship a "Hello World" app with 50+ MB file size and 50+ MB RAM usage on all platforms…

  11. Elí Benson Vasquez Hdz on December 18, 2020 at 10:08 pm

    Can someone point on how to add the sound capture functionality to it?

  12. kurokurovich on December 18, 2020 at 10:08 pm

    javafx and fast application in the same phrase

  13. Amir Noorani on December 18, 2020 at 10:08 pm

    thanks alot Jeff! btw in 2020 version of electron you need to add this this permission to your already defined BrowserWindow otherwise your app won’t work.

    const myWindow = new BrowserWindow({
    webPreferences: {
    enableRemoteModule: true
    }
    });

  14. hello world on December 18, 2020 at 10:10 pm

    with => func you can do => ({}) to just return object no need to do => { return {}} kinda slick

  15. Indian Technician on December 18, 2020 at 10:11 pm

    Electron vs WASM?

  16. Sergey Ten on December 18, 2020 at 10:11 pm

    Amazing tutorial. Thank you!

  17. zBugi on December 18, 2020 at 10:14 pm

    I tried to follow his code and I am the onlyone missing out the "enableRemoteModule: true"

  18. Edward Hoffenheim on December 18, 2020 at 10:16 pm

    Thank you for getting to the point with this. I like how you do tutorials.

  19. Pridify Gaming on December 18, 2020 at 10:17 pm

    "These drawbacks don’t matter to most developers" + "the only thing that matters is that you build an awesome User Experience (UX)" = paradox! you can’t build an awesome UX if it hogs resources and slows down your computer…

  20. Ksanbor Mukhim on December 18, 2020 at 10:18 pm

    i cannot run ‘ npx create-electron-app ‘
    this is the output i got on the treminal
    npm ERR! code ENOLOCAL
    npm ERR! Could not install from "KamiAppDataRoamingnpm-cache_npx2604" as it does not contain a package.json file.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersEro Yato KamiAppDataRoamingnpm-cache_logs2020-10-04T09_28_18_974Z-debug.log
    Install for [ ‘create-electron-app@latest’ ] failed with code 1

  21. Lasindu Nuwanga on December 18, 2020 at 10:19 pm

    Cool
    I love to a create a desktop with CSS and HTML
    That would be really really awesome 🤩🤩🤩

  22. 서진석 on December 18, 2020 at 10:19 pm

    For those who have issue about "TypeError" Cannot deconstruct….. require remote as it is undefined , I found a solution here
    https://stackoverflow.com/questions/63901266/electron-js-cannot-destructure-property-browserwindow-of-require-remot

    You need to add enableRemoteModule: true, to WebPreference in index.js

  23. blez on December 18, 2020 at 10:23 pm

    "333,333" views eeeeeeevil

  24. Michael Uvarov on December 18, 2020 at 10:23 pm

    You should, if you already have a web version.

  25. The Castiel on December 18, 2020 at 10:24 pm

    Can I run it on my i9-10900k machine with RTX 3090?

  26. Coleton Gorecke on December 18, 2020 at 10:24 pm

    Man, just stumbled on your channel. I really like your style, and you’re quick, thorough, and very intelligent. Looking forward to using you as a resource from now on with my development journey. Keep it up!

  27. Alpha Delta on December 18, 2020 at 10:24 pm

    One of my favorite Churchill quotes

  28. Saif Coder on December 18, 2020 at 10:26 pm

    I hope that you make more expert projects

  29. Abbas on December 18, 2020 at 10:27 pm

    That Winston Churchill quote is why I decided to subscribe to your channel

  30. LoopyELBARTO on December 18, 2020 at 10:27 pm

    For those who are having trouble getting selectSource to work with the current version of Electron, add this to your
    index.js
    webPreferences: {
    enableRemoteModule: true
    }

  31. Ankush Chauhan on December 18, 2020 at 10:29 pm

    Do we need to have chromium to render this application becoz I make this entire app and able to click on button and nothing is to happen

  32. Jad Alhamwi on December 18, 2020 at 10:29 pm

    Is it possible to make a desktop application using c++ and electron?

  33. J N on December 18, 2020 at 10:30 pm

    SPEEDRUN

  34. Orr Burgel on December 18, 2020 at 10:35 pm

    Is there any video explaining what is the difference between electron-forge and all the other?

  35. Midas Gold on December 18, 2020 at 10:36 pm

    For those in 2020 watching this tutorial with it saying that Remote is undefined, add this line to the WebPreferences: { nodeIntegration: true, enableRemoteModule : true}

  36. Mallidi Tarun Reddy on December 18, 2020 at 10:36 pm

    Hello Sensei,
    Actually, The Tutorial is extraordinary. But due to some modification in The Electron module, the exact follow up in the video is hadn’t helped me. I tried reading docs and figure it out myself. But as I’m a naive Developer, I was unable to figure it out myself. Please consider the request and respond. Peace.

  37. TimeSpaceBeing on December 18, 2020 at 10:37 pm

    I just consider this to be lazy. Use JavaFx it isn’t hard, it’s faster, lightweight and runs everywhere

  38. PlayGame on December 18, 2020 at 10:37 pm

    nice video..

  39. Abdulsalam Almahdi on December 18, 2020 at 10:41 pm

    when I did npm start I got an error:

    node_modules/electron/dist/electron: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory
    npm ERR! code ELIFECYCLE
    npm ERR! syscall spawn
    npm ERR! file sh
    npm ERR! errno ENOENT
    npm ERR! uccle_art_school@1.0.0 start: `electron-forge start`
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the uccle_art_school@1.0.0 start script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

  40. Ömer Faruk Konca on December 18, 2020 at 10:41 pm

    windowsofislam.com

  41. 6udo on December 18, 2020 at 10:43 pm

    Didnt take Churchill to be a big electron guy but hey, u learn something new everyday

  42. Overcomer Idemudia on December 18, 2020 at 10:43 pm

    This is fucking awesome!!! Who makes an 11mins video on how to build a fully functional app? Thanks a bundle!!!

  43. Yeah Yall on December 18, 2020 at 10:44 pm

    The source code link in the desc is not working, can someone send me the link?

  44. Jhon Badalof on December 18, 2020 at 10:45 pm

    Now if you would just pause and say why you do each step…. New people would understand.

  45. Altair Bueno on December 18, 2020 at 10:46 pm

    Quick note: no, you shouldn’t

  46. Eslam Al.Sheikh on December 18, 2020 at 10:47 pm

    You are saying that end users don’t care which tools were used to build there app. But of course they will care about performance. Is it resource intensive for developers or end users or both?

  47. Henryk Kaufman on December 18, 2020 at 10:48 pm

    You know your framework is fked if you need to meddle with processes and async calls to build the simplest popup list.

  48. Ates on December 18, 2020 at 10:49 pm

    worst tutorial ive seen in a long time. Rushing trough things without any explanation. That´s not a beginner guide

  49. Cat4-7 on December 18, 2020 at 10:50 pm

    𝕴 𝖑𝖔𝖛𝖊 𝖞𝖔𝖚𝖗 𝖈𝖍𝖆𝖓𝖓𝖊𝖑!

  50. Kalu sharma on December 18, 2020 at 10:53 pm

    How are you running electron with WSL? I’m using WSL 2 and tried running Github repo, and it wont start.

Leave a Comment