Electron Desktop Apps
Build cross-platform desktop apps with Electron: IPC architecture, contextBridge security, native menus, auto-update, and packaging with electron-builder.
Electron builds cross-platform desktop apps using web technologies. It powers VS Code, Slack, Discord, and Figma. The main process handles system APIs; the renderer process shows HTML/CSS/JS UI. Security requires careful IPC design through contextBridge.
Never enable nodeIntegration in renderers - use contextBridge with an explicit preload API instead. Keep the main process thin; push logic to the renderer or shared utilities. Use electron-builder for packaging. Test on all target platforms.
Workflow
- Set up the main/renderer/preload architectureElectron's security model separates node access (main) from web UI (renderer); preload is the controlled bridge.
- Design type-safe IPC channelsUntyped string-based IPC channels cause runtime errors and are hard to maintain.
- Add native OS featuresNative menus, tray icons, and notifications make desktop apps feel platform-native.
- Implement auto-updateDesktop users don't update manually; auto-update is critical for security patches and feature delivery.
- Package and distribute with electron-builderelectron-builder handles cross-platform packaging, code signing, and update publishing in one config.
Output Format
contextBridge preload API, typed IPC channels, native menus and tray, auto-updater, electron-builder packaging for mac/win/linux.
Examples
contextBridge: `contextBridge.exposeInMainWorld("electronAPI", { readFile: (path: string) => ipcRenderer.invoke("read-file", path), onUpdate: (cb: (data: any) => void) => ipcRenderer.on("update", (_, data) => cb(data)) })`IPC handler: `ipcMain.handle("read-file", async (event, filePath: string) => { return await fs.readFile(filePath, "utf-8") })`Auto-update: `autoUpdater.on("update-downloaded", () => { dialog.showMessageBox({ message: "Update ready, restart?" }).then(r => { if (r.response === 0) autoUpdater.quitAndInstall() }) })`Edge Cases & Gotchas
- Context isolation bypass: preload scripts that expose too much of Node.js APIs can be exploited via XSS in the renderer; minimize exposed surface area
- Protocol handling: custom protocol handlers (`myapp://`) require OS registration in the installer; use electron-builder's `protocols` config
- Debugging renderer: DevTools work like the browser; debugging main process requires `--inspect` flag and connecting Chrome DevTools to the debugging port
When to Break These Rules
- For apps that are primarily web-based with occasional OS integration (file download, notifications), a PWA is simpler and covers most use cases without Electron's 100MB+ binary overhead.
Reference Files
Electron docs: https://www.electronjs.org/docs/latest/electron-builder: https://www.electron.build/Electron security: https://www.electronjs.org/docs/latest/tutorial/securityelectron-trpc: https://github.com/jsonnull/electron-trpc