electron-react

Electron + React Development

Build modern desktop applications with Electron, React, and TypeScript using electron-vite for optimal developer experience.

When to Use This Skill

• Creating new Electron applications with React
• Setting up IPC (Inter-Process Communication) between main and renderer
• Implementing preload scripts with context bridge
• Configuring electron-vite for development and production builds
• Building type-safe communication layers

Project Structure

apps/electron/
├── src/
│   ├── main/           # Electron main process
│   │   ├── index.ts    # Entry point, window creation
│   │   └── ipc/        # IPC handlers
│   ├── preload/        # Context bridge scripts
│   │   ├── index.ts    # Exposed APIs
│   │   └── types.d.ts  # TypeScript declarations
│   └── renderer/       # React application
│       ├── index.html
│       ├── main.tsx
│       └── components/
├── electron.vite.config.ts
└── package.json

Core Patterns

Main Process Entry Point

// src/main/index.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/index.js'),
      contextIsolation: true,  // Required for security
      nodeIntegration: false,  // Keep disabled
      sandbox: true,
    },
  });

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

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

Type-Safe IPC Layer

// packages/core/src/ipc-types.ts
export interface IPCChannels {
  // Request-Response patterns
  'db:tasks:list': { request: void; response: Task[] };
  'db:tasks:create': { request: CreateTaskInput; response: Task };
  'db:tasks:update': { request: UpdateTaskInput; response: Task };
  'db:tasks:delete': { request: string; response: void };
  
  // Streaming patterns (main -> renderer)
  'agent:session:stream': { request: string; response: AgentStep };
}

export type IPCChannel = keyof IPCChannels;