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.

Adjust playback speed to 1.25 or 1.5 and enable auto captions for accessibility, and switch to the highest resolution when the connection is slow to clearly see the code.

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 electron main process to create and display the native application window, linking it to the renderer that renders HTML content via the BrowserWindow and ready event.

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 bootstrap an Electron app with the quickstart project, clone the Git repo, npm install, npm start, view hello world, and inspect the app with developer tools.

Explore the Electron project structure, including index.html, styles.css, main.js, preload.js, and renderer code, and understand package.json configured main entry and Electron scripts.

Explore how the electron main process manages app lifecycle, creates the main window, uses preload as a bridge for the render processor, and handles macOS events in the main.js boilerplate.

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.

Set up nodemon to automatically restart your Electron app on code changes by configuring npm scripts to watch JavaScript, HTML, and CSS files and run Electron.

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.

Clone the minimal repo, rename its folder to learning electron, install and configure nodemon to reload on CSS, HTML, and JS changes, update the start command; run npm start.

Explore configuring Electron’s browser window with an optional options object to set width, height, min/max sizes, and constraints like resizable and movable, plus using a preload script for main-to-renderer communication.

Configure the window title by using the index.html title tag, then the browser window options title, and finally the package.json name, with HTML taking priority.

Configure the main window by setting width to 1000 pixels and height to 700 pixels. Make the window resizable and set its title to Learning Electron.

Configure the window with the options object and set frame to false to create a frameless window that displays only the HTML content, which cannot be moved without a toolbar.

Make the frameless electron window draggable by adding the -webkit-app-region: drag attribute to the body in styles.css, then apply -webkit-app-region: no-drag to non-draggable elements.

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.

Create a child window in an electron app by duplicating main browser window, loading child.html, and setting main window as its parent so it closes with main window.

Master browser window events in Electron by using once for ready to show and on for multiple events, handling ready to show, show, close, and closed in the main process.

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.

Explore how to implement modal windows in Electron by creating a child browser window that blocks the main window. Load a separate HTML and show it on ready-to-show.

Electron derives app title from HTML title tag, window title, or package.json name; use frameless or transparent windows with Dash WebKit app region and ready-to-show, show, close, and closed events.

Practice building a simple Electron project that hashes user input with MD5, SHA-256, and SHA-512, and shows the hex output, inviting you to try before watching the solution.

Learn to build a responsive electron app ui using bootstrap grid, containers, and form controls to hash text with MD5, SHA1, SHA256, and SHA512, including output areas and CSP considerations.

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.

Install Electron Builder, configure a minimal build in package.json with appId, productName, files, and dist output, then run npm run build to generate the executable.

Learn to handle browser window events in electron with on and once, covering ready to show, resize, close, focus, blur, and unresponsive events.

Learn how the ready-to-show event signals that the browser window is ready to display after the renderer finishes rendering the HTML. Avoid flicker by delaying window show until this event.

Learn how Electron handles the close and closed events. Use event.preventdefault to cancel closing and show a message box from the dialog module, then clean up after the window closes.

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's resize and move events to track window size and position, trigger calculations and redraw canvases, save size state to a config, and restore or sync windows on reopen.

Explore the unresponsive and responsive events in Electron, triggered by blocked rendering or heavy computation, enabling warnings and recovery actions, including user dialogs and restoring normal UI.

Explore the four stages of the Electron application life cycle—initialization, ready, running, and quit—and how the main process uses the app module and on events to manage them.

Explore how the Electron app module in the main process manages the application life cycle, handling ready, window-all-closed, before-quit, will-quit, quit, and activate events and creating windows.

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

Create a simple session tracker app using Electron that records the start time, computes the run duration in seconds on before-quit, and displays it in an info dialog.

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.

Discover the Electron menu class for creating application and context menus. Use static methods like setApplicationMenu, getApplicationMenu, and buildFromTemplate, and manage instance methods, events, and the items property.

Explore the menu item class in Electron and learn how the options object configures a single item with label, click, role, accelerator, and type.

Master the electron menu class static methods to set, get, and build the application menu from a template using a menu instance or null.

Create a custom Electron menu from a JSON template, wire file and help items with close and about actions, and show a child about window when needed.

Learn the menu class instance methods, including append, insert, popup, close popup, and get menu item by id, to build and display context menus in a browser window.

Configure a keyboard shortcut to show the about window via the accelerator on a menu item, supporting macOS command and Windows Ctrl, using control+shift+a as an example in Electron.

Explore the ipcMain module in the main process, handling asynchronous and synchronous messages with on, handle, and once, using channel names, event objects, and invoke for renderer request–response.

Learn the ipcRenderer module to send asynchronous and synchronous messages between the renderer and main processes using send, invoke, on, once, and remove listener.

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.

Convert fire-and-forget ipc to a request‑response pattern using ipcRenderer.invoke, await the reply from the render process, and return a value in the main process to complete the IPC.

Learn IPC sync messaging in Electron by sending a greeting from the renderer to the main process and displaying the reply, which blocks the renderer until a response is returned.

Explore the event object in electron's ipc communications, using event.reply and event.sender.send to reply via different channels, such as git status and status response, in the main and renderer processes.

Explore IPC async messaging to prevent renderer blocking by sending asynchronous messages from the render process to the main process, handling replies with event-based callbacks and simulated delays.

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 app by applying the Pomodoro technique with 25 minute work intervals and 5 minute breaks, featuring start, pause, stop controls, desktop notifications, and developer tools.

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.

Open the Pomodoro Wikipedia page with the shell module to demonstrate external URLs, and implement timer control via interprocess communication between the main and renderer processes.

Implement a renderer process timer in an Electron app by wiring start, stop, and pause controls to a 25-minute Pomodoro, updating the display and handling IPC timer control messages.

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.

Learn to control chromium's color theme with electron's nativeTheme, using themeSource (system, light, dark) and shouldUseDarkColors to drive styling, via a render process and main process IPC pattern.

Explore making HTTP and HTTPS requests in Electron with the net module, handling responses, data chunks, and end events, then contrast with fetch using async/await and response.json.