16gagent/cases/teamflow-v2/electron

teamflow — Desktop

Electron desktop application wrapping the teamflow fullstack web project.

Architecture

Web Fullstack Project
        ×
   Desktop Shell (Electron)
        =
    Desktop Application

• Main Process — Window management, menu, tray, IPC, auto-update
• Preload — Secure bridge between main and renderer
• Renderer — Your existing web frontend (Next.js)

Development

# Install dependencies
npm install

# Start dev mode (web + api + electron concurrently)
npm run dev

Dev mode:

• Web frontend: http://localhost:3000
• API backend: http://localhost:3001
• Electron loads the web URL directly

Build

# Build for current platform
npm run build

# Platform-specific builds
npm run build:electron:mac
npm run build:electron:win
npm run build:electron:linux

Output: release/ directory with platform installers.

Project Structure

electron/
├── main.ts      — Main process (BrowserWindow, Menu, lifecycle)
├── preload.ts   — Secure IPC bridge (contextBridge)
├── ipc.ts       — IPC handlers (dialogs, store, notifications)
├── tray.ts      — System tray
├── updater.ts   — Auto-update (electron-updater)
└── utils.ts     — Shared utilities

IPC API (available in renderer)

window.electronAPI.getAppVersion()
window.electronAPI.getPlatform()
window.electronAPI.minimizeWindow()
window.electronAPI.maximizeWindow()
window.electronAPI.closeWindow()
window.electronAPI.openFile(options?)
window.electronAPI.saveFile(options?)
window.electronAPI.showNotification(title, body)
window.electronAPI.openExternal(url)
window.electronAPI.storeGet(key)
window.electronAPI.storeSet(key, value)
window.electronAPI.checkForUpdates()
window.electronAPI.downloadUpdate()
window.electronAPI.quitAndInstall()

Auto Update

Configured via electron-builder.yml. Uses electron-updater with generic provider. Set your release URL in the publish section.