desktop-electron-expert

Desktop Electron Expert (2026 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• tauri-expert: Comparing Electron vs. Tauri architectures for desktop targets.
• senior-frontend: React/Vue frontend architecture inside Electron renderers.
• ci-cd-devops-architect: Multi-platform desktop packaging (Windows MSI/EXE, macOS DMG, Linux AppImage).
• error-resilience-expert: Crash reporting and main/renderer crash recovery.

Description

Production guide for engineering secure, high-performance cross-platform desktop applications using Electron 33+. Covers secure IPC communication via contextBridge, mandatory Context Isolation and Sandbox modes, native system integrations (tray, notifications, menus, global shortcuts), auto-updates with electron-updater, and build automation with Electron Forge / electron-builder.

Trigger Conditions

• Building desktop apps with web technologies using Electron.
• Hardening Electron security (Context Isolation, Preload scripts, CSP, nodeIntegration: false).
• Implementing typed IPC communication between Main and Renderer processes.
• Setting up auto-update workflows and multi-OS code signing.

---

Core Security & Architecture Patterns

1. Secure Main Process (main.ts)

import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';

let mainWindow: BrowserWindow | null = null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,       // MANDATORY for security
      nodeIntegration: false,        // NEVER enable in renderer
      sandbox: true,                 // Enable OS-level sandbox
      webSecurity: true,
    },
  });

  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173');
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'));
  }
}

app.whenReady().then(() => {
  createWindow();

  // Typed IPC Handlers
  ipcMain.handle('app:get-version', () => app.getVersion());
  ipcMain.handle('file:read-config', async (_event, configName: string) => {
    // Validate arguments safely
    return { name: configName, loaded: true };
  });
});