Create Desktop App + Installer with HTML/CSS/JS - Electron Tutorial 2020

Electron tutorial (2020 updated version) In this video you'll learn how to
1) Use Electron Forge to setup new project
2) Write a simple CPU monitoring Desktop App
3) Basic concept of IPC (Inter-process communication)
4) Use Node.js Module in Electron
5) Create Executable file and Windows installer (.exe) with Electron Builder
6) Change Application Icon and Display Name in Control Panel
7) Request admin privilege when running your app
Source code: redstapler.co/simple-cpu-moni...
******** Follow us on *********
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
******** Studio Equipment *********
Screen Capture Card: amzn.to/3f4wRzP
Mic: amzn.to/2Uy7dKw
Audio Interface: amzn.to/3pspAyJ
#Electron #JavaScript #HTML

[@osikemhekhaigodsfavourbrun2645]

The truth is that in the whole of the internet you are the only person who truly explain how to deploy electron app to a lay man understanding. I do really appreciate, you've save a ton of my searches. May God bless you in Jesus Name. I am deeply grateful.

[@sammyxf6992]

true

[@muslim2k]

"I am a lazy person" - Every programmer ever.

[@RivRob]

meh

[@LOOKSDOESMATTER1]

I'm lazy to turn on my pc 😭😭

[@stuvius]

Will try this out but it's a really nice tutorial. Didn't skip the basics, and included everything I needed to know without any sidetracking

[@feliuswyvern7189]

Was having issues figuring out how to setup an installer. This video helped out a lot

[@stephennardone5437]

I am just starting out with Electron JS and this answered so many questions for me. Thank you for this! One thing I would like to know more about is how to integrate other languages and what languages would be best, if at all possible.

[@majaysakthishankar8432]

Conclusion : JavaScript is the skill which we need to master in order to all these Cool Stuffs. Thanks Redatapler Love all your Stuffs.

[@muslim2k]

You're using plural noun the wrong way.

[@yonggonlee]

Finally something actually works! Thank you very much.

[@DamienzTheBand]

Very nicely paced and thanks for getting into the installer a bit. When getting into a framework the first thing you want to do is to see the whole procedure to the end product. What happens in between, the actual building of the code, is less interesting as it is most likely the same as standard scripting. The next thing would be to see best practices of reading-writing on disk on all systems and the pit-falls therein (cause no 2 OS:es are the same here). Thanks for a clear explanation!

[@BurningIceGod]

a short follow-up on how to create and deploy automatic updates for this app would be great :)

[@user-hk7px1sx4x]

I think that is not possible with electron with what I heared

[@dragoonussolonar7006]

I've been playing around with Electron last couple of days, got a lot further developing then I imagined, but wanted to test building, a concept as a web developer I am somewhat unfamiliar with. It did not go well. electron-packager, electron-forge, and electron-builder all failing. I had no idea why. I still have no idea why. However, using npm as you have instead of yarn as electron-builder docs suggests magically remedies the epipe issue I had. In only a few minutes nearer the end of your video you've solved hours of me messing. Thank you!!

[@dalepres1]

I've got over 20 years of web development experience with different platforms and frameworks. Even with that background, this is the absolute best tutorial on using electronjs I have seen. Now I think I can actually start building a working electron app. Thanks!

[@CodeChrisB]

"20 years of web development " "I think I can actually start building a working electron app " Something not adding up here

[@dalepres1]

@@CodeChrisB What's not adding up? Since you're reading/watching this video, I assume that you, too, weren't able to jump into creating an electron app without the benefit of learning what others have already learned and shared. You're clearly not a developer, or if you are, you're clearly not someone I want on my team - I manage a team of 45 developers right now. Anyone can read the documentation for any new-to-them framework or language and write code. If you think it's a good idea to start from the beginning and charge your employer and clients for the time it takes you to learn all of the ins and outs of a new framework, what works differently from your experience, learning what works and doesn't, then you're definitely not someone I want. I want my team to find experts and learn from them, not having to start by reinventing the wheel in electron apps, for instance. A question I have had in every interview I've had in the past 20+ years, and a question I have asked in every interview I've led in the past 20+ years, is, "When you are trying to develop something new to you or that you're struggling with, what do you do to solve it?" If their answer doesn't include "Google it" or something equivalent, it definitely impacts the interview negatively. So what really doesn't add up is how CodelessChrisB comes to a site with a great video on ElectronJS when an experienced web developer would never need to come to such a site, according to Codeless. Edit to add: And I posted my first post that you complained about a year ago so I don't remember exactly what led to it but, if I recall, there was something in the video that indicated the video creator was targeting new developers. My point in mentioning my long experience in relation to this video is that it didn't/doesn't just help new developers; it is also very valuable for senior or other developers new to electronJS.

[@gcristian1417]

You're a savior! Thank you very much!!!!! Keep making videos like this!!!!

[@CompilingInput]

Concise n to the point intro for newbies,luv it 👍

[@mattmcewan2550]

Subscribed! Really well done tutorial - helped a lot, thanks

[@kidslovervn]

This is what I am looking for! thanks for sharing this tutorial! you are amazing

[@yolamontalvan9502]

Thanks for this lesson. It was easy to understand.

[@621ajith]

Thanks for the video. That was really helpful.

[@gizzmo1976]

Very well done! Thank you!

[@Pranavmanseta]

Excellent, this helped me..!

[@MrBaLe]

Thank you! very helpful.

[@MrVipulLal]

Thanks for the tutorial. Do the installers uploadable to MAC and Windows App Store?

[@lwliang8108]

Thanks for the tutorial. Helpful Info. Thumbs

[@Hotatoes]

nice use case with electron thanks man :D

[@kamyarsedghi4602]

My only regret is that I have only one like per video to give. Keep the good work. ❤

[@esakib]

man you are awesome explainer💖💖

[@navzme]

Great tutorial Thanks!

[@KimionTM]

If any of you get the "require is not defined" error, try adding contextIsolation: false to the webPreferences

[@poldragon458]

Just type this webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }); instead of webPreferences: { nodeIntegration: true } }); (restart the client after making these changes btw)

[@gioeleferrari600]

Thank you so much! I got the error but now is resolved

[@rad6626]

@Juergen Rau me too lol

[@rad6626]

thank you :)

[@citaanggraini116]

I'M WAITING TO SEE COMMENTS LIKE THIS, IT'S REALLY HELPING ME. ALMOST A WEEK OR SO I DON'T KNOW WHAT TO DO. THANK YOU VERY MUCH

[@danielevessio8779]

very nice tutorial! Thanks

[@sumukhakb2701]

Awesome tutorial. Please make more videos on electron

[@braveru716]

Great tutorial ！

[@anokidevel]

Thanks man!

[@mynameiskranz]

thank you man!

[@simonvanwingerden9666]

Nice tutorial! But I also needed to set contextIsolation = false in webPreferences before it actuly works. (maby changed in last version(s))

[@fraserhobbs24]

Just wondering when you are writing your code out you get the snippets and autocompletion for it all, what are you using for this? i cannot seem to find one for this.

[@muhammadashour3793]

Loved it ❤️ Can you upload a video explaining javascript Asynchronous functions with easy explaining and examples please.. Thanks..

[@muslim2k]

Checkout TheNetNinja or Traversy Media's video.

[@muhammedirfan428]

fantastic. thank you

[@catalinim4227]

Thanks, completely forgot about Electron

[@NzV123]

Hello thanks for the tutorial, this is really helpful. I have a question though- my program has 3 components, the GUI (which is a .exe), the server and backend (which is a .war in a Tomcat server), and the Database (which is a PostgreSQL server). How do I go about creating an installer that handles the installation of the DB and Server/Backend before running the GUI .exe?

[@mdhossen7082]

This video is Very helpful

[@jaibodele6363]

Yes that is what I want to see

[@TomaszSmykowski]

Thanks!

[@ChetanBhole]

Very Very Much Thanx.

[@SebaM90]

Nice. Only compile for Windows ??

[@GxdKxller]

Well done!

[@wiryacompchannel]

good tutorial.. thanks

[@RVKAWAAA]

Excelente!

[@lucasribeiro9089]

The video is very good for to start

[@ShekharSuman271991]

Kudos!

[@teddyperera8531]

Thank you

[@zinheere]

what!??!?!?! this guy got VERIFIED under 1 mil subs!!! Your INSANE This guy is SOOO UNDERRATED

[@thatonecoder737]

anyone can get verified if they have over 100k subs...

[@nakulsingh8444]

Awesome

[@victor8068]

Thx!

[@sarathkurup1016]

nice bro ❤️

[@verdipratama]

thank youuuuuuuu

[@activelinestories1]

wow thank you

[@ThePianoKid]

For anybody getting an error when you run "npm run build-installer", add your app icon to a build folder and run "electron-builder --windows --config.nsis.oneClick=false --config.nsis.allowToChangeInstallationDirectory=true" for the same thing

[@m.o.7661]

This is good tutorial. Can I have my website being displayed as downloadable app to distribute? I don't know if my question make sense! Thanks

[@oatmanbecauseilikeoatmeal]

for those not getting the console log in the main window try adding mainWindow.webContents.on('did-finish-load',()=>{ mainWindow.webContents.send(...); }); in the index.js. worked for me

[@cmdaltctr]

Hi, I am quite new in this, so pardon the noob question. Why is the app size ~233MB for such a small app?

[@rajadvamshi]

Really good one but what’s the point in building an old school app in 2020 when we have uwp and store??

[@rishiktiwari]

Why do you think about PWA vs Electron?

[@trvebm7812]

Would really appreciate if someone could explain how to make the build script for MAc and Linux too!

[@hpnguyen2002]

Excellent guide! Thanks a lot. A question: how to make a Mac runnable program if we use Windows?

[@charlesderek7107]

Can ther Electron Desktop apps made create and run executables? Such as creating JSON files, running automated cmd/terminal commands?

[@myildizhan]

Can we compile this apps for Ubuntu or Linux distributions too?

[@merajjalaly1277]

Goooon

[@NERO-ez1mn]

just for clarifications on the GB mem, You divided it by 1024 for a reason that a gb is 1024byes? or ai am just missing something?

[@HimanshuSharma-op2qg]

wah bro wah

[@molaimc6411]

Hey, I Was Here To Ask If We Can Get Your Whole SRC Folder For Download. Do You Have A GitHub Repo Or Something?

[@sqarcle]

After building it is not loading index.html just showing a white screen . What should I do? I have many images,html files connected with the main.js and index.html

[@jeffbro7147]

I've tried it and im able to create a setup for my app , i have another requirement . I should be able to add some script that should install sql express server , when ever I press the install button , with addition once the express server is installed , I want to run my another script which will create some tables in the plain db . Im stuck , in how to add the script to install express server and run the db manipulation script

[@nandakyawwin9006]

nice

[@inqzz]

what plugin do you have for the colors in vs code

[@taranathniraula3036]

please make video on how to customize close,minimize,maximize,restore down button and style it

[@furbi963]

Gusta 🙊💗

[@a1r9r89]

i hope u can help me, i tried but in the file .html the console told me i had an error, in the line code " ipcRender.on('cpu', (event,data) =>, the log error says Cannot read property 'on' of undefined. i hopely u can help me, how can i fix it ... :/ P.D. sorry for my english if i had orthography errors or syntaxis, i'm a latino.

[@bahidev9245]

[@teufelsborg176]

console.log in the Main Process does not work for me on Windows. the Renderer process logs to Chromium's devtools fine. and on Mac, it works, the Main logs to the console fine. but on Windows 8.1 a simple console.log() in index.js does not work for me.

[@technoinfoworldwide2329]

We need more large projects on electron desktop app, i didnt find many projects in youtube

[@sportnewsfc7024]

Web dev projects should also work on electron as it basically just runs chromium.

[@karanjotsandhu237]

Hello...how can I create a single exe file using electron packager for all three platforms?

[@abdullaahmad5431]

@Red stapler, can I delete the default files in src folder & add my own files?! And Can I create app for all systems by electron?!

[@junkmeal7292]

Can I create app for all systems by electron?! yes but u need to build it on the other system

[@junkmeal7292]

@@Black..Rabbit okey

[@vmars316]

How can I check if Electron is installed , an see what version ? Thanks

[@mickmc1498]

I have an online website builder html, js, elements, images - how do I convert to desktop exe

[@MarvBudd]

What about redoing this with nodeintegration: false so the app is more secure?

[@udeshnishan1142]

How can I create an extra app config file? to change the configuration after build the application

[@fiend_1108]

Invalid configuration object. electron-builder 23.1.0 has been initialized using a configuration object that does not match the API schema. - configuration.nsis has an unknown property 'liscense' idk what is wrong with this error

[@davidsahakyan8790]

Yeees

[@its_akhr]

I used the same method to package my app into a installable .exe file. But the videos in the web app is not playing/showing after installation. The videos are playable when I tried npm run start. Can anyone tell me why?

[@front-endanimal6359]

create it with react + electron

[@ngodingrek6458]

how to change the default installation path to program file?

[@plebedesign5135]

Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json. What to do??

[@muhamadimron9785]

_yarn remove [packagename]_ Then : _yarn add -D [packgname]_

[@BurningIceGod]

you can look inside package.json and go to the dependencies section cut the "electron-builder" line and paste it in "devDependencies"

[@tigerlep9]

for me nothing shows up in the console with the ipc things, I see the cpu usage, mem usage and total mem in the terminal but it doesn't show up in the electron devtools console

[@rubentxogg2280]

That's because the Window don't have time to load the page and load the JS to recieve message. You need to wrap it in the 'did-finish-load' event like this: os.cpuUsage(function (v) { mainWindow.webContents.on('did-finish-load', function(){ console.log('CPU Usage (%): ' + v * 100); mainWindow.webContents.send('cpu', v * 100); console.log('Mem Usage (%): ' + os.freememPercentage() * 100); mainWindow.webContents.send('mem', os.freememPercentage() * 100); console.log('Total Mem (GB): ' + os.totalmem() / 1024); mainWindow.webContents.send('total-mem', os.totalmem() / 1024); }); }); That worked for me.

[@thoughtswithzuks]

11:28 npm install electron-builder --dev Should now be npm install electron-builder --save-dev Otherwise awesome!!!

[@BabarAli-yb1eg]

Man when you made final build the .exe file was *233 Mb* .. damn for simple app.. Is there any way to reduce it?

[@RedStapler_channel]

nope that's the catch of electron. it needs chromium to run hence the large size.

[@BabarAli-yb1eg]

@@RedStapler_channel desperate times desperate measures

[@LetTheWritersWrite]

@@BabarAli-yb1eg look into C++ solutions like Ultralight.ht (formerly Awesomium), Sciter, Librocket, and many other HTMl GUI solutions for C++. Ultralight looks very promising.

[@LetTheWritersWrite]

Actually there's a direct comparison to electron to C++ with Ultralight here ultralig.ht/#about

[@BabarAli-yb1eg]

@@LetTheWritersWrite i have worked with c++ but i prefer JavaScript over c++ anytime anyday , so i have to deal with v8 size

[@romerlunar757]

I have a issue const electron = require(‘electron’); Uncaught referenceerror: require is not defied

[@oliverkam6224]

me too pls help

[@poldragon458]

me too

[@poldragon458]

Just type this webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }); instead of webPreferences: { nodeIntegration: true } }); (restart the client after making these changes btw)

[@jolantamakua7135]

can you show what script 'make' contains?

[@perryedrick]

when i do it it doesn't build any nsis installer i can't firgure out why

[@advaiyalad]

Never use nodeIntegration: true. Instead, use contextIsolation: true and add properties to the window in preload.js. THEN use those properties in renderer.js. It is a lot of work, but security is important.

[@1eknowy]

sorry for asking in here, but where is renderer.js? i'm a newbie for learning elektron and javascript can u help me?

[@lexuscreations5805]

Require is not a function uncought reference error

[@waterblurr]

It would be great if you put timestamps in the video for future viewers.