• Sunday , 29 March 2020

Build a Desktop App with Electron… But Should You?

Code Canyon



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

Original source

3d Ocean

Related Posts

38 Comments

  1. Max Programming
    March 13, 2020 at 18:39

    🔴 Pls help me Fireship. Electron forge is throwing errors on me

  2. Debayan Sutradhar
    March 13, 2020 at 18:39

    Electron is good for prototyping. Not practical

  3. MuT3D
    March 13, 2020 at 18:39

    wich vs theme are you using?
    pd: nice tutorial, love it <3

  4. apost
    March 13, 2020 at 18:39

    Hey! I'm on ubuntu and when i press stop the dialog window (for saving) doesnt pop up. Any help?

  5. Eshaan Bansal
    March 13, 2020 at 18:39

    Cannot fathom how much research went into this 11 minute video. That's real hardwork. Thanks, man!

  6. sheikh1906
    March 13, 2020 at 18:39

    Love the content and the production quality.
    The retro VHS feel was awesome.

  7. Yaqin
    March 13, 2020 at 18:39

    Another touch down. Top notch content bruh. I would love to see some longer tutorial with the same format (10min each) but is broken down to couple of episodes.

  8. spozt
    March 13, 2020 at 18:39

    Another drawback to add: The load time and performance is the worst even though it runs chrome.

  9. Vassilios Pupkios
    March 13, 2020 at 18:39

    I really like your argumentation of why to use Electron.

  10. Braden Young
    March 13, 2020 at 18:39

    Anyone having issues with npx create-electron-app my-app and 'Error: EPERM: operation not permitted, mkdir 'C:UsersBraden''? There seems to be some issue when you have a space in your name in your user folder…

  11. TheJaredWilcurt
    March 13, 2020 at 18:39

    You should do NW.js. It's a lot easier than Electron and more powerful. XPDA.net has a good comparison

  12. Kasun Udayanga
    March 13, 2020 at 18:39

    can you make a tutorial about printing a document with electron

  13. Philson
    March 13, 2020 at 18:39

    I used Electron once long ago. But they kept changing their api.

  14. Michael White
    March 13, 2020 at 18:39

    I'm having trouble implementing the startButton.onclick and stopButton.onclick functions. And the github example produces an error where startButton.onclick can not be assigned to null.

  15. NiftyChimp
    March 13, 2020 at 18:39

    Since Electron v5.0, official docs advice against “nodeIntegration: true” for security purposes. It recommends using a preload.js to add only the necessary node.js function as a property of window for access in renderer.js

  16. Khmer Video
    March 13, 2020 at 18:39

    Please show about local database of Electron.

  17. zbynek riha
    March 13, 2020 at 18:39

    dont use electron, look how spotify works

  18. Cloudburst
    March 13, 2020 at 18:39

    Please stop using web sites for desktop applications. It makes them run slower that a native app. There are many frameworks available for all platforms. This is disgusting

  19. Cat4-7
    March 13, 2020 at 18:39

    You are such a fast typer that you don’t have enough frames per second to record each individual letter typed

  20. Z3ntr0
    March 13, 2020 at 18:39

  21. Meladrift
    March 13, 2020 at 18:39

    The "its fun to do bad things" clip caught me off guard. well played

  22. YAPAYZEKA
    March 13, 2020 at 18:39

    just what i need

  23. Ferenc Puskas
    March 13, 2020 at 18:39

    Awesome dude!!

  24. Arturo Medina
    March 13, 2020 at 18:39

    He's writing an electron app on an electron app. 😁

  25. alejandro alcaide
    March 13, 2020 at 18:39

    Neat stuff, bud!
    This could compete with the OBS Studio… wow.

  26. Qik
    March 13, 2020 at 18:39

    Electon should not be used for things like chat clients or VoIP clients etc that can be made WAY more efficient even in Python, not to mention C, Cpp or D.
    Electron should only be used either as a LAST RESORT, temporary measure or for something that is only intended to be ran for a short perioid of time.
    Discord is the periapsis of this. A chat client that can eat up to 1GB of ram and very many CPU cycles. While other programs achieve the same stuff while being IMMENSELY less resource heavy and less wasteful.

  27. Raushan Kumar
    March 13, 2020 at 18:39

    How to hide source code in election

  28. Muhammad Uzair
    March 13, 2020 at 18:39

    What a video sir

  29. Muhammad Uzair
    March 13, 2020 at 18:39

    How can I get my first project?
    I have learnt html, css, bootstrap, Mqsql, php.

  30. 01ṝệņḍệṝįņĝ01
    March 13, 2020 at 18:39

    imo electron is overkill for home projects

  31. François
    March 13, 2020 at 18:39

    🔥By the way, Electron is not even required to build a Desktop Screen Recorder on the web thanks to PWA capabilities.
    I've made something at desktop-screen-recorder.glitch.me to show this
    Source code is available when clicking the fish button. Check out the script.js file.

  32. Pratyay Banerjee
    March 13, 2020 at 18:39

    These kind of projects made me high af!

  33. Life Fallacy
    March 13, 2020 at 18:39

    I want to get so good at software engineering that i can output as many tutorials as you do

  34. Kawaiivee
    March 13, 2020 at 18:39

    Did he just make OBS?

  35. Benjamin Miller
    March 13, 2020 at 18:39

    Thanks for making the videos you make, they are very good.

  36. ChristerOpdahl
    March 13, 2020 at 18:39

    MOOOOAR!!!!

  37. Charles Dude
    March 13, 2020 at 18:39

    How can I make this with Vue? Cannot find any info

  38. Raymond
    March 13, 2020 at 18:39

    I don't understand how those electron apps can be more than a simple "web" inside a container of the "window's application though, that's the only thing i can make when i used electron, but when i see the examples, some have quite an advanced features that the API documentation of electrons don't show. How did they do it? the Electron docs only show simple event listeners, notification, etc etc. I mean, some used electron to create IDE software like visual studio. How the heck can you create a Visual studio code with javascript, html, css? You make the linter with JS + CSS ? haha

    With slack, i can understand since it's just a glorified chat system. But Visual Studio Code and Yeoman, etc still makes me curious, any idea, Fireship? (Visual Studio code use electron: https://www.electronjs.org/apps )

Leave A Comment

You must be logged in to post a comment.