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
38 responses to “Build a Desktop App with Electron… But Should You?”
🔴 Pls help me Fireship. Electron forge is throwing errors on me
Electron is good for prototyping. Not practical
wich vs theme are you using?
pd: nice tutorial, love it <3
Hey! I'm on ubuntu and when i press stop the dialog window (for saving) doesnt pop up. Any help?
Cannot fathom how much research went into this 11 minute video. That's real hardwork. Thanks, man!
Love the content and the production quality.
The retro VHS feel was awesome.
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.
Another drawback to add: The load time and performance is the worst even though it runs chrome.
I really like your argumentation of why to use Electron.
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…
You should do NW.js. It's a lot easier than Electron and more powerful. XPDA.net has a good comparison
can you make a tutorial about printing a document with electron
I used Electron once long ago. But they kept changing their api.
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.
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
Please show about local database of Electron.
dont use electron, look how spotify works
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
You are such a fast typer that you don’t have enough frames per second to record each individual letter typed
⚛
The "its fun to do bad things" clip caught me off guard. well played
just what i need
Awesome dude!!
He's writing an electron app on an electron app. 😁
Neat stuff, bud!
This could compete with the OBS Studio… wow.
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.
How to hide source code in election
What a video sir
How can I get my first project?
I have learnt html, css, bootstrap, Mqsql, php.
imo electron is overkill for home projects
🔥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.
These kind of projects made me high af!
I want to get so good at software engineering that i can output as many tutorials as you do
Did he just make OBS?
Thanks for making the videos you make, they are very good.
MOOOOAR!!!!
How can I make this with Vue? Cannot find any info
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 )