Electron Development

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

Copy code
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

javascriptCopy code
// main.js
const win = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    preload: path.join(__dirname, 'preload.js')
  }
});

Preload Scripts

javascriptCopy code
// 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

htmlCopy code
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

IPC Communication

Main Process

javascriptCopy code
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

javascriptCopy code
// Using exposed API from preload
const content = await window.electronAPI.readFile('/path/to/file');

Window Management

javascriptCopy code
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

javascriptCopy code
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