FREE
You can see this entire book for free.Click the table of contents to start reading.
The definitive source on cross-platform desktop app development with a code-driven narrative.
Electron in Action guides you, step-by-step, as you learn to build cross-platform desktop applications that run on Windows, OSX, and Linux. By the end of the book, you'll be ready to build simple, snappy applications using JavaScript, Node, and the Electron framework.
About the Technology
Wouldn’t it be great to build desktop applications using just your web dev skills? Electron is a framework designed for exactly that! Fully cross-platform, Electron lets you use JavaScript and Node to create simple, snappy desktop apps. Spinning up tools, games, and utilities with Electron is fast, practical, and fun!
About the book
Electron in Action teaches you to build cross-platform applications using JavaScript, Node, and the Electron framework. You’ll learn how to think like a desktop developer as you build a text tool that reads and renders Markdown. You’ll add OS-specific features like the file system, menus, and clipboards, and use Chromium’s tools to distribute the finished product. You’ll even round off your learning with data storage, performance optimization, and testing.
Table of Contents takes you straight to the bookdetailed table of contents
Part 1: Getting started with Electron
1 Introducing Electron
1.1 What is Electron?
1.1.1 What is the Chromium Content Module?
1.1.2 What is Node.js?
1.2 Who’s using Electron?
1.3 What do I need to know?
1.4 Why should I use Electron?
1.4.1 Leveraging your existing skill set
1.4.2 Access to native operating system APIs
1.4.3 Enhanced privileges and looser restrictions
1.4.4 Accessing Node from the browser context
1.4.5 Offline First
1.5 How does Electron work?
1.5.1 The main process
1.5.2 Renderer processes
1.6 Electron vs. NW.js
1Summary
2 Your first Electron application
2.1 Building a Bookmark List Application
2.1.1 Structuring Our Electron Application
2.1.2 package.json
2.1.3 Downloading and Installing Electron in Our Project
2.2 Working with the Main Process
2.3 Creating a Renderer Process
2.3.1 Loading Code from the Renderer Process
2.3.2 Requiring Files in the Renderer Process
2.3.3 Adding Styles in the Renderer Process
2.4 Implementing the UI
2.4.1 Making Cross-Origin Requests in Electron
2.4.2 Parsing Responses
2.4.3 Storing Responses With Web Storage APIs
2.4.4 Displaying Request Results
2.4.5 The Unhappy Path
2.4.6 An Unexpected Bug
2.5 Summary
Part 2: Building cross-platform applications with Electron
3 Building a Notes Application
3.1 Defining our application
3.2 Laying the foundation
3.3 Bootstrapping the application
3.3.1 Implementing the user interface
3.3.2 Gracefully Displaying the Browser Window
3.4 Implementing the base functionality
3.5 Debugging an Electron application
3.5.1 Debugging renderer processes
3.5.2 Debugging the main process
3.5.3 Debugging the main process with Visual Studio Code
Summary
4 Using Native File Dialogs and Facilitating Inter-Process Communication
4.1 Triggering Native File Dialogs
4.2 Reading Files Using Node
4.2.1 Scoping the File Open Dialog
4.2.2 Implementing Dialog Sheets in macOS
4.3 Facilitating interprocess communication
4.3.1 Introducing the remote module
4.4 Triggering the Open File function using interprocess communication
4.4.1 Understanding the CommonJS Require System
4.4.2 Requiring Functionality from Another Process
4.5 Sending content from the main process to the renderer process
4.5.1 Sending the File Contents to the Renderer Contents
Summary
5 Working with Multiple Windows
5.1 Creating and managing multiple windows
5.1.1 Communicating Between the Main Process and Multiple Windows
5.1.2 Passing a Reference to the Current Window to the Main Process
5.2 Improving the user experience of creating new windows
5.3 Integrating with macOS
Summary
6 Working with files
6.1 Keeping track of the current file
6.1.1 Updating the Window Title Based on the Current File
6.1.2 Determining If the Current File Has Changed
6.1.3 Enabling the Save and Revert Buttons in the User Interface
6.1.4 Updating the Represented File on macOS
6.2 Tracking recently opened files
6.3 Saving files
6.3.1 Exporting the Rendered HTML Output
6.3.2 Common Paths
6.3.3 Saving Files from the Renderer Process
6.3.4 Saving the Current File
6.3.5 Reverting Files
6.4 Opening files using drag and drop
6.4.1 Ignoring Dropped Files Everywhere Else
6.4.2 Providing Visual Feedback
6.4.3 Opening Dropped Files
6.5 Watching files for changes
6.6 Prompting the user before discarding changes
Summary
7 Building application and context menus
7.1 Replacing and replicating the default menu
7.1.1 macOS and the Case of the Missing Edit Menu
7.1.2 The Hidden Cost of Replacing Electron’s Default Menu
7.1.3 Implementing the Edit and Window Menus
7.1.4 Defining Menu Item Roles and Keyboard Shortcuts
7.1.5 Restoring the Application Menu on macOS
7.1.6 Adding a Help Menu
7.2 Adding application-specific menu functionality
7.2.1 Handling the Edge Case of Having No Focused Window
7.3 Building context menus
Summary
8 Further operating system integration and dynamically enabling menu items
8.1 Using the shell module from the UI in the renderer process
8.2 Using the shell module in the application menu
8.2.1 Additional Features of Electron’s Shell Module
8.3 Accessing the shell module from a context menu
8.3.1 Deciding Between Putting Functionality in a Menu or in the User Interface
8.3.2 Deciding Between Putting Functionality in the Application or Context Menu
8.4 Disabling menu items when appropriate
8.4.1 Dynamically Enabling and Disabling Menu Items in the Context Menu
8.4.2 Dynamically Enabling and Disabling Menu Items in the Application Menu
Summary
9 Introducing the tray module
9.1 Getting started with Clipmaster
9.2 Creating an application with the tray module
9.2.1 Using the Correct Icon for macOS and Windows
9.2.2 Supporting Dark Mode in macOS
9.2.3 Reading from the Clipboard and Storing Clippings
9.3 Reading from and writing to the clipboard
9.3.1 Writing to the Clipboard
9.3.2 Handling Edge Cases
9.4 Registering global shortcuts
9.4.1 Checking Registrations and Unregistering Global Shortcuts
9.5 Displaying Notifications
9.6 Switching menu bar icons when pressed in macOS
9.7 Completed Code
Summary
10 Building Applications with the Menubar Library
10.1 Starting an application with menubar
10.2 Adding clippings to the UI
10.3 Working with clippings in the application
10.3.1 Preventing Memory Leaks Using Event Delegation
10.3.2 Removing a Clipping
10.3.3 Writing to the Clipboard
10.4 Publishing clippings
10.4.1 Setting Up Request
10.5 Displaying notifications and registering global shortcuts
10.5.1 Registering Global Shortcuts
10.5.2 Solving for the Edge Case that Occurs if the Window Has Never Been Shown
10.6 Adding a secondary menu
Summary
11 Using Transpilers and Frameworks
11.1 Introducing electron-compile
11.2 Laying the application’s foundation
11.3 Building the UI in React
11.3.1 The Application Component
11.3.2 Displaying the Lists of Items
11.4 Adding new items
11.5 Live reload and hot module reloading
11.5.1 Enabling Live Reload
11.5.2 Setting Up Hot Module Reloading
Summary
12 Persisting user data and using native Node.js modules
12.1 Storing data in an SQLite database
12.1.1 Using the Right Versions with electron-rebuild
12.1.2 Setting Up SQLite and Knex.js
12.1.3 Hooking The Database Into React
12.1.4 Fetching All of the Items from the Database
12.1.5 Adding Items to the Database
12.1.6 Updating Items in the Database
12.1.7 Deleting Items
12.1.8 Storing the Database in the Right Place
12.2 IndexedDB
12.2.1 Creating a Store with IndexedDB
12.2.2 Getting Data from IndexedDB
12.2.3 Writing Data to IndexedDB
12.2.4 Wiring It All Up
Summary
13 Testing Applications with Spectron
13.1 Introducing Spectron
13.2 Getting comfortable with Spectron and WebdriverIO
13.3 Setting up spectron and the test runner
13.4 Writing asynchronous tests using spectron
13.4.1 Waiting for the Window to Load
13.4.2 Testing Electron BrowserWindow APIs
13.4.3 Traversing and Testing the DOM with Spectron
13.4.4 Controlling Electron’s APIs with Spectron
Summary
Part 3: Deploying Electron applications
14 Building Applications for Deployment
14.1 Introducing Electron Packager
14.1.1 Setting Up Electron Packager
14.1.2 Configuring the Output Directory
14.1.3 Configuring the Application’s Name and Version
14.1.4 Updating the Application Icon
14.1.5 Building for Multiple Operating Systems
14.2 Using asar
14.3 Electron Forge
14.3.1 Importing an Electron Application into Electron Forge
14.3.2 Building the Application with Electron Forge
Summary
15 Releasing and updating applications
15.1 Collecting crash reports
15.1.1 Setting up the crash reporter
15.1.2 Setting up a server to receive crash reports
15.1.3 Reporting uncaught exceptions
15.2 Signing your applications
15.2.1 Signing applications for macOS
15.2.2 Building an installer and code signing on Windows
15.3 Automatically updating applications
15.3.1 Setting up automatic updates in Electron
15.3.2 Setting up a server for automatic updates
Summary
16 Distributing your application through the Mac App Store
16.1 Submitting your application to the Mac App Store
16.1.1 Signing the application
16.1.2 Registering your application with the Mac App Store
16.1.3 Adding the application to iTunes Connect
16.1.4 Packaging your application for the Mac App Store
16.1.5 Configuring application categories
16.1.6 Register the application to open a file type
16.2 Validating and uploading your application
16.3 Finishing touches
Summary
Appendix A: Code samples from Fire Sale and Clipmaster 9000
Code from the end of chapter 6
Code from the end of chapter 7
Code from the end of chapter 8
Completed code from the end of chapter 10
What's inside
- Building for macOS, Windows, and Linux
- Native operating system APIs
- Using third-party frameworks like React
- Deploying to the Mac App Store
