electron

Electron

Electron bundles Chromium and Node.js into a desktop app. It is the industry standard (VS Code, Slack, Discord) despite the file size.

When to Use

• Cross-Platform Desktop Applications: Building native macOS, Windows, and Linux apps using web technologies (HTML, CSS, JS).
• Desktop Software Requiring Deep OS Integration: System tray menus, native notifications, file system access, and global hotkeys.
• High-Performance Offline Desktop Tools: IDEs (VS Code), communication tools (Slack), and media editors.
• Enterprise Desktop Packaging: Code-signing, auto-updating, and multi-architecture builds (x64, arm64).

Quick Start

// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });
  win.loadFile("index.html");
}

app.whenReady().then(createWindow);

Core Concepts

Secure Main and Renderer Architecture with Context Isolation

Enforcing security boundaries via preload scripts:

// main.js (Main Process)
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true, // Enforce security isolation
      nodeIntegration: false, // Disable raw Node in renderer
      sandbox: true,
    },
  });

  win.loadFile("index.html");
}

ipcMain.handle("read-app-version", async () => {
  return app.getVersion();
});

app.whenReady().then(createWindow);

Preload Script & ContextBridge

Exposing safe, audited IPC channels to renderer window:

// preload.js (Preload Script)
const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
  getAppVersion: () => ipcRenderer.invoke("read-app-version"),
  onFileSaved: (callback) => {
    ipcRenderer.on("file-saved", (_event, value) => callback(value));
  },
});