Build a Desktop App with Electron… But Should You?
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
You should add a disclaimer not to repeat this at home. We have enough electron garbage already
need to include enableRemoteModule: true in webPreferences for latest electron
where did you get the Churchill quote?
Solution/code is not working under electron: 11.2.2. Getting the following error:
render.js:5 Uncaught TypeError: Cannot destructure property ‘dialog’ of ‘remote’ as it is undefined.
at render.js:5
As of Electron v9 you can’t call remote on the renderer unless you set the enableRemoteModule as true on the BrowserWindow (like you did with nodeIntegration). Great tutorial nonetheless. π
Does it record audio? Could be used as a live stream clipper for long streams
OBS: Imma head out
Fraps: Wait on me
For anyone wondering what to attach to the start and stop buttons. Add Event handlers to startBtn and stopBtn that call mediaRecorder.start() and mediaRecorder.stop(), respectively.
pls sir can you do a full course about electron
For security reasons, setting NodeIntegration to True is not something you should do when not absolutely needed (or when you don’t understand when it can be harmful to your users) ; there’s a reason why it’s off by default: https://www.electronjs.org/docs/tutorial/security#2-do-not-enable-nodejs-integration-for-remote-content
wao!
I love electron b/c every click results in a coffee break.
I don’t know if I’m blind but I missed where and how you implemented the start and stop buttons. So I don’t have a fully functional application.
I’m going to record myself writing a joke about people joking about a guy recording himself build an electron screen recorder on an electron app.
But should we learn electron or it is a bad technology???
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!
Finally found out why Vs Code runs like crap
This program wont work currently because the stop and start button onclick was never coded hahaha. However the code has been updated on GitHub. Keep up the work!
Why remove the v8 engine and build a renderer from a graphic lib on a multiplatform language like Java or Python if you can use a WHOLE web browser for the job XD… Worst architecture I have ever seenβ¦
You should, if you already have a web version.
wait really someone prefers JavaFX???? If you eventually land on JavaFX for your application, then don’t make your application.
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
I’ve seen this being done all over the place, but is there some piece of software or website that can create these great macOS-like renders 2:29 easily? You seem to be using Windows and thus I am a bit confused how you managed to do it.
Thanks
Dude, you are a savior! This tutorial fits perfectly what I am trying to build! Thanks a lot
Can someone point on how to add the sound capture functionality to it?
Excellent video, many thanks π
But two things are missing in the video about remote and buttons :
1 – 4:30 – You need to add enableRemoteModule: true in order to access the remote object in JS.
2 – See https://fireship.io/lessons/electron-screen-recorder-project-tutorial/#record-and-save-a-video-file for the Start & Stop buttons’ onclick functions.
Hope it will help some people π
Tip for the kewl people who code along: two "webPreferences" need to be added to index.js, here:
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true
}
});
Wait, what if we are using Django? How does that work?
Great tutorial, very nice to watch π
I need to hijack Electron Packager apps to play Mope.io instead of boring actions on installing and editing.
But it can’t
windowsofislam.com
I’m starting on a new electron project in my company and needed an introduction. This video serves the purpose. Feeling much comfortable now.
Just love it, thanks! I can hardly imagine a more efficient introduction to electron for someone who’s already a js programmer.
when you realise that he didnt use the start and stop buttons -.-
Random creepy background scream at 4:10
8:58 portal for me
Could you please speed up the video next time? This world’s not going fast enough…
"333,333" views eeeeeeevil
ALL the others? Kivy? Qt? UWP? WPF?
Anyone know what VS Code theme he uses? Of course it’s not that important but I’d like to use it myself.
More project based videos ππ»
Electron apps are an abomination. Also are Java, .NET, mono
A similar video covering all major features of Nodejs will be great.
Does it ‘compile code’ meaning is it easy for a user to change your app code to make it behave differently? How secure is electron?
Thanks ! Now I know how to create a powerful screen recorder for my new virus !
Talking about Electron app
My 2013 laptop with 2gb ram: don’t even think about it
Thanks. With a help of your tutorial I was able to code the virus in electron. I now have a lot of moneys.
Please, don’t.
Unles you are Samsung, Patriot, Corsair, GSkill or any RAM maker or sponsorship.
Is there any video explaining what is the difference between electron-forge and all the other?
C#:and I took it personally