forked from imbytecat/fullstack-starter
refactor(desktop): 替换 WebUI 为 Electron + electron-vite 桌面壳方案
- 使用 electron-vite 构建 main/preload,electron-builder 打包分发 - main process: dev 模式直连 localhost:3000,生产模式 spawn sidecar binary - 添加 loading 页面,server 就绪前显示加载动画 - 更新 catalog 依赖: electron, electron-vite, electron-builder - 移除 @webui-dev/bun-webui 依赖
This commit is contained in:
@@ -1,27 +1,32 @@
|
||||
# AGENTS.md - Desktop App Guidelines
|
||||
|
||||
Thin WebUI shell hosting the fullstack server app.
|
||||
Thin Electron shell hosting the fullstack server app.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
> **⚠️ This project uses Bun — NOT Node.js / npm. All commands use `bun`. Never use `npm`, `npx`, or `node`.**
|
||||
> **⚠️ This project uses Bun as the package manager. Runtime is Electron (Node.js). Never use `npm`, `npx`, `yarn`, or `pnpm`.**
|
||||
|
||||
- **Type**: WebUI desktop shell
|
||||
- **Type**: Electron desktop shell
|
||||
- **Design**: Server-driven desktop (thin native window hosting web app)
|
||||
- **Runtime**: Bun (Main process) + System browser / WebView (via WebUI)
|
||||
- **Window Library**: [webui-dev/webui](https://github.com/webui-dev/webui) — opens installed browser or native WebView as GUI
|
||||
- **Build**: Turborepo
|
||||
- **Runtime**: Electron (Main/Renderer) + Sidecar server binary (Bun-compiled)
|
||||
- **Build Tool**: electron-vite (Vite-based, handles main + preload builds)
|
||||
- **Packager**: electron-builder (installers, signing, auto-update)
|
||||
- **Orchestration**: Turborepo
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Server-driven design**: The desktop app is a "thin" native shell. It does not contain UI or business logic; it opens a browser window pointing to the `apps/server` TanStack Start application.
|
||||
- **Dev mode**: Waits for the Vite dev server at `localhost:3000`, then opens a WebUI window. Requires `apps/server` to be running separately.
|
||||
- **WebUI**: Uses `@webui-dev/bun-webui` (FFI-based C library binding). Auto-detects and opens the best available browser in a private profile, or uses the system WebView.
|
||||
- **Server-driven design**: The desktop app is a "thin" native shell. It does not contain UI or business logic; it opens a BrowserWindow pointing to the `apps/server` TanStack Start application.
|
||||
- **Dev mode**: Opens a BrowserWindow pointing to `localhost:3000`. Requires `apps/server` to be running separately (Turbo handles this).
|
||||
- **Production mode**: Spawns a compiled server binary (from `resources/`) as a sidecar process, waits for readiness, then loads its URL.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
bun dev # Open WebUI window (requires server dev running)
|
||||
bun dev # electron-vite dev (requires server dev running)
|
||||
bun build # electron-vite build (main + preload)
|
||||
bun build:win # Build + package for Windows
|
||||
bun build:mac # Build + package for macOS
|
||||
bun build:linux # Build + package for Linux
|
||||
bun fix # Biome auto-fix
|
||||
bun typecheck # TypeScript check
|
||||
```
|
||||
@@ -31,27 +36,40 @@ bun typecheck # TypeScript check
|
||||
```
|
||||
.
|
||||
├── src/
|
||||
│ └── bun/
|
||||
│ └── index.ts # Main process entry (server readiness check + WebUI window)
|
||||
├── package.json # Scripts and dependencies
|
||||
├── turbo.json # Dev pipeline (depends on server dev)
|
||||
└── AGENTS.md # Desktop guidelines (this file)
|
||||
│ ├── main/
|
||||
│ │ └── index.ts # Main process (server lifecycle + BrowserWindow)
|
||||
│ └── preload/
|
||||
│ └── index.ts # Preload script (security isolation)
|
||||
├── resources/ # Sidecar binaries (gitignored, copied from server build)
|
||||
├── out/ # electron-vite build output (gitignored)
|
||||
├── electron.vite.config.ts
|
||||
├── electron-builder.yml # Packaging configuration
|
||||
├── package.json
|
||||
├── turbo.json
|
||||
└── AGENTS.md
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
1. **Start server**: In `apps/server`, run `bun dev`.
|
||||
2. **Start desktop**: In `apps/desktop`, run `bun dev`.
|
||||
3. **Connection**: The desktop app polls `localhost:3000` until responsive, then opens the browser window.
|
||||
1. **Start server**: `bun dev` in `apps/server` (or use root `bun dev` via Turbo).
|
||||
2. **Start desktop**: `bun dev` in `apps/desktop`.
|
||||
3. **Connection**: Main process polls `localhost:3000` until responsive, then opens BrowserWindow.
|
||||
|
||||
## Production Build Workflow
|
||||
|
||||
1. **Build server**: `bun build` in `apps/server` → `.output/`
|
||||
2. **Compile server**: `bun compile` in `apps/server` → `out/server-{platform}`
|
||||
3. **Copy binary**: Copy the platform-appropriate binary to `apps/desktop/resources/server`
|
||||
4. **Package desktop**: `bun build:linux` (or `:mac` / `:win`) in `apps/desktop`
|
||||
|
||||
## Critical Rules
|
||||
|
||||
**DO:**
|
||||
- Use arrow functions for all utility functions.
|
||||
- Ensure `apps/server` dev server is running before starting desktop.
|
||||
- Keep the desktop app as a thin shell — no UI or business logic.
|
||||
- Use `catalog:` for all dependency versions in `package.json`.
|
||||
|
||||
**DON'T:**
|
||||
- Use `npm`, `npx`, `node`, `yarn`, or `pnpm`. Always use `bun`.
|
||||
- Include UI components or business logic in the desktop app (keep it thin).
|
||||
- Use `npm`, `npx`, `yarn`, or `pnpm`. Use `bun` for package management.
|
||||
- Include UI components or business logic in the desktop app.
|
||||
- Use `as any` or `@ts-ignore`.
|
||||
|
||||
Reference in New Issue
Block a user