FrontendMasters – Build Cross-Platform Desktop Apps with Electron Download
Learn how to build desktop applications with Electron, the underlying technology for Github’s Atom text editor, Microsoft’s Visual Studio Code IDE, Slack’s desktop application, and many others!
This course and others like it are available as part of our Frontend Masters video subscription.
Table of Contents
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. – https://nodejs.org/api/fs.html
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. – https://github.com/electron/electron/blob/master/docs/api/shell.md
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.
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. – https://github.com/electron-userland/electron-packager
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.