Learn how to Build Desktop Applications with Electron

Thoroughly learn how to build cross-platform desktop applications using Electron in this series. We’ll cover everything from the basics and fundamentals to building apps and combining Electron with technologies like React.

image from the Electron home page

Disclaimer

All articles in this post including this one, are a work in progress and subject to constant change and revisions. Don’t consider them as complete works and please do leave any feedback. They’ll be considered “complete” when this message is no longer here.

Update: 10/30/2019
Sorry for the delay guys. 😅 I will be reviving this series soon, probably after I finish the 2nd edition of JavaScript Essentials. Right now the existing tutorials should still work and the concepts are the same. If you are sure something is not working, then check the Electron breaking changes page.

electron/electron (breaking changes)

Electron Basics

The core concepts, a light introduction to Electron code and then a slightly more complex todo app.

Basics and Fundamentals

This post is all theory and defines what the main process, browser process, and IPC communication is. I recommend not skipping it — it’s short.

Electron Basics and Fundamentals

Build a File Metadata App

We take baby steps and see what Electron and all the theory from the previous tutorial look like in code. You can skip this if you’re familiar with NodeJS and you are comfortable diving into code.

Build a File Metadata App in Electron

Build a Todo App

A more complex app that showcases extending Electron objects, IPC communication, and data storage.

Build a Todo App with Electron

Electron Development

Development tools, methods, and patterns for Electron apps.

A Better Development Environment

To be added

Common Tools and Methods

To be added

Compile an Electron Application

To be added

Specific Electron Tutorials

Specific functionality and methods like downloading files, combining Electron with React, etc. You should already be familiar with the basics of Electron before reading these.

Create an Overlay UI

To be added

Build a Task Reminder Tray App

To be added

Combine Electron and React

To be added

Build a Markdown Text Editor with Electron and React

To be added

Build a File Downloader

To be added

Extend Electron Capability with Another Programming Language

To be added

Resources

Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.

Thanks for checking out this series!

Leave any feedback or questions in the comments below.