Build Cross-Platform Desktop Apps with Electron
This course has been updated! We now recommend you take the Electron Fundamentals, v2 course.
Table of Contents
The Electron Big Picture
OverviewTalks about the origins of Electron, Steve reviews the scenarios where building a desktop OS over a web application. Steve discusses applications that use Electron.
Technology BenefitsExplaining the technology makeup of Electron, Steve illustrates the benefits of Chrome Content Module and Node without the programming headaches for building an application on open web technologies.
Getting an Electron Application Up and Running
Structuring an Electron ApplicationDemonstrating the capabilities of an Electron application, Steve walks through installing Electron and setting up a simple application.
Coding a Proof of ConceptSteve continues to showcase Electron capabities by building a small, proof of concept application for MacOS.
Bringing in ModulesWith the basic application framework in place, Steve demonstrates the modules available for quickly building out an app in the main process. The main process is the part of application code that communicates directly with the underlying operating system.
Bookmark ApplicationSteve shows how Electron allows combined access to application file system and the DOM.
Shell ModuleTo open a URL in the user's default browser, Steve shows how Electron can handle URLs using the `shell` module.
Debugging ElectronSteve introduces Devtron, a tool that helps inspect and debug Electron applications.
Changing Theme StylesUsing systemPreferences Module, Steve shows how to set an application into Dark Mode with the remote module that is used to handle main process modules from the renderer process.
Building a Markdown Text Editor
Rendering MarkdownSteve begins working on the second course Electron application: a Markdown-to-HTML renderer called Firesale.
Setting the OS FontSteve shows how to configure an Electron application's main typeface to the default OS's font by setting the CSS font property to a value of menu.
Opening a FileUsing Electron's dialog module, Steve codes a feature to call a native dialog box to open a new file from the user's file system. He also demonstrates OS integration by showing how to animate the dialog box to slide into view.
Filtering File TypesWith Electron, Steve shows how to limit the type of files the application can open by adding filters to the dialog box.
Managing Multiple Windows
Reading File ContentsUsing the File System Node module, Steve adds a feature to the application to get a file's path and read the file's content.
Open File ButtonWhile loading files and logging to the terminal is possible, Steve uses the remote module to send the content over to the render process.
Displaying a FileSteve shows how to have the main render communicate with a render process to open and display files in the user's operating system. Then he takes questions from students.
RefactoringSteve refactors his code example for displaying a file.
Multiple WindowsWhile making sure the new dialog box opens in the correct window, Steve shows how to allow different files to display in multiple windows of the markdown text editor.
Title BarSteve shows how to set the title of the window to the name of the filename. Also, he provides visual cues by placing the file icon next to the filename and visually notifying the file as edited on the MacOS' app window's menu bar button.
Save ChangesSteve builds out a prompt to warn users to save their file before losing changes to their file.
Detecting ChangeTo determine a file change, Steve codes an update keep track of the original content of a newly opened file and compare it to the user's file to see if any changes have been made.
Additional Visual CuesSteve provides support for file edited visual cues for Windows and Linux by appending "(Edited)" in the title bar.
Revert and Save ButtonsIf a file has been edited, Steve codes the Save and Revert buttons to be enabled.
Recently Opened FilesTo select previously opened files, Steve uses an “open-file” event that can listen in the main process and then be made to spawn a fresh window.
Saving FilesTriggered by the rendering process, Steve codes a function in the main process to save a file.
Watching FilesSteve incorporates a file watcher. When a file's contents change in another editor, then that change is reflected in our application.
Accessing the Operaring SystemUsing Electron to let the application interact with user's operating system with the shell module, Steve implements two new features: Show in File System and Open in Default Editor.
Menu Bar Items
Introducing Menu Bar ItemsBesides web page looking buttons, desktop applications typically have a menu bar with options like File, Edit, View, etc. Steve shows the defaults for menu bar items that Electron provides. However, if you want a customized menu, however, the entire menu needs to be re-created.
Building a Menu BarOverriding the default menu that Electron provides, Steve sets out to create a custom menu bar by first recreating the default functionality of menu bar through an array of menu items. Accelerators (keyboard shortcuts) and roles can also be assigned and customized depending on the user's built-in OS functionality to provide a more natural user experience.
Menu Bar Applications
Introducing Menu Bar ApplicationsA menu bar application is an application that lives in the menu bar (OS X) or system tray (Windows). By using a menubar library that abstracts some of the OS-specific implementation details of building an application, Steve shows that we can leverage the capabilities of Electron to provide focused menubar apps.
Code Review of a Menu Bar ApplicationSteve highlights code sections of a menu bar application.
Package an Application for Distribution
Introducing Electron PackagerIntroducing the command line tool and Node.js library Electron Packager, Steve presents how an Electron application can be bundled with different operating systems.
Packaging an Electron AppSteve packages up the Fire Sale application for distribution.
Adding an IconDemonstrating how to include a customized application icon, Steve rebuilds the packaging of the application.