ElectronJS Crash Course 2022

Поділитися
Вставка
  • Опубліковано 28 лип 2024
  • ElectronJS Crash Course 2022
    Learn the basics of ElectronJS in this beginner-friendly crash course
    ElectronJS Tutorial is going to introduce you to every ElectronJS Concepts
    Chapter Wise Videos: bitfumes.com/courses/javacrip...
    Source Code : github.com/bitfumes/electronj...
    Hope you enjoy and may this video add value to your life.
    🌟 Course Contents 🌟
    ⏳ (00:00:00) Intro
    ⏳ (00:03:20) My First Window
    ⏳ (00:11:47) Activate Application
    ⏳ (00:16:09) Preload Script
    ⏳ (00:20:17) Production Ready App
    ⏳ (00:24:55) Add Items Menu
    ⏳ (00:31:42) Clickable Menu
    ⏳ (00:38:42) New Browser Window
    ⏳ (00:46:29) Open camera
    ⏳ (00:55:33) Capture Image
    ⏳ (01:02:30) How IPC Works
    ⏳ (01:08:29) Render to Main data share
    ⏳ (01:17:00) Render to Render data share
    ⏳ (01:25:40) Add Notification
    ⏳ (01:27:34) What Next ?
    / sarthaksavvy
    / sarthaksavvy
    Discord server
    / discord
    🌟 Premium Courses 🌟
    Check out 32 hours of Laravel Content at
    bit.ly/indepthlaravel
    🔥 DIGITAL OCEAN HOSTING Affiliate
    Get $100 in credit for 60 days m.do.co/c/a3a47da9b9a8
    🌟 Gadgets I use 🌟
    Camera amzn.to/3mGikwL
    Blue Yeti Mic amzn.to/3mA6YdI
    Blue Yeti Mic Foam Cover amzn.to/2GkmV8w
    Capture Card amzn.to/3ed3cnN
    🌟 Support Me ( I am a full-time UA-cam) 🌟
    Github github.com/sponsors/bitfumes
    Patreon / bitfumes
    UA-cam / @bitfumes
    🌟 FOLLOW ME 🌟
    Subscribe for New Releases!
    Twitter - / bitfumes
    Twitter - / sarthaksavvy
    Facebook - / bitfumes
    Instagram - / bitfumes
    (ask me questions!)
    -- QUESTIONS? --
    Leave a comment below and I or someone else can help you.
    For quick questions you may also want to ask me on Twitter, I respond almost immediately.
    Email me support@bitfumes.com
    Thanks for all your support

КОМЕНТАРІ • 163

  • @Bitfumes
    @Bitfumes  2 роки тому +7

    👉 Get Chapter Wise Videos here : *bit.ly/3yCEgSR*
    👉 Video Timestamps
    ⏳ (00:00:00) Intro
    ⏳ (00:03:20) My First Window
    ⏳ (00:11:47) Activate Application
    ⏳ (00:16:09) Preload Script
    ⏳ (00:20:17) Production Ready App
    ⏳ (00:24:55) Add Items Menu
    ⏳ (00:31:42) Clickable Menu
    ⏳ (00:38:42) New Browser Window
    ⏳ (00:46:29) Open camera
    ⏳ (00:55:33) Capture Image
    ⏳ (01:02:30) How IPC Works
    ⏳ (01:08:29) Render to Main data share
    ⏳ (01:17:00) Render to Render data share
    ⏳ (01:25:40) Add Notification
    ⏳ (01:27:34) What Next ?
    👉 Comment your views or request for any other *crash course*
    👉 Keep learning and Keep growing

  • @jeffsuddaby4788
    @jeffsuddaby4788 2 роки тому +1

    My lucky day! Elegantly integrated demos of key concepts, practical tips on how to navigate the Electron docs, and (at last!!!) a tutorial that doesn't melt down with breaking changes on install... Now I can cross the bridge from web dev to desktop apps. Thanks so very much.

  • @LearningWithBandE
    @LearningWithBandE Рік тому +5

    This is fantastic! Your instructions are clear and concise and I love how you explain concepts while showing how to look through the official documentation, which teaches how to find information and figure things out on your own. Not nearly enough teachers do that!

  • @luis6732
    @luis6732 Рік тому +1

    Thanks for your easy to follow explanations, one step at a ti. It makes learning less overwhelming!

  • @remon962
    @remon962 Рік тому +2

    Thank you for your effort in making this video. Really helpful to me! I was really confused before but now i am clearer now about electronjs.

  • @queenofsheba8275
    @queenofsheba8275 2 роки тому +1

    Thank you! This is the most up to date course on Electron I've found on UA-cam

    • @Bitfumes
      @Bitfumes  2 роки тому +1

      Glad it was helpful!

  • @felixljr
    @felixljr Рік тому

    Such a great tutorial, very clear explanations!!!!

  • @JonathanCook-kl2zp
    @JonathanCook-kl2zp 11 місяців тому

    Brilliant tutorial. Loved your enthusiasm as it comes across as genuine.

  • @mickyrendon7382
    @mickyrendon7382 Рік тому +1

    i´m new in this channel and i'm really fascinating how you explain the concepts! it was easy for me to understand electron as you teached, the best part is fresh content! i was blocked with others courses because the content is from 2 or 3 years ago... thank you so much for this good content! you got a new subscriber!

    • @Bitfumes
      @Bitfumes  Рік тому +2

      waooo, so nice comment bro
      This is my real motivation, thanks for your support
      Keep learning
      Subscribe, like and share this video

  • @adityamore32
    @adityamore32 2 роки тому

    Thank you, Excellent Course Make more tutorials on this electron js

  • @nagendrababupalacharla
    @nagendrababupalacharla 2 роки тому +1

    Good to see u again with new technology bro

  • @arifdevcoding
    @arifdevcoding 2 роки тому +3

    crash course that i couldn't ask but needed the most as a web dev. thanks bro!

    • @Bitfumes
      @Bitfumes  2 роки тому +1

      Sure, I am working on java crash course and spring boot crash course

  • @elajcha
    @elajcha Рік тому

    Yoo tnx dude, everytNice tutorialng works. I LIKE IT

  • @amitavroydev
    @amitavroydev 2 роки тому +1

    Great introduction.. slowly starting with it. I am excited as well.

    • @Bitfumes
      @Bitfumes  2 роки тому

      Yeah, it is very nice thing to learn and easy too

  • @trungmaithanh91
    @trungmaithanh91 9 місяців тому

    electron so easy after this video. thank you very much for sharing

  • @manukyanq
    @manukyanq Рік тому

    nice video, really helpful!

  • @ArchIntelLTD
    @ArchIntelLTD 5 місяців тому

    Thank you very much

  • @mahendranath2504
    @mahendranath2504 Рік тому

    Thank you so much ❤❤❤❤

  • @liamwang9497
    @liamwang9497 Рік тому +1

    Thanks for an excellent video!
    And a BUG fix:
    In the part "render to render data share", after we cilcked capture button and the win2 closed, we cannot reuse such auto-close function properly -- if we open a camera window and then capture again, an error will occurs that something was destroyed and the win2 remains. I think we can use win2.destroy() instead of win2.close() to fix this problem.

  • @aki1840
    @aki1840 Рік тому

    I love how this man uses Stack Overflow. You can tell he makes software, he is the man.

  • @dosamuel-mb
    @dosamuel-mb 2 роки тому +3

    Sir , thank you so much , i need more of this and advanced lessons please , you're the best no cap

    • @Bitfumes
      @Bitfumes  2 роки тому

      I will try my best to move to advanced stuffs

    • @yoskokleng3658
      @yoskokleng3658 Рік тому

      @@Bitfumes yeah, pls

  • @mdhossen7082
    @mdhossen7082 Рік тому +1

    This video and your react.js crash course are very beneficial,
    thanks,

  • @_xentropy
    @_xentropy 2 роки тому +1

    Excellent video. Much thanks.

    • @Bitfumes
      @Bitfumes  2 роки тому

      Glad you enjoyed it!
      Please share with your friends, and subscribe to bitfumes channel

  • @queenchespin
    @queenchespin Рік тому

    Nice tutorial.... Very helpful

  • @almeralmazan
    @almeralmazan 2 роки тому

    Awesome video!!! is it possible to connect a fingerprint scanner like Digital Persona with electronjs?

  • @TonyTesla
    @TonyTesla Рік тому

    Thanks for your electron course,Render to Main data share,is very helpful for me to study electron framework.You are the best teacher in the world!!!!!!!!!

  • @muhammadagung2934
    @muhammadagung2934 9 місяців тому

    BROOO I LIKE UR TUTORIAL, the explanation u gave it's really ez to understand, thank you so much!

    • @Bitfumes
      @Bitfumes  9 місяців тому

      Glad it helped!

  • @ArmandoBN497
    @ArmandoBN497 Рік тому

    I have a mac and I'm having trouble changing the name of my application on the dock.
    On the window and menu bar i figured out how but still can figure out the dock name just says Electron

  • @jyotiranjanswain1737
    @jyotiranjanswain1737 Рік тому +1

    Very helpful, for overview.

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for your love and support, keep learning. Join bitfumes telegram group t.me/bitfumes

  • @ramezrafla
    @ramezrafla Рік тому +1

    Nice crash course, well done!

    • @Bitfumes
      @Bitfumes  Рік тому

      THanks bro,
      Thanks for watching, please subscribe and like this video

  • @arunkumarmathivaanan5700
    @arunkumarmathivaanan5700 2 місяці тому +1

    thank you for nice explanation.

    • @Bitfumes
      @Bitfumes  2 місяці тому

      So nice of you

  • @zzz-1x
    @zzz-1x 11 місяців тому

    How about hot reload and auto refresh after files changed bro? Thanks you!

  • @TheNamesJT
    @TheNamesJT 2 роки тому

    at 26:48 you have syntax red text that says Variable declaration list cannot be empty is that an extension and if so what is it?

  • @ballpen9157
    @ballpen9157 Рік тому

    Thank you so much. Can you create something like powerpoint? is that possible?

  • @eatsometoes5139
    @eatsometoes5139 Рік тому

    just a simple question......I wanna do a rap what should I focus the most on when I wanna edit or make a good soft?i would love to

  • @hanifullahjamalzai3351
    @hanifullahjamalzai3351 2 роки тому

    Thank you ❤

    • @Bitfumes
      @Bitfumes  2 роки тому +1

      You're welcome 😊

  • @Ebizzill
    @Ebizzill 2 роки тому

    after the npm run make prompt I find that I have to keep my web server on in order for the desktop app to work, what am I doing wrong ?

  • @henrybelmonte438
    @henrybelmonte438 Рік тому

    I follow you since you released your codeigniter 3 series, question, is t possible to enable scree sharing

  • @ugochukwuonwuchekwa1077
    @ugochukwuonwuchekwa1077 Рік тому

    Can you convert and existing web app to desktop using Electron JS?

  • @Ebizzill
    @Ebizzill 2 роки тому

    I want to change the image of the desktop icon, how would I do that?

  • @nezuko_130
    @nezuko_130 Рік тому

    makes complete sense. Only a couple other tNice tutorialngs I need to find out before I can actually make it work, but you’ve got more in depth

  • @ahmedragab9418
    @ahmedragab9418 Рік тому

    you are very good and think you

  • @viswabharathreddy147
    @viswabharathreddy147 Рік тому

    how to change default name of application in electron?

  • @friziana9506
    @friziana9506 Рік тому +1

    Finally, I found someone who posted a normal working crack!

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @ejaadhulab8924
    @ejaadhulab8924 Рік тому +1

    Awesome content as always. Butfufes rocks!! Any idea 💡 where to get tutorial on electron with simple sql dB. I have searched Google too but they are all outdated having issues. Thanks in advance

  • @certifiedmemer6000
    @certifiedmemer6000 Рік тому +1

    having tNice tutorials tutorial playing when first using soft soft was a godsend. Thank you!!

  • @zulaazul1660
    @zulaazul1660 2 роки тому

    is there state management in Electron JS?

  • @aqua-vc2oe
    @aqua-vc2oe Рік тому

    TNice tutorials is the channel that made start actually creating instead of being intimidated by the software. Thanks for a new form of therapy

  • @overtideasandsolutionschandan

    Good crash course. How to develop a website using Web API calls using electron?

  • @divyadharshni6694
    @divyadharshni6694 Рік тому

    worked for . On default it was at Agressive TE for but I clicked to the right

  • @yoskokleng3658
    @yoskokleng3658 Рік тому

    Can you make a tutorial about merge electron js with nuxt js or vue js? I think it would be cool.

  • @largezen
    @largezen 6 місяців тому

    how to build for exe file. please help me

  • @daoudaseye3018
    @daoudaseye3018 Рік тому +2

    Hi ,
    Électron is really interesting but have some questions.
    I use an existing laravel livewire project to turn it into électron app but i sée électron with laravel are really slow. And sometimes have a jugé delay to serve content and flickering when navigation between menu content.
    Do you have some advice ???

    • @Bitfumes
      @Bitfumes  Рік тому +1

      If you have slow response then you need to optimize your API you have created in laravel.
      If electron is making it slow, make sure you are using updated versions of all packages and try to debug where it is slowing

  • @egliselessemeurs4981
    @egliselessemeurs4981 Рік тому +1

    What an angel! You save my broken head!

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @jwlzloff26
    @jwlzloff26 Рік тому +1

    God your video saved me a lot of time, thx dude!

    • @Bitfumes
      @Bitfumes  Рік тому

      Glad to hear it!
      Thanks for watching, please subscribe and like this video

  • @Gameboyl
    @Gameboyl Рік тому

    Fantastic course I'm on IPC rn and gotta admit its a little bit too hard

  • @tazimbintucooking
    @tazimbintucooking Рік тому

    how to stop hearing yourself in headphones when recording softs?

  • @Sonamsingh-vz1ex
    @Sonamsingh-vz1ex Рік тому

    Hey, I'm just starting to get into making soft and tNice tutorials 17 minute video helped a LOT MORE than those one hour long tutorials out

  • @TheNamesJT
    @TheNamesJT 2 роки тому +1

    I wish he went over how to seperate the menu from the main.js and how to connect seperate js files onto the main one. With the current tutorial he just shows everything in one js file basically which isn't the best thing.

  • @ballpen9157
    @ballpen9157 Рік тому

    what should I watch after this video?

  • @ankush4484
    @ankush4484 Рік тому +1

    Great

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @jakubgadzala7474
    @jakubgadzala7474 2 роки тому +1

    Hey, I have a question. I have been grinding whole day since the afternoon. Now, it's almost 4am. My problem:
    I have a drag and drop game. Eight boxes in the top row (draggables), eight boxes in the bottom row(droppables). Everything works great. I'm using jquery ui with punch. It works great in my local environment, Chrome for mobile in dev tools, and so on. However this entire thing is run in Electron js. I just took it for a spin to my classroom that has a touch screen TV computer. And the drag and drop doesnt work at all.
    Brother, for me its very late and I will just drink some beer and sleep, but if you had any clue what could be the issue I would appreciate.

    • @Bitfumes
      @Bitfumes  2 роки тому

      I would suggest you to ask same question on that drag library github repo.

  • @N.k.thakor6458
    @N.k.thakor6458 18 днів тому

    thanks to give me hope

    • @Bitfumes
      @Bitfumes  6 днів тому

      Thanks for your love and support, keep learning. Join bitfumes newsletter bitfumes.com/newsletters

    • @Bitfumes
      @Bitfumes  6 днів тому

      Thanks for your love and support, keep learning. Join bitfumes newsletter bitfumes.com/newsletters

  • @ballpen9157
    @ballpen9157 Рік тому

    Wow, i found my new teacher. What differ you from other youtuber. You go to documentation which i really like.

  • @raymondmichael4987
    @raymondmichael4987 2 роки тому +1

    Really appreciate your work brother. Very good tutorial and well paced.
    Please consider part two and three if possible.
    Part 2 Adding Reactjs
    Part 3 adding Tailwindcss
    Part 4 Using mongodb evel local,

    • @Bitfumes
      @Bitfumes  2 роки тому +1

      Thank you, I will

    • @raymondmichael4987
      @raymondmichael4987 Рік тому +1

      @@Bitfumes,
      Part 2 please

    • @BlexJS
      @BlexJS Рік тому

      Why new parts? everything you list is simple package installations and config settings, there is nothing complicated about it

    • @raymondmichael4987
      @raymondmichael4987 Рік тому +1

      @@BlexJS even electron itself is just a simple package installation

    • @BlexJS
      @BlexJS Рік тому

      @@raymondmichael4987 Well, there's no arguing😁

  • @redsmith9953
    @redsmith9953 Рік тому

    Very good tutorial, someday make one like this but using "Tauri", still i don't get why use all of this instead of c#, but anyway, thanks!

  • @anupriyaprasad2130
    @anupriyaprasad2130 Рік тому +1

    Febens Lordeus Thank you!

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @MASKED_AMSR
    @MASKED_AMSR Рік тому

    Up to you dawg, how good do you want it?

  • @gigai9361
    @gigai9361 2 роки тому +1

    When I used npx electron-forge import: Make sure you git installed and Node.js version >= 12.13.0.
    My Node.js normal but what about git?

    • @edwardhandrich6043
      @edwardhandrich6043 2 роки тому

      Yes, @11:51 .gitignore magically appears. @22:22 you say "initialize git repository, which we already did". I didn't see where you initialize git.

  • @gameeiei9842
    @gameeiei9842 Рік тому

    How to build to .exe?

  • @jebythomas3485
    @jebythomas3485 Рік тому +1

    starting the video). I'm looking forward to making soft in tNice tutorials software!

    • @Bitfumes
      @Bitfumes  Рік тому

      Hope you enjoy it!
      Thanks for watching, please subscribe and like this video

  • @sarahasad8707
    @sarahasad8707 2 роки тому +1

    👍👍👍

  • @xarzu
    @xarzu 5 днів тому +1

    How would something like Menu appear in a Microsoft Windows Application.?

    • @Bitfumes
      @Bitfumes  5 днів тому

      I think it will be same but you can also have some windows specific menus

  • @alexon2010
    @alexon2010 Рік тому

    I'm watching a lot of electron videos, but I still haven't found good information... I'm a web developer, for some time now we are used to using import and not require, we also use typescript for type validation even reluctantly I learned typescript and today I use it everywhere... but when I go to electron I can't run code, even if I check to use import and typescript I always have an error of import -> import { app, BrowserWindow } from 'electron' not recognizing it, even having configured the my package.json and tsconfig.json

  • @kashifumer9283
    @kashifumer9283 Рік тому +1

    Now tNice tutorials was truly an aweso video. I love your thorough style

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @madhanhasee6625
    @madhanhasee6625 Рік тому +1

    What the name of the vscode theme that you're using..

  • @glareminds4286
    @glareminds4286 Рік тому

    tanx, pls lets go advance

  • @AntiGrindServices
    @AntiGrindServices Рік тому

    softEX softs like a mouthorgan.. why?

  • @ishaprabhu8662
    @ishaprabhu8662 Рік тому

    The application gets killed as soon as I close the window even after applying the activate application code snippet. please help.

    • @ishaprabhu8662
      @ishaprabhu8662 Рік тому

      i'm using windows 10 with npm version 8.15.0

  • @rikki7663
    @rikki7663 4 місяці тому +1

    why no one focus on electron js if it can build desktop application. May be something wrong with this framework. I am hardly seeing any recent tutorial for electron js mostly 3-4 year old

  • @gsdgfvzxczxc9152
    @gsdgfvzxczxc9152 Рік тому

    Wao

  • @tamaldas381
    @tamaldas381 Рік тому

    dat escalated quickly

  • @victoroliveira9131
    @victoroliveira9131 Рік тому +1

    ❤️

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @alto794
    @alto794 Рік тому

    It ans you have completed the ga

  • @afifhaiqal2159
    @afifhaiqal2159 Рік тому +1

    Make a 1 hour video of one nice tuto from google

  • @pratikpatil5696
    @pratikpatil5696 2 роки тому

    upload react js course

  • @runugope4227
    @runugope4227 Рік тому

    understanding how everytNice tutorialng works. TNice tutorials is like my 10th ti watcNice tutorialng tNice tutorials lol I’m so basic!

  • @always_swagin
    @always_swagin Рік тому +1

    yeah

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @jessielaplascaosorno4044
    @jessielaplascaosorno4044 Рік тому +1

    When u first used a phone in ur life it probably was complicated too.

  • @mohamedsaid320
    @mohamedsaid320 Рік тому

    missing my ti line sir.

  • @InDiAnAjOnEs0002
    @InDiAnAjOnEs0002 3 місяці тому +2

    bhai tum sikhaane aaye the ya confuse karne aaye the, interview ke pahle tumhara video dekh liya, ab khopadi fodne ka man kar raha hai..

    • @Bitfumes
      @Bitfumes  3 місяці тому +1

      sorry bhai, next video or acha banaunga

  • @Owen.v
    @Owen.v Рік тому

    Thank you for tNice tutorials video! I just got soft softs today, and even with the guidebook, I was lost. TNice tutorials video taught even better than

  • @thepokemontrainer6894
    @thepokemontrainer6894 Рік тому +1

    literally rn..

  • @bubuluke
    @bubuluke Рік тому

    Is there a Github repository or do you have to type while following the tutorial?

  • @Yash_27
    @Yash_27 Рік тому

    more money then I would recomnd getting Ableton, it's much more powerful and better organized. You don't need to get the suite

  • @zaybrazile427
    @zaybrazile427 Рік тому +1

    Wait.

    • @Bitfumes
      @Bitfumes  Рік тому

      Waiting for what bro??

  • @QamarAbbas-nb2cl
    @QamarAbbas-nb2cl Рік тому +1

    interest please let know ahead of ti

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @themecapture7376
    @themecapture7376 Рік тому +1

    Will i watch your channel 24/7 just to look at that beautiful face of yours? *yes*.

    • @Bitfumes
      @Bitfumes  Рік тому

      Thanks for watching, please subscribe and like this video

  • @govindsorout9009
    @govindsorout9009 Рік тому +1

    U just need ur pc, ur pc keyboard and a mouse.

    • @Bitfumes
      @Bitfumes  Рік тому +1

      Thanks for watching, please subscribe and like this video

  • @r.sgupta1136
    @r.sgupta1136 Рік тому

    when i click GMS it gives sotNice tutorialng that softs electrical with no app soft whatsoever