Desktop App with Electron

# Desktop App Development with Electron for Google Antigravity

Create professional cross-platform desktop applications using Electron with Google Antigravity IDE.

## Electron Main Process

```typescript
// electron/main.ts
import { app, BrowserWindow, ipcMain, Menu, Tray, nativeImage } from "electron";
import { join } from "path";
import { autoUpdater } from "electron-updater";
import Store from "electron-store";

const store = new Store();
let mainWindow: BrowserWindow | null = null;
let tray: Tray | null = null;

const isDev = process.env.NODE_ENV === "development";

async function createWindow() {
  const { width, height, x, y } = store.get("windowBounds", { width: 1200, height: 800 }) as {
    width: number; height: number; x?: number; y?: number;
  };

  mainWindow = new BrowserWindow({
    width, height, x, y,
    minWidth: 800,
    minHeight: 600,
    frame: false,
    titleBarStyle: "hiddenInset",
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      sandbox: true,
      preload: join(__dirname, "preload.js")
    }
  });

  mainWindow.on("close", () => {
    if (mainWindow) {
      store.set("windowBounds", mainWindow.getBounds());
    }
  });

  if (isDev) {
    mainWindow.loadURL("http://localhost:5173");
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(join(__dirname, "../renderer/index.html"));
  }

  setupAutoUpdater();
}

function createTray() {
  const icon = nativeImage.createFromPath(join(__dirname, "../assets/tray-icon.png"));
  tray = new Tray(icon.resize({ width: 16, height: 16 }));
  
  const contextMenu = Menu.buildFromTemplate([
    { label: "Show App", click: () => mainWindow?.show() },
    { type: "separator" },
    { label: "Quit", click: () => app.quit() }
  ]);
  
  tray.setContextMenu(contextMenu);
  tray.on("click", () => mainWindow?.show());
}

function setupAutoUpdater() {
  autoUpdater.checkForUpdatesAndNotify();
  
  autoUpdater.on("update-available", () => {
    mainWindow?.webContents.send("update-available");
  });
  
  autoUpdater.on("update-downloaded", () => {
    mainWindow?.webContents.send("update-downloaded");
  });
}

// IPC Handlers
ipcMain.handle("get-app-path", () => app.getPath("userData"));

ipcMain.handle("read-file", async (_, filePath: string) => {
  const fs = await import("fs/promises");
  return fs.readFile(filePath, "utf-8");
});

ipcMain.handle("write-file", async (_, filePath: string, content: string) => {
  const fs = await import("fs/promises");
  await fs.writeFile(filePath, content, "utf-8");
});

ipcMain.handle("show-dialog", async (_, options) => {
  const { dialog } = await import("electron");
  return dialog.showOpenDialog(mainWindow!, options);
});

ipcMain.on("install-update", () => {
  autoUpdater.quitAndInstall();
});

app.whenReady().then(() => {
  createWindow();
  createTray();
});

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

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

## Preload Script

```typescript
// electron/preload.ts
import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";

type Listener = (...args: unknown[]) => void;

const electronAPI = {
  // File operations
  readFile: (path: string) => ipcRenderer.invoke("read-file", path),
  writeFile: (path: string, content: string) => ipcRenderer.invoke("write-file", path, content),
  showOpenDialog: (options: Electron.OpenDialogOptions) => ipcRenderer.invoke("show-dialog", options),
  
  // App info
  getAppPath: () => ipcRenderer.invoke("get-app-path"),
  
  // Window controls
  minimize: () => ipcRenderer.send("window-minimize"),
  maximize: () => ipcRenderer.send("window-maximize"),
  close: () => ipcRenderer.send("window-close"),
  
  // Updates
  onUpdateAvailable: (callback: Listener) => {
    const handler = (_: IpcRendererEvent, ...args: unknown[]) => callback(...args);
    ipcRenderer.on("update-available", handler);
    return () => ipcRenderer.removeListener("update-available", handler);
  },
  onUpdateDownloaded: (callback: Listener) => {
    const handler = (_: IpcRendererEvent, ...args: unknown[]) => callback(...args);
    ipcRenderer.on("update-downloaded", handler);
    return () => ipcRenderer.removeListener("update-downloaded", handler);
  },
  installUpdate: () => ipcRenderer.send("install-update")
};

contextBridge.exposeInMainWorld("electron", electronAPI);

export type ElectronAPI = typeof electronAPI;
```

## Renderer Types and Hook

```typescript
// src/types/electron.d.ts
import type { ElectronAPI } from "../../electron/preload";

declare global {
  interface Window {
    electron: ElectronAPI;
  }
}

// src/hooks/useElectron.ts
import { useEffect, useState, useCallback } from "react";

export function useElectron() {
  const [updateAvailable, setUpdateAvailable] = useState(false);
  const [updateDownloaded, setUpdateDownloaded] = useState(false);

  useEffect(() => {
    const unsubAvailable = window.electron.onUpdateAvailable(() => {
      setUpdateAvailable(true);
    });
    
    const unsubDownloaded = window.electron.onUpdateDownloaded(() => {
      setUpdateDownloaded(true);
    });

    return () => {
      unsubAvailable();
      unsubDownloaded();
    };
  }, []);

  const openFile = useCallback(async () => {
    const result = await window.electron.showOpenDialog({
      properties: ["openFile"],
      filters: [{ name: "All Files", extensions: ["*"] }]
    });
    
    if (!result.canceled && result.filePaths[0]) {
      return window.electron.readFile(result.filePaths[0]);
    }
    return null;
  }, []);

  const saveFile = useCallback(async (path: string, content: string) => {
    await window.electron.writeFile(path, content);
  }, []);

  return {
    openFile,
    saveFile,
    updateAvailable,
    updateDownloaded,
    installUpdate: window.electron.installUpdate
  };
}
```

## Best Practices

1. **Enable context isolation** and disable node integration
2. **Use preload scripts** for secure IPC
3. **Implement auto-updates** for seamless upgrades
4. **Store user preferences** with electron-store
5. **Handle platform differences** gracefully
6. **Minimize main process blocking** operations
7. **Sign and notarize** for distribution

Google Antigravity accelerates Electron development with secure IPC patterns and cross-platform best practices.