Electron for Desktop Apps: The Complete Developer's Guide

Learn the core Electron architecture by building a desktop app that lets users select a video file and determine its duration with a main window and an index.html interface.

Set up a new electron project by creating a directory, running npm init, and installing electron, then create index.js and index.html to launch the app with require.

Learn to start and stop an electron app by wiring the app's ready event, logging startup messages, and launching via an npm script and the electron command line interface.

Create a main browser window in Electron, load a local index.html with the file protocol using __dirname, and open dev tools to troubleshoot the window's HTML content.

Learn to build a simple Electron desktop app form that prompts users to select a video file with a vanilla HTML file input, and understand browser versus Electron file access.

Add a get info button to submit the selected video file and use vanilla JavaScript to handle the form submit, prevent default, and read the video duration.

Learn how to use FFmpeg and the fluent-ffmpeg wrapper to query a video’s duration and metadata, installing the CLI and handling OS-specific setup in Electron.

Install ffmpeg on macOS using Homebrew, verify the installation with which ffmpeg, and troubleshoot if the path isn’t found.

Learn to feed a video file to ffmpeg via fluent ffmpeg, retrieve its duration, and display it via electron IPC, keeping OS-specific logic on the electron side.

Master inter-process communication in electron by sending a video path from the main window to the electron process, compute the duration on the electron side, and return it via IPC.

Learn how to use fluent-ffmpeg and ffprobe in an Electron app to obtain a video file's duration via IPC, handling the path from the renderer and logging the result.

Send video metadata duration from the electron app to the main window via webContents.send and ipcRenderer.on, then render the duration in the DOM while addressing variable scope.

Review how to build an electron app with two execution locations, create a main window, load index.html, and use IPC with IPC Main and ipcRenderer to enable inter-process communication.

Explore Electron app flow through a sample to-do application, focusing on cross-platform menu behavior, multi-window interactions, and practical gotchas when adding new windows.

Create a new Electron desktop app, initialize project files, install Electron, and explore polish in dropdown menus and multiple windows within a to do app.

Update package.json to start Electron, then create boilerplate that launches the main window on app ready and loads the main HTML via loadURL with __dirname.

Design and apply the top menu in an Electron app, noting macOS versus Windows behavior. Build a menu template and set the application menu.

Explore a gotcha in Electron: taking over the application menu displaces the default menu items and breaks common shortcuts, especially on macOS, requiring careful cross-platform handling.

Build cross-platform menus in Electron for macOS and Windows by checking process.platform (Darwin) to adjust the menu template, add a quit item with a click handler, and support a hotkey.

Configure cross platform hotkeys in electron by adding an accelerator to the quit menu, using process.platform to switch between command plus Q on macOS and control plus Q on Windows.

Learn to create a separate Electron window for adding a new to do, using a reusable create ad window function and a compact 300 by 200 pixel dialog.

Build an Electron ad window that loads ad.html with an autofocus to-do input. Learn how to load the page via index.js and explore window closing behavior.

Attach a closed event handler to the main window to quit the app when the window closes, delivering a polished desktop experience in Electron.

Learn inter-process communication in Electron by sending a new to-do from the add window to the main window via IPC, and enable developer tools with a dev menu and hotkeys.

Implement IPC communication between windows in Electron: read input with a query selector, send the to-do via IPC renderer, handle it in IPC main, and forward to the main window.

Explore how JavaScript garbage collection works in Electron by closing a browser window and clearing the ad window reference to null to reclaim memory.

Explore building a to-do feature in Electron by sending events from the main process to the renderer, updating the DOM via IPC, and using menu roles to reload for debugging.

Add a file menu option to clear the current to-do list by sending an IPC event to the main window and clearing the ul innerHTML to empty the list.

Add a clear to do list option to the menu template and send an IPC message from index.js to clear the list in the main window.

Learn to wrap an existing React timer app into an Electron desktop application with cross-platform system tray integration on Windows and OS X, focusing on Electron architecture and boilerplate.

Explore electron desktop app boilerplate, examining src directory and webpack bundled React code. Learn how the electron process creates a main window and tray icon on macOS and Windows.

Explore building an Electron app by creating a browser window and a tray icon as separate objects, wiring them together with boilerplate in index.js and loading index.html from src.

Learn to run an Electron app with a separate Webpack dev server, configure the browser window (height, width, frame false, resize false), and create a compact top-right window.

Create a tray icon in Electron by selecting the Windows icon on Windows and the icon template PNG on OSX, initialize the tray with that path, and test in Electron.

Learn to build an electron app that starts with the window hidden and reveals it on tray icon click, using a click handler to toggle visibility.

Toggle main window with the tray icon by checking visibility; hide when visible and show when not, then use set bounds to place it at macOS top-right or Windows bottom.

Explore the electron bounds system and position a tray window across macOS and Windows by using click bounds and window bounds to center under the tray icon.

Position the main window dynamically by using click bounds and the window bounds, then set x and y before showing it, avoiding hardcoding for OSX and Windows taskbar variations.

Position the window correctly on Darwin and Windows using a platform check, set bounds for the top-left corner, and use a ternary y coordinate, toggled by icon clicks.

Review organizing an electron app by extracting tray logic from index.js into separate files, extending the tray class with a timer tray, and preparing a JavaScript object oriented programming refresher.

Learn ES6 classes by building a car class, extending it to Honda, and using constructors and options to create instances, then apply this structure to a timer tray in Electron.

Explore ES6 class inheritance by creating a Honda subclass of car, using super for the parent constructor, and refactoring timer tray for cleaner, maintainable Electron code.

Create a timer tray subclass that extends the Electron tray base class, using super to pass the icon path and relocate the click handler while preserving existing functionality.

Finish the timer tray refactor by moving the onClick logic from index.js into the timer tray subclass and wiring the constructor to set up the click handler.

Add a tooltip to the tray icon by calling base tray's set tooltip method in the timer tray subclass. Hover the icon to reveal the timer app label, showcasing polish.

Learn how JavaScript garbage collection can cause the timer tray icon to disappear in an Electron app, and prevent it by keeping a reference with let tray.

Learn to add a right-click context menu to the Electron tray icon, with a quit option built from a template and shown using a pop up context menu.

Implement blur handling to auto-hide the browser window when the user focuses away, aligning with status bar app behavior, and plan refactoring the main window logic into its own class.

Hide the app icon in the dock to streamline the status tray interface by calling app.dock.hide inside the app.onready handler, then restart to verify no dock icon appears.

Refactor the electron app by extracting the main window into a Main Window class that extends BrowserWindow. Centralize options, handle blur to hide the window, and enable loading different URLs.

Extend the timer app to display the remaining time in the status bar and update it every second via IPC between the React frontend and Electron.

Update the tray timer by sending IPC events from the React side to Electron to display the remaining time with tray.setTitle, and clear on expiry.

Learn to prevent background throttling in Electron by setting webPreferences.backgroundThrottling to false, so timers run at full speed even when the browser window is not focused.

Design and implement a two-screen desktop app that converts video files between formats via drag-and-drop, queues videos, and lets users select a target format, with progress feedback until completion.

Navigate electron app challenges by wiring a browser window to load index.html, implement drag-and-drop via react and redux, and use ffmpeg for video details and conversion with a progress update.

Create an Electron app by wiring index.js to require Electron, open a browser window 600x800, load index.html for the React app, and disable background throttling via webPreferences.

Wire up an Electron app by creating a main browser window, loading the src/index.html, and using Webpack to serve the React UI with npm run electron and npm run start.

Learn how React and Redux coordinate in an Electron app, using a video select screen with drop zone, React Router navigation, and centralized action creators to handle Electron events.

Learn to display a pending video list with durations in an Electron app. Wire React and Redux to drive a conversion UI and fetch video metadata via IPC and ffmpeg.

Add an IPC main listener in the index file to log the incoming array of videos from the renderer and fetch metadata for each video using probe.

Learn to handle multiple asynchronous metadata fetches in parallel by wrapping each fetch in a promise and using Promise.all to know when all tasks finish.

Install the fluent-ffmpeg module and fetch metadata for a single video using ffprobe, then wrap the call in a promise and test with promise chaining to prepare for multiple videos.

Refactor the code to handle multiple videos by creating a promise for each video and using Promise.all to gather metadata from ffmpeg probe.

Refactor the probe to return a full video object with duration and Avi format, for multiple videos. Use IPC to emit metadata complete and update the Redux video list.

Set up ipc communication to trigger video conversion in an electron app using fluent ffmpeg module, handle progress and end events, and generate output paths from video file paths.

Learn to implement batch video conversion in an Electron app using FFmpeg, detecting end events, handling multiple videos in parallel, and signaling completion to the React UI via IPC.

Emphasizes inter-process communication by signaling conversion end from Electron main to the React/Redux UI, passing video and output path, and dispatching a video complete action to update the interface.

Learn to monitor ffmpeg conversion progress via the progress event, compute completion with the time mark, and update a React-Redux progress bar and open folder button.

Open a video's containing directory by intercepting a React click, sending an IPC message to Electron, and using shell.showItemInFolder to reveal the output folder in a file explorer.

Review building Electron desktop apps with any frontend tech, highlighting React and Redux use. Employ action creators and thunk to manage cross-process events, and use ffmpeg for video conversion.