Electron Masterclass: Build Desktop Apps with JavaScript

Create your first electron application from scratch, learn the project setup and boilerplate, and compare it with cloning a quick starter project.

Set up the electron application by creating a project folder, initializing npm, configuring main.js as the main process entry, and scaffolding renderer files (index.html, renderer.js, styles.css) with a start script.

Implement the renderer in an electron app by loading index.html with styles.css and renderer.js, styling a green page with a centered header and a welcome alert.

Learn to prevent flash in Electron by delaying the browser window until ready to show, and set a background color while using a one-time ready-to-show listener to display main window.

Learn to set up an Electron app with an npm project, install Electron, and create a main.js entry that opens a browser window that loads HTML after the ready event.

Learn to convert an Electron window to a frameless window, add a custom title bar with a close button, style it, and enable dragging only from the title area.

Learn to create a transparent Electron window by enabling the transparent option, removing the background color in CSS, and hiding the menu with frame: false to reveal a transparent window.

Explore BrowserWindow methods to show, hide, resize, and query properties like background color and bounds in Electron. Use the enter full screen event to trigger a delayed window close.

Display a child window within a notes app by creating main and child windows, renaming them to notes and new note, and wiring a working close button.

Adjust the Electron main window position and size by setting x, y, width, and height in the options to control resizing and fullscreen behavior.

Implement app functionality in the Electron renderer by loading jQuery, handling document ready, hashing text with crypto (md5, sha1, sha256, sha512), and noting node integration and content security policy.

Focus and blur events fire when the window becomes active or loses focus. Use them to resume animations, refocus inputs, pause updates, or hide sensitive content.

Explore Electron application lifecycle events by wiring ready, activate, all closed, before quit, will quit, and quit handlers, with console logs and exit codes.

The electron application's lifecycle flows through four main stages: initialization, ready, running, and quit. Use the app.open(eventName, callback) to listen to and handle each lifecycle event as it triggers.

Learn to replace the default browser menu with a custom Electron app menu using Menu and MenuItem, via a JSON template with submenus, click handlers, accelerators, and native events.

Demonstrate fire-and-forget IPC in Electron by wiring a renderer button to send a message to the main process, which logs the data without awaiting a reply.

Create and display a child window via IPC when the new note button is clicked; move renderer code to separate files and enable node integration with context isolation disabled.

Create a pomodoro timer UI for an Electron app by wiring bootstrap styling, a timer display, and start, pause, and stop controls.

Build a custom Electron menu from a template with a timer submenu (start, pause, stop) and a help item to show a Pomodoro wiki, then set the application menu.

Learn how to use Electron's clipboard module to copy and paste text through the renderer and main processes, with IPC communication and a practical code example.