Electron App Architecture

Architect secure, performant Electron desktop apps with clear separation of concerns.

Prerequisites

• Node.js 18+ installed
• Understanding of main/renderer process separation
• TypeScript knowledge recommended

Process Separation

Electron has three distinct processes:

1. Main Process - Node.js environment, manages app lifecycle and windows
2. Renderer Process - Browser context, renders UI (no Node.js access)
3. Preload Script - Bridge between main and renderer, exposes safe APIs

Security Checklist

• nodeIntegration: false in BrowserWindow
• contextIsolation: true enabled
• Preload script with contextBridge.exposeInMainWorld
• Strict Content Security Policy (no unsafe-inline)
• Validate all IPC payloads
• Don't expose entire Node.js API to renderer

Project Structure

src/
├── main/           # Main process code
│   ├── main.ts     # Entry point
│   ├── ipc/        # IPC handlers
│   └── windows/    # Window management
├── preload/        # Preload scripts
│   └── preload.ts
└── renderer/       # Frontend code
    ├── src/
    └── index.html

Best Practices

• Separate concerns - Keep main, renderer, and preload responsibilities distinct
• Prefer request/response - Use ipcRenderer.invoke with ipcMain.handle over events
• Narrow IPC API - Expose minimal, versioned interfaces via contextBridge
• Handle errors - Don't pass raw Error objects across IPC; serialize safe fields
• Package scripts - Use proper packaging for distribution

See Also

• reference.md - Security checklist, IPC patterns, threat model
• templates/main.ts - Minimal, secure main process
• templates/preload.ts - ContextBridge example exposing safe APIs
• templates/renderer-bridge.ts - Typed front-end interface around IPC