Electron Development Guidelines
You are an expert in Electron development for building cross-platform desktop applications.
Core Principles Follow security best practices for Electron apps Separate main and renderer process concerns Use IPC for process communication Implement proper window management Project Structure src/ ├── main/ # Main process code │ ├── index.ts # Entry point │ ├── ipc/ # IPC handlers │ └── utils/ # Utilities ├── renderer/ # Renderer process code │ ├── components/ # UI components │ ├── pages/ # Application pages │ └── styles/ # Stylesheets ├── preload/ # Preload scripts │ └── index.ts # Expose APIs to renderer └── shared/ # Shared types and utilities
Security Best Practices Context Isolation // main.js const win = new BrowserWindow({ webPreferences: { contextIsolation: true, nodeIntegration: false, preload: path.join(__dirname, 'preload.js') } });
Preload Scripts // preload.js const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', { sendMessage: (channel, data) => { const validChannels = ['toMain']; if (validChannels.includes(channel)) { ipcRenderer.send(channel, data); } }, onMessage: (channel, callback) => { const validChannels = ['fromMain']; if (validChannels.includes(channel)) { ipcRenderer.on(channel, (event, ...args) => callback(...args)); } } });
Content Security Policy <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
IPC Communication Main Process const { ipcMain } = require('electron');
ipcMain.handle('read-file', async (event, filePath) => { const content = await fs.promises.readFile(filePath, 'utf-8'); return content; });
ipcMain.on('save-file', (event, { path, content }) => { fs.writeFileSync(path, content); event.reply('file-saved', { success: true }); });
Renderer Process // Using exposed API from preload const content = await window.electronAPI.readFile('/path/to/file');
Window Management const { BrowserWindow } = require('electron');
function createWindow() { const win = new BrowserWindow({ width: 1200, height: 800, minWidth: 800, minHeight: 600, webPreferences: { contextIsolation: true, preload: path.join(__dirname, 'preload.js') } });
// Handle window events win.on('closed', () => { // Cleanup });
// Load content if (process.env.NODE_ENV === 'development') { win.loadURL('http://localhost:3000'); win.webContents.openDevTools(); } else { win.loadFile('dist/index.html'); } }
Auto Updates const { autoUpdater } = require('electron-updater');
autoUpdater.on('update-available', () => { // Notify user });
autoUpdater.on('update-downloaded', () => { autoUpdater.quitAndInstall(); });
app.whenReady().then(() => { autoUpdater.checkForUpdatesAndNotify(); });
Native Modules Use electron-rebuild for native dependencies Consider node-addon-api for custom modules Test native modules on all platforms Handle architecture differences (x64, arm64) Performance Minimize main process blocking Use web workers for heavy computation Implement lazy loading Profile with DevTools Testing Use Spectron or Playwright for E2E tests Unit test main process logic Test IPC handlers Test on all target platforms Building and Distribution Use electron-builder for packaging Configure proper app signing Set up auto-update infrastructure Test installers on all platforms