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 process. The browser process operates the app logic and launches different renderer processes. Both processes are capable of running with Node.js integration.
Tutorials and Courses
Here are the best tutorials and courses to learn Electron.
- Official Documentation – Learn about every aspects of working wit Electron, from installing 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 it 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 image. You will learn about basics of how to create an electron application, customize the toolbar area of the application, use dialog windows with electron, use AngularJS in an Electron application.
- Creating screenshots of your app or the screen – In this tutorial, you’ll learn how to use desktopCapture to capture a screenshot from different areas in 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 bare minimum of tooling and dependencies to provide you with 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 integrations 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.
- Most Popular Electron Apps
Electron (formerly known as Atom Shell) is an open-source software framework which allows for the development of desktop GUI applications using web technologies. With the statement "If you can build a website, you...
- How to set up hot reload in Electron
Hot Reloading is a beloved feature of developers. It allows changes in source code to be instantly reflected in the output/browser without restarting the application. Electron does not provide any...