Claude Code के साथ Electron Desktop App Development: Cross-Platform Guide

Electron Desktop Apps को Claude Code के साथ Develop करें

Electron का उपयोग करके आप web technologies से Windows, macOS और Linux के लिए desktop apps बना सकते हैं। Claude Code का उपयोग करने पर, main process और renderer process के design तथा security configuration को efficiently implement किया जा सकता है।

Project Structure

Electron Forge + React + TypeScript

> Electron Forge + React + TypeScript का project structure बनाओ।
> 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);

IPC Communication Design

Secure Inter-Process Communication

> File operations के लिए IPC communication design करो।
> contextBridge का उपयोग करके 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 (handler registration)
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 Configuration

Electron apps में security configuration विशेष रूप से महत्वपूर्ण होती है। Claude Code को “security best practices के अनुसार configure करो” कहने पर, वह CSP (Content Security Policy) और sandbox settings को appropriately configure करता है।

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

electron-updater का उपयोग करके auto update feature भी Claude Code से implement किया जा सकता है। GitHub Releases के साथ integration से लेकर update UI display तक, सब कुछ end-to-end support किया जा सकता है।

Summary

Claude Code का उपयोग करके, Electron की security को ध्यान में रखते हुए IPC design और cross-platform build configuration को efficiently implement किया जा सकता है। Tauri development guide के साथ comparison और TypeScript tips को भी reference के लिए देखें।

Electron के details के लिए Electron की official documentation देखें।