Develop Electron Desktop App dengan Claude Code: Panduan Cross-Platform

Develop Desktop App Electron dengan Claude Code

Dengan Electron, kamu bisa bikin desktop app untuk Windows, macOS, dan Linux pakai teknologi web. Memanfaatkan Claude Code bikin desain main process dan renderer process, serta konfigurasi security, jadi jauh lebih efisien.

Struktur Proyek

Electron Forge + React + TypeScript

> Buat struktur proyek Electron Forge + React + TypeScript.
> Pakai bundler Vite.

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

Desain Komunikasi IPC

Komunikasi Antar-Process yang Aman

> Desain komunikasi IPC untuk operasi file.
> Gunakan contextBridge untuk implementasi yang aman.

// 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 (registrasi handler)
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: 'File teks', extensions: ['txt', 'md', 'json'] },
    ],
  });
  return result.canceled ? null : result.filePaths[0];
});

Konfigurasi Security

Di Electron app, konfigurasi security itu ekstra penting. Kalau kamu minta Claude Code “konfigurasi mengikuti security best practices”, dia bakal nge-setup CSP (Content Security Policy) dan sandbox settings dengan benar.

// Konfigurasi header CSP
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

Fitur auto update pakai electron-updater juga bisa di-implement via Claude Code. Mulai dari konfigurasi integrasi dengan GitHub Releases sampai tampilan UI update, semuanya bisa di-cover end-to-end.

Summary

Pakai Claude Code, desain IPC yang memperhatikan security Electron dan konfigurasi cross-platform build bisa di-implement dengan efisien. Baca juga panduan development Tauri sebagai perbandingan, dan tips TypeScript untuk referensi lanjutan.

Untuk detail Electron, lihat dokumentasi resmi Electron.