Desktop Electron Expert (2026 Edition)

English | Bahasa Indonesia

<a name="english"></a>

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 };
  });
});

2. Type-Safe Preload Script (preload.ts)

import { contextBridge, ipcRenderer } from 'electron';

export interface ElectronAPI {
  getVersion: () => Promise<string>;
  readConfig: (name: string) => Promise<any>;
}

const api: ElectronAPI = {
  getVersion: () => ipcRenderer.invoke('app:get-version'),
  readConfig: (name: string) => ipcRenderer.invoke('file:read-config', name),
};

contextBridge.exposeInMainWorld('electronAPI', api);

3. Renderer Consumer (renderer.tsx)

declare global {
  interface Window {
    electronAPI: ElectronAPI;
  }
}

import React, { useEffect, useState } from 'react';

export function AppInfo() {
  const [version, setVersion] = useState<string>('');

  useEffect(() => {
    window.electronAPI.getVersion().then(setVersion);
  }, []);

  return <div>App Version: {version}</div>;
}

<a name="bahasa-indonesia"></a>

Bahasa Indonesia

Integrasi Orkestrasi

• tauri-expert: Pemilihan dan perbandingan antara Electron dan Tauri untuk aplikasi desktop.
• senior-frontend: Integrasi framework frontend (React/Vue) di dalam renderer Electron.
• ci-cd-devops-architect: Otomasi build installer cross-platform (.exe, .dmg, .AppImage).

Deskripsi

Panduan produksi untuk membangun aplikasi desktop cross-platform yang aman dan efisien menggunakan Electron 33+. Mengutamakan keamanan IPC dengan Context Isolation, isolasi proses renderer, integrasi sistem natif (system tray, menu, notifikasi), dan alur auto-update otomatis.

Kondisi Pemicu

• Membangun aplikasi desktop menggunakan teknologi web berbasis Electron.
• Memperketat keamanan Electron (Context Isolation, Sandbox, sanitasi IPC).
• Mengonfigurasi auto-updater dan packaging multi-OS.