Electron is among the most popular open-source frameworks for developing and designing cross-browser and cross-platform interactive and dynamic apps. It’s the central GUI framework behind WordPress Desktop, GitHub Desktop, Light Table, Atom, and Visual Studio Code.
Electron apps consist of the renderer processes and browser processes. The browser process operates the app logic and launches different renderer processes. Both processes are capable of running with Node.js integration.
Table of Contents
Tutorials and Courses
Here are the best tutorials and courses to learn Electron.
- Official Documentation – Learn about every aspect of working with Electron, from installing the dev environment on any OS to API Structure.
- Essential Electron – If you want to know what is Electron and what it can do, read this overview.
- Electron for Desktop Apps: The Complete Developer’s Guide – In this course, you will learn the history and theory behind Electron, how to build native-feeling apps that work on Windows and macOS from one codebase, and master Electron JS. You will also learn how to build both status tray-based applications and traditional single-window applications and how to integrate technologies such as Redux and like into Electron JS apps. The course will teach you how to develop 4 different applications with increasing difficulty.
- Projects in Electron: Learn Electron Framework Building Apps – The project-based course will teach you how to install and set up an Electron and how you can use it by developing 5 separate projects with this framework. These projects include a Tic Tac Toe Game, Pomodoro Clock, Weather App, Currency Converter, and Body Mass Index.
- Electron Fundamentals – This course covers everything about Electron and how you can use it to build desktop apps using your existing web tech skills. It covers the Electron APIs and features and how you can use them to your advantage. You will also learn how to share and package up the app you have developed.
- Image Editor Application With Electron – This tutorial will show you how to create an app that can edit images. You will learn about the basics of how to create an electron application, customize the toolbar area of the application, use dialog windows with Electron, and use AngularJS in an Electron application.
- Creating screenshots of your app or the screen – In this tutorial, you’ll learn how to use desktop capture to capture a screenshot from different areas on the Desktop.
IDEs and Code Editors
- Visual Studio Code – Electron Highlighter Syntax is the extension you need. It is a dark UI and syntax theme for VS Code.
- Atom – Support for Electron app development can be easily added by adding an electron package.
Boilerplates / Themes
- electron-boilerplate – This project contains only the bare minimum of tooling and dependencies to provide you with a simple-to-understand and extensible base.
- electron-react-boilerplate – Electron React Boilerplate uses Electron, React, Redux, React Router, Webpack, and React Hot Loader for rapid application development (HMR).
- generator-electron – This boilerplate prepares many features, including cross-platform builds, Silent auto-updates, app, and contextual menu, user-friendly handling of unhandled errors, and many more.
- descjop – A Leiningen template(Clojure/ClojureScript Project) for Web-based desktop application with Electron (atom-shell).
- electron-vue – An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
- electron-next-skeleton – Build your app with Electorn + Next.js.
- Photon – The fastest way to build beautiful Electron apps using simple HTML and CSS.
- Spectron – An open-source framework for easily writing integration tests for your Electron app.
- Devtron – Devtron is an open-source tool to help you inspect, monitor, and debug your Electron app. Built on top of the amazing Chrome Developer Tools.