Desktop and Web

The same React codebase powers both the browser SPA and the Electron desktop app. Two Vite configs handle the difference.

Vite configs

Config	Purpose
vite.web.config.mts	Browser build. Outputs a static SPA.
vite.renderer.config.mts	Electron renderer. Same source, different output target.
vite.main.config.mts	Electron main process (window management, IPC, menus).
vite.preload.config.mts	Electron preload script (IPC bridge).

Running each target

# Browser dev server (port 4200)
pnpm --filter @hype-stack/frontend dev

# Electron app with hot reload
pnpm --filter @hype-stack/frontend start:app

What's different in Electron

• Native menus and system tray integration
• File system access through the IPC bridge in the preload script
• Auto-updates via electron-forge and GitHub releases
• Deep links for protocol handling (hype-stack://)
• Traffic-light buttons on macOS (the only place raw Tailwind colors like bg-red-500 are acceptable)

Sharing code between targets

Both targets import from the same src/ directory. Platform-specific code is handled through:

• Conditional rendering based on environment checks
• Electron-only layout wrappers (e.g., native-layout.tsx for the title bar)
• The preload script exposing safe IPC methods to the renderer

Building for production

# Web production build
pnpm --filter @hype-stack/frontend build

# Electron production package
pnpm --filter @hype-stack/frontend package