Master Electron: Desktop Apps with HTML, JavaScript & CSS

Learn to install and run an Electron project.

A step-by-step look at how an Electron app starts, creates app windows and loads content into those windows.
This lesson will provide you with a clear understanding of what happens when we compile and run an Electron app and demonstrates the 2 processes that comprises the app.

Learn to compile and use native Node.js modules for Electron.

Learn to debug both Main & Renderer processes of an Electron app.

A quick demo on how to reset the project code after each lesson.

This lesson covers Electron's main app instance.
This module is used to control the entire application lifecycle.

The BrowserWindow module is used to create renderer processes (app windows).

In this lesson we'll see how to manage & control the creation and content of app windows.

An Electron app can consist of multiple BrowserWindows and the Electron API allows us to create relationships between these windows.
In this lesson we'll see how to create those relationships and also how to create modal child windows.

Some applications will require a cleaner looking BrowserWindow without the native system elements like menu bars.
In this lesson we'll see how to create these minimal windows and define how the user can interact with them.

This lesson is a broad overview of some of the important, or interesting, BrowserWindow methods. It covers both static methods instance methods and events.

A short tutorial on using the Electron-Window-State package to manage and persist the BrowserWindow state between sessions.

Learn to use the webContents module to take full control of the contents loaded into the BrowserWindow instance.

This lesson includes a selection of important topics such as:

• Handling new window actions

• Intercepting and invoking navigation events

• Accessing content behind basic auth

• Listening for media events like play & pause

• Interpreting context menu events when a user right clicks

And a general overview of the more generic or self-explanatory methods & events.

Understand the context in which an Electron session exists and how to create & attach custom sessions to specific BrowserWindow instances.

A short expansion on using the Cookies class to extend Session storage.
Learn to read & write cookies on a session instance.

Manage app downloads with the downloadItem object on the will-download session event.

This lesson will show you how to manage download state and set predefined download locations.

The Electron Dialog module provides easy access to native system dialogs including:

• Save file dialog
• Open file dialog
• Error dialog
• Message dialog

Learn how to create and customise these dialogs for a completely native solution to user input.

Understand the concept of accelerator strings to define keyboard shortcuts and implement them using the globalShortcut class.

Accelerator strings is an important part of Electron and will come in use when creating Menus also.

The Menu class will enable you to create rich, native application menus.

This lesson will teach you how to create menus and then populate them with menu items, using the menuItem class and also how to simplify menu creation through the use of menu templates.

Learn to implement Electron menus as contextual context menus when a user right clicks.

Learn to add an Electron app to the operating system's task bar with it's own context menu and actions.

The powerMonitor class is used to monitor power-state changes to the user's machine.
These state changes include:

• Suspend/Sleep
• Resume/Wake
• AC Power
• Battery Power

Use the screen module to access information about connected screens.

A short introduction to the renderer process and where it fits into an Electron application.

See how to reference Electron-generated browser windows from the window.open method.
This lesson will teach you how to:

• Control BrowserWindow instance generated from the window.open method

• Customise new browser windows with frame features.

• Inject custom JavaScript into the ew browser window from the renderer process.

Manage basic rendering of the webContents via the webFrame module.
See how to:

• Control zoom levels
• Inject custom JavaScript
• Check resource usage

Learn to access system screens and windows using the dektopCapturer module.

This standalone section covers the use of Inter-Process Communication (IPC) in an Electron app.
The IPC modules allow Electron's Main and Renderer Process's to communicate.

Learn how to use these modules synchronously or asynchronously and organise data exchanges via custom channels.

Simplify common IPC use-cases and access the main process from the renderer.
Learn how to use this module and understand how it works internally.

Learn to use the new IPC Invoke & Handle methods for simplified Inter-Process logic handling without the use of the Remote module.

Learn about Electron's unique extensions to the global Node process object.

Use the modified process to invoke app crashes & hangs, check process memory usage and more.

Pass both local and remote files to default system apps instead of handling them inside the Electron app.
The shell module allows integration with the user's preferred applications for varying file types.

Use NativeImage objects to take full control of images inside an Electron app.

• Create a NativeImage instance
• Save PNG, JPEG, or BMP file from a NativeImage instance
• Crop, Resize images

Learn to perform copy & paste commands to and from the system clipboard.

Use offscreen webContents with hidden BrowserWindows to perform tasks on a renderer process in the background.

Get notified of changes to a user's connection status using the HTML5 navigator API.

Learn to create native system notifications with custom click handlers from an Electron app.

Learn to extend and customise a secured renderer process with Node integration disabled with the use of preload scripts.

Create simple native app progress bars via the BrowserWindow.

An overview of the bookmarking application we'll be building & the initial HTML structure.

Create the modal functionality and add IPC communication for adding new items.

Get a new item thumbnail & image, using an offscreen BrowserWindow.

Add new items received from the main process to the app and persist with simple data storage.

Add item selection and keyboard navigation.

Create the "read" functionality by opening items in a proxy window.

Add a button to the reader window for deleting items and persisting changes.

Add an application menu with platform specific menu items and full keyboard control.

An introduction to application distribution and auto updating with Electron Builder.

Learn to prepare & configure your app for compilation with the Electron-Builder command line tools.

Includes building for both Mac, Windows & Linux.

Application code signing for development.

• Generate self-signed code signing certificates for Mac & Windows

• Configure electron-builder to sign apps

Use GitHub Releases to create and publish application versions for use with the electron-builder autoUpdate module.

Learn to integrate and debug electron-builder's autoUpdater module.

Implement a complete user interface for updating an application:

• Check for updates

• Prompt the user to update

• Download an update

• Prompt the user to install the downloaded update

A complete walkthrough of the final application update in production.

An overview of what notarization is and why it's important.

Learn to integrate the notarization process into your existing build with Electron-Builder.