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 the software.

YouTube 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. 

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. 

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. 

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. 

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.