10 Electron JS Tutorials and Books to Help Master the Software

Electron — also called Electron JS or Electron.js — uses web technologies like HTML, CSS, Web Assembly, and JavaScript to allow software developers to design and build desktop apps. Microsoft Teams, Slack and Atom are all examples of desktop applications that web developers made using the open-source framework. Using an Electron JS tutorial can help people get started with building programs.

YouTube Electron JS Tutorials

One free and accessible way to learn Electron is through YouTube. There are several helpful tutorials and walkthrough videos on the site, including:

Electron JS in 100 Seconds by Fireship

Experienced software developers can watch this video to get a brief — less than two minutes — overview of Electron JS. The video outlines what the software does, then quickly explains how to use it to build a desktop app, covering the ins and outs of coding. Beginners may want to move to one of the more intensive lessons below to better understand first steps.

Electron JS Tutorials by Codevolution

This YouTube series is broken down into 12 parts. It starts by briefly introducing the basics of Electron JS, then goes on to cover Hello World, application menus, context menus, different modules, and CRUD files. The tutorial explains that users need to know HTML, CSS, and Javascript — including a bit of Node.js and npm — as prerequisites for learning Electron. 

Each video is less than 20 minutes long, making the series accessible and helping viewers organize the learning process. Users can go through the series in order or jump around to the topics they need to know more about.

Electron Complete Course by coderJeet

This 19-part YouTube series goes into greater depth than the previous two examples, with some videos lasting longer than 20 minutes. The tutorial starts with the basics and then covers top menus, context menus, and accelerators. It explains debugging as well as how to auto-reload Electron JS projects on file modification. The series ends by teaching viewers how to implement automatic updates in an Electron JS app.

Create a Desktop App With JavaScript & Electron by Traversy Media

In just under an hour and 12 minutes, the narrator walks software developers through the process of building a cross-platform desktop app to resize image dimensions. It includes links to the GitHub code in the description so viewers can follow along. 

The video starts by covering setup and how to create a main window. It then explains adding a UI theme, menu customization, Toastify alerts, content security policies, and much more before teaching viewers how to test production mode. 

Learn Electron JS by Creating an Always On Top Browser by Piko Can Fly

One of the best ways to learn how to use a framework is by diving right in and making something from scratch. In about 43 minutes, Piko shares the steps to make a browser that stays on top of the desktop for easy access.

The tutorial goes through each step carefully, so even beginners can understand the language and build of the open-source software. Some of the chapters include ensuring node.js is on your computer, checking for npm and creating the application.

Learn Electron by Building Five Advanced Desktop Apps by AcodebiZ

If you want additional practice, check out this tutorial by AcodebiZ. You’ll build five simple applications, putting your knowledge of Electron JS to the test. You’ll build a music player, text editor, system tray music player, top headlines news reader, and radio streaming app.

This tutorial is helpful because it covers topics you’ll need to know later as you work with Electron JS, such as how to set up your PC to build apps, working with different operating systems and designing aesthetically pleasing interfaces.

Learn Electron in 60 Minutes – Free Beginner’s Course by DesignCourse

If you have just under an hour, you can learn the ins and outs of Electron in this short rundown of the framework. Within the video, you’ll also create a Bitcoin price alert desktop app that sends notifications. The video covers topics such as installing Electron, how to work within the system and deploying your new Electron app.

You will need to install Nodejs and Code editor. Both programs are free. The mini-course is by Gary Simon, a full stack developer with over 20 years of experience. Although he is well-versed on the topic, he breaks down the details in an easily digestible style.

Udemy: Master Electron

Online learning platform Udemy offers a paid Electron JS tutorial. Master Electron teaches students how to build desktop apps for different operating systems, including Windows, Linux, and Mac. 

The class begins by setting up the Electron development environment and gives students a few useful tools that help with the process. Then, it goes into great detail on the three sections of the Electron API. It also demonstrates how Electron integrates with Native HTML5 APIs.

The $84.99 course has taught over 24,000 students the near-entire Electron API in detail as well as how to package Electron apps for distribution. It includes eight hours of on-demand videos, 45 lectures, 47 downloadable resources, and a certificate of completion. Users can access it on mobile devices and TV. 

Prerequisites for the course include a working knowledge of CSS and HTML. Students also need a basic understanding of Node.js, Git, JavaScript, and the usage of the command line (CLI). Basic knowledge of ES6 is also helpful. 

Electronjs.org: Quick Start

The official Electron website offers a thorough Electron JS tutorial on its Quick Start page. It walks readers through the process of building a very basic Hello World app in Electron, covering scaffolding, running the main process, managing the window’s life cycle, and more. It ends by explaining how to add functionality to web content. 

By the end of the tutorial, a reader’s app should open a browser window displaying a web page about which Node.js, Electron, and Chromium versions are running. 

Developers must install Node.js to use Electron. The site recommends downloading the latest LTS version. 

Pluralsight: Electron Fundamentals

Online education platform Pluralsight offers an Electron JS tutorial. Called Electron Fundamentals, it teaches students how to build native desktop apps using JavaScript, CSS, and HTML. Software creator Jake Trent narrates the intermediate-level course, which lasts just under two hours. 

It starts by explaining all the features and APIs Electron uses and gives users tips on how to take advantage of them. Students will compile their knowledge to create a project they can turn into a real desktop application. By the end, the course teaches students how to package their creation and share it with the world. 

Pluralsight offers a free 10-day trial, so students can take Electron Fundamentals free of charge. Pluralsight costs $11 per month after the trial period is up. 

LinkedIn Learning: Electron: Building Cross Platform Desktop Apps

Ray Villalobos walks students through the techniques they need to learn cross-platform desktop app development. This Electron JS tutorial covers how to configure and communicate between web pages, use Vue.js, and modify components and add modals to improve apps. The short — just under two hours — course concludes by explaining how to customize menus and add an icon for the dock. 

This intermediate-level LinkedIn Learning course is $34.99. Or, users can access it for free via a one-month free trial.

Books

Many developers like reading books so they can learn at their own pace and quickly flip back to another page for reference. Books that teach Electron JS include:

Electron Projects: Build over 9 cross-platform desktop applications from scratch by Denys Vuika

Available on Kindle and paperback, this project-based guide helps software developers create, package, and deploy desktop apps. The book teaches readers how to use JavaScript and Node.js to create desktop apps for Windows and MacOS. 

Electron Projects covers the process of building cross-platform Electron apps using modern web technology and Vue.js, React.js, and Angular. The book explains how to integrate Phaser with Electron to create a simple 2D game. It also covers how to build a screenshot-snipping tool, chat app, digital wallet app, and music player while teaching readers about licensing and analytics. 

The book is geared toward JavaScript developers who already have a working knowledge of Node.js and modern front-end JavaScript frameworks. Readers do not need any foundational knowledge of desktop development to get started. 

Electron in Action by Steven Kinney

Electron in Action teaches readers how to create cross-platform desktop apps that run on Linux, Windows, and OSX, including a text tool that reads and renders Markdown. It guides them through adding OS-specific features like menus, clipboards, and the file system. It also explains how to use Chromium’s tools to distribute the final product. 

Available in paperback and electronic form, this book is for developers with intermediate knowledge of Node.js and JavaScript. Readers do not need experience building desktop apps to read it. 

Cross-Platform Desktop Applications: Using Node, Electron and NW.js by Paul Jensen

Cross-Platform Desktop Applications teaches those without technical or coding backgrounds how to get started using Electron and similar JS-based platforms within a very narrow scope. The initial introduction to JS can be overwhelming to users, so having a starting point is useful.

Some of the projects within the book include creating a selfie app with your desktop camera and creating menus. You’ll also learn how to package apps for delivery, where to store app data and testing strategies.

If you’ve had issues with debugging apps, you’ll find guides to help you understand the process. Jensen uses specific examples and tasks throughout the book to teach users how to master Electron.

Developing an Electron Edge by Adam Lynch and Max Gfeller

Developing an Electron Edge is an excellent way to get up to speed fast for a class you’re taking or a project. If you feel a bit out of your element when creating an app and want to use JS, this focus on Electron covers the basics.

Although it covers simple tasks, it also delves into more complex topics such as how to distribute your app once it’s ready. The book has excellent reviews for the most part. However, JavaScript changes frequently so any of these books might feel a little outdated almost as soon as they’re published. You can still gather a lot of useful tips and apply them to current models.

Electron JS Tutorials Are a Valuable Resource

These days, many software developers are self-taught thanks to the countless resources available online and in print. Watching or reading an Electron JS tutorial is a great way to learn the software from the ground up. Once a developer masters Electron, they can go on to create their very own desktop apps, opening countless doors. 

Designerly is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Thank you!