Electron Desktop App Development with Claude Code: Cross-Platform Guide

Building Electron Desktop Apps With Claude Code

Electron lets you build desktop apps for Windows, macOS, and Linux using web technologies. With Claude Code, you can efficiently design the main and renderer processes and configure security settings.

Project Structure

Electron Forge + React + TypeScript

> Create an Electron Forge + React + TypeScript project structure.
> Use the Vite bundler.

// src/main.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
      sandbox: true,
    },
  });

  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    mainWindow.loadFile(
      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
    );
  }
};

app.whenReady().then(createWindow);

Designing IPC Communication

Secure Inter-Process Communication

> Design IPC communication for file operations.
> Use contextBridge for a secure implementation.

// src/preload.ts
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('fileAPI', {
  readFile: (filePath: string) =>
    ipcRenderer.invoke('file:read', filePath),
  writeFile: (filePath: string, content: string) =>
    ipcRenderer.invoke('file:write', filePath, content),
  selectFile: () =>
    ipcRenderer.invoke('dialog:openFile'),
});

// src/main.ts (register handlers)
import { ipcMain, dialog } from 'electron';
import fs from 'fs/promises';

ipcMain.handle('file:read', async (_, filePath: string) => {
  return fs.readFile(filePath, 'utf-8');
});

ipcMain.handle('file:write', async (_, filePath: string, content: string) => {
  await fs.writeFile(filePath, content, 'utf-8');
  return { success: true };
});

ipcMain.handle('dialog:openFile', async () => {
  const result = await dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [
      { name: 'Text files', extensions: ['txt', 'md', 'json'] },
    ],
  });
  return result.canceled ? null : result.filePaths[0];
});

Security Settings

Security settings are especially important in Electron apps. Ask Claude Code to “configure this following security best practices,” and it will properly set up things like Content Security Policy and sandbox configuration.

// Set CSP headers
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({
    responseHeaders: {
      ...details.responseHeaders,
      'Content-Security-Policy': [
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
      ],
    },
  });
});

Auto Update

You can also implement auto-updates with electron-updater. From GitHub Releases integration to the update UI, Claude Code can handle the whole thing.

Summary

With Claude Code, you can efficiently implement Electron’s secure IPC design and cross-platform build configuration. For a comparison with Tauri, see the Tauri development guide, and for TypeScript techniques, see TypeScript tips.

For more on Electron, see the official Electron documentation.