• Wednesday , 13 December 2017

An Intro To Electron – Desktop Apps with JavaScript

Code Canyon



In this video we will just start to scratch the surface with Electron which is a library to create desktop applications using only HTML, CSS and JavaScript.

We will use code from the quick start and create a very simple system info desktop app

Quick Start Repo:
https://github.com/electron/electron-quick-start

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:
http://www.paypal.me/traversymedia
http://www.patreon.com/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.linkedin.com/bradtraversy

Original source

3d Ocean

Related Posts

41 Comments

  1. Sahara874
    September 4, 2017 at 08:00

    Hello, this was a very good video! Will you make more Electron videos?

  2. Rishabh Mendiratta
    September 4, 2017 at 08:00

    i am using electron and i was giving Folder name in path.join(__dirname,'./Folder') but its not working .When we use express we can perform this type of action why not in this case?

  3. lΓ€kerol
    September 4, 2017 at 08:00

    I was searching for info about the Intel Atom CPU, and this came up (Since you use Atom editor). I watched the whole video and got ideas for small desktop apps I want to do πŸ˜€

  4. Jeremy Sutton
    September 4, 2017 at 08:00

    Cheers man, I really appreciate your content. Keep it coming!

  5. Jacob David C. Cunningham
    September 4, 2017 at 08:00

    Man how awesome, I'm a web developer myself and the ability to use that to build desktop apps cross platform? ahhhhh

    thanks for this intro

    edit: shit… 3:45 does this mean you can't package the apps as say a .exe that doesn't require installing other stuff (like node.js) it would just come inside that .exe as an execution command or something? That would suck if you have to setup an environment that runs an electron app.

    I use Visual Studio Code that for Linux/Windows I just download a file and run it so maybe…

  6. Josh Danns
    September 4, 2017 at 08:00

    I learnt PHP using one of your guides!!! Thanks a bunch

  7. Fuad Hassan
    September 4, 2017 at 08:00

    i am getting an error like:
    Node: ${process.versions.node}
    instead of the version number
    it is like the ${process.versions.node} is considered as a part of the string ,what do i do about?

    here's my code: let output = "<h2 class='page-header'>App Version Data</h2> <ul class='list-group'><li class='list-group-item'>Node: ${process.versions.node}</li></ul>";

  8. Giorgi Merabishvili
    September 4, 2017 at 08:00

    Thank you very much! You're really amazing!

  9. Gherbi Hicham
    September 4, 2017 at 08:00

    Getting "DevTools was disconnected from the page. Once page is reloaded, DevTools will automatically reconnect" error, when starting teh application and the html doesn't show, how do you fix this?

  10. Sam Be Ri
    September 4, 2017 at 08:00

    hi, can I have the mac address with process?

  11. Jorge Sepulveda
    September 4, 2017 at 08:00

    awesome! Hope you do more videos about Electron and how to build desktop apps with it

  12. about67turtles
    September 4, 2017 at 08:00

    I really want to learn this and follow along but atom is giving me all kinds of errors about "No ESLint configuration found"… I think it has something to do with it not recognizing the ES6 syntax? Could anyone help me? The first line of code I wrote and i'm in trouble!

  13. Dhanuka Perera
    September 4, 2017 at 08:00

    This is really awesome πŸ˜€

  14. GeekMustHave
    September 4, 2017 at 08:00

    Another great video. Desktop applications built from the guts of web development, reuse your JavaScript skills. I understand there are some concerns about resource management with Electron APp's?

  15. Anju Thomas
    September 4, 2017 at 08:00

    Hi, great video! how can we embed an electron app inside another electron app, similar to ? By embed, I mean instead of redirecting to a my second app to do something, I can simply run the second app inside the first one. Similar to having google maps inside my own app instead of redirecting to google maps, have the user enter in the information there and then returning back to my app. Similar to web frame / web view functionality. I want do something similar with my electron apps. Hope to hear from you soon on how I can do this. If possible, would appreciate a tutorial on embedding an electron app inside another electron app. Thanks! πŸ™‚

  16. Charif Abdeslem
    September 4, 2017 at 08:00

    angularjs , angular , react , vue , ember , what the hell is going with the javascript libraries and framework

  17. Noormohammed Shikalgar
    September 4, 2017 at 08:00

    Hey, Brad, I need your help?. I have to install electron but it's not installing it's getting to node install.js and stopping there what exactly its happing I don't know… would you please help me there…..
    Thanks for such greater tutorials……

  18. Anand Vidvat Arza
    September 4, 2017 at 08:00

    i am getting an error like:
    Node: ${process.versions.node}
    instead of the version number
    it is like the ${process.versions.node} is considered as a part of the string ,what do i do about?
    i am working with Visual Studio

  19. Abdul Stuntin
    September 4, 2017 at 08:00

    My God! JavaScript is becoming the god of all programming languages front-end, back-end, graphics rendering, and now desktop apps!

  20. Navneil Naicker
    September 4, 2017 at 08:00

    Well done.

  21. AJ Akinremi
    September 4, 2017 at 08:00

    I am thirsty for more indeed. Please, I am begging you.

  22. ruben esquivel
    September 4, 2017 at 08:00

    Electron or Native what is better for someone who is just getting started in software development? Is there performance problems with apps built with electron?

  23. SlackerKing
    September 4, 2017 at 08:00

    Cool video. Can't wait to see more. That being said, it would be cool if you maximized your editor, if possible. That right side brightness is painful at night. πŸ™‚

  24. EntertainmentLoLz
    September 4, 2017 at 08:00

    Is there any full course available for electron by Eduonix ?

  25. James McGril
    September 4, 2017 at 08:00

    This is awesome! Very great tutorial! I've' seen some of your stuff now and I have subscribed to your channel. So, I stopped coding back in 20001 after burning out. I was writing ActiveX and inserting into web browser to distribute. I am finally ready to get back in the game and finally have hope since cross-platform support is here and embedded into the browser. I was looking for a good framework to start with like MEAN. Since, I want to re-write some apps I developed for a vendor years ago, I will still be able to deploy via web server. This is great!

  26. Lyn Scott
    September 4, 2017 at 08:00

    2 questions..
    1) My app couldn't use require to import renderer.js from index.html.
    2) Can I create a single EXE or Package or Whatever to deploy the app?

  27. Rafay Qureshi
    September 4, 2017 at 08:00

    Great! please make a tutorial series and thank you for your efforts, great channel, Keep it up (y)

  28. Memario Luigi
    September 4, 2017 at 08:00

    Awsome like always πŸ˜‰

  29. Mahmoud Tokura
    September 4, 2017 at 08:00

    Hi, i hear this can also work with Type-Script and Angular, and you make a tutorial on that.
    Thanks

  30. Ivan Vilches
    September 4, 2017 at 08:00

    16k of views and 557 guys, come on !!! push like!

  31. Len
    September 4, 2017 at 08:00

    Great video!

    Is it possible that you also did the "Full Stack Web Developer" course from EDUonix?E

  32. Wincenty Z Kielczy
    September 4, 2017 at 08:00

    great video, thanks!

  33. Inferno Prime
    September 4, 2017 at 08:00

    OH MY GOD

    I have been waiting for this – i utterly detested JS because i couldnt write desktop stuff.
    this is brilliant

  34. jacobsen gladimir
    September 4, 2017 at 08:00

    great tutorial brad

  35. Alban Kaperi
    September 4, 2017 at 08:00

    Great tutorial,
    can you pls make a tutorial on "how to make an installer" for this simple application that you did?

  36. Hire PHP Developers
    September 4, 2017 at 08:00

    Interesting. I will try it soon.

  37. Kepler
    September 4, 2017 at 08:00

    So all url module does is save you from having to type paths like `file://${__dirname/file.ext}`?

  38. Fullstack Devs
    September 4, 2017 at 08:00

    very interesting. i will definitely try it.

    i really hope my channel becomes like yours someday lol

  39. Marc Aupont
    September 4, 2017 at 08:00

    Awesome!! Lots of potential!!!!

  40. Sosig
    September 4, 2017 at 08:00

    Duuuuuude that was f*cking awesome!

  41. Victor Rodriguez
    September 4, 2017 at 08:00

    Awesome video!.

    Plase create one for Flask Python Web Programming.

Leave A Comment

You must be logged in to post a comment.