refactor(web): switch to Bun + Nitro v2 (bun preset) — proper TanStack Start deploy
ci / rust (push) Has been cancelled
ci / rust (push) Has been cancelled
The earlier "render the shell with a custom script" was a hack. The real issues were a version matrix and a missing server target: - TanStack Start's start-plugin-core peer-requires Vite >= 7; on Vite 6 the build's prerender/post-build buildApp plugin hook silently doesn't run (Vite 6 lets a config-level builder.buildApp suppress plugin buildApp hooks; Vite 7 runs both). Pinned Vite ^7 + @vitejs/plugin-react ^5 (v5 ↔ Vite 7; v6 needs Vite 8 / vite/internal). - Added @tanstack/nitro-v2-vite-plugin with the `bun` preset — the server/deploy target. `bun run build` → .output/ (bun-runnable server + .output/public). `bun run start` = `bun run .output/server/index.mjs`. - Full SSR instead of SPA mode: SPA-shell prerender points its preview server at the old dist/server/server.js path that Nitro relocates, breaking the build. The Nitro server renders the shell per request; React Query fetches client-side after hydration. - Nitro routeRules proxy /api/** → PUNKTFUNK_MGMT_URL (default 127.0.0.1:47990), so the browser stays same-origin (bearer token rides along, no CORS). Toolchain is now Bun (package manager + runtime): bun.lock replaces pnpm-lock.yaml; scripts/prepare/start use bun. Validated live: bun build → .output, bun server SSR-renders the console on :3000 and proxies the API (health/host return through it). tsc clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+33
-21
@@ -4,18 +4,19 @@ The browser UI for the punktfunk host's **management REST API** (`crates/punktfu
|
|||||||
OpenAPI at `docs/api/openapi.json`). It shows live status, host capabilities, paired
|
OpenAPI at `docs/api/openapi.json`). It shows live status, host capabilities, paired
|
||||||
clients, the pairing-PIN flow, and session controls.
|
clients, the pairing-PIN flow, and session controls.
|
||||||
|
|
||||||
Stack: **TanStack Start** (Vite, SPA mode) · **React Query** via **orval** codegen from the
|
Stack: **TanStack Start** (full SSR) on **Bun** via **Nitro v2** (`bun` preset) · **React
|
||||||
OpenAPI spec · **shadcn/ui** (Tailwind v4) · **Paraglide** i18n (en/de).
|
Query** through **orval** codegen from the OpenAPI spec · **shadcn/ui** (Tailwind v4) ·
|
||||||
|
**Paraglide** i18n (en/de). Package manager + runtime: **Bun**.
|
||||||
|
|
||||||
## Develop
|
## Develop
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
# from web/
|
# from web/ — Bun is the toolchain (https://bun.sh)
|
||||||
pnpm install # runs `prepare` → codegen (orval + paraglide)
|
bun install # runs `prepare` → codegen (orval + paraglide)
|
||||||
pnpm dev # http://localhost:3000
|
bun run dev # http://localhost:3000
|
||||||
|
|
||||||
# The dev server proxies /api → http://127.0.0.1:47990 (the host's management API).
|
# The dev server proxies /api → http://127.0.0.1:47990 (the host's management API).
|
||||||
# Point it elsewhere with PUNKTFUNK_MGMT_URL=http://<host>:47990 pnpm dev
|
# Point it elsewhere: PUNKTFUNK_MGMT_URL=http://<host>:47990 bun run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Start a host with the management API up:
|
Start a host with the management API up:
|
||||||
@@ -30,15 +31,36 @@ WAYLAND_DISPLAY=wayland-kde XDG_CURRENT_DESKTOP=KDE \
|
|||||||
If the host runs with `--mgmt-token`, set it under **Settings → API token** (stored in
|
If the host runs with `--mgmt-token`, set it under **Settings → API token** (stored in
|
||||||
`localStorage`, sent as `Authorization: Bearer …` by the orval fetcher).
|
`localStorage`, sent as `Authorization: Bearer …` by the orval fetcher).
|
||||||
|
|
||||||
|
## Build & run (Nitro + Bun)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
bun run build # → .output/ (Nitro server, `bun` preset, + .output/public assets)
|
||||||
|
PORT=3000 HOST=0.0.0.0 bun run start # = bun run .output/server/index.mjs
|
||||||
|
bun run lint # tsc --noEmit
|
||||||
|
```
|
||||||
|
|
||||||
|
The built **Nitro Bun server** SSR-renders the app and proxies `/api/**` to the management
|
||||||
|
host (a Nitro `routeRules` proxy → `PUNKTFUNK_MGMT_URL`, default `127.0.0.1:47990`), so the
|
||||||
|
browser stays same-origin (bearer token rides along, no CORS). Run it on the same box as
|
||||||
|
the host; it serves the console on `:3000` (or `$PORT`).
|
||||||
|
|
||||||
|
> Toolchain notes (load-bearing): TanStack Start's `start-plugin-core` peer-requires
|
||||||
|
> **Vite ≥ 7** — on Vite 6 the build's prerender/post-build hook silently doesn't run.
|
||||||
|
> `@vitejs/plugin-react` must match Vite (v5 ↔ Vite 7, v6 ↔ Vite 8); it's **required even
|
||||||
|
> for dev** (TanStack Start's dev mode needs the React Refresh runtime, else a blank
|
||||||
|
> screen). Nitro is the server target — without it `vite build` only emits client+SSR
|
||||||
|
> bundles, no deployable server. The Nitro `bun` preset makes `.output/server/index.mjs`
|
||||||
|
> Bun-runnable.
|
||||||
|
|
||||||
## Codegen
|
## Codegen
|
||||||
|
|
||||||
Generated code is **not committed** (gitignored) — it's reproduced from sources:
|
Generated code is **not committed** (gitignored) — reproduced from sources:
|
||||||
|
|
||||||
- `pnpm codegen` — regenerate the API client (orval) + i18n runtime (paraglide). Runs
|
- `bun run codegen` — regenerate the API client (orval) + i18n runtime (paraglide). Runs on
|
||||||
automatically on `pnpm install` (`prepare`) and before `dev`/`build` (`pre*` for orval;
|
`bun install` (`prepare`) and before `dev`/`build` (`pre*` for orval; the Vite plugin
|
||||||
the Vite plugin compiles paraglide on dev/build).
|
compiles paraglide on dev/build).
|
||||||
- After a management-API change, regenerate the spec on the Rust side first:
|
- After a management-API change, regenerate the spec on the Rust side first:
|
||||||
`cargo run -p punktfunk-host -- openapi > docs/api/openapi.json`, then `pnpm api:gen`.
|
`cargo run -p punktfunk-host -- openapi > docs/api/openapi.json`, then `bun run api:gen`.
|
||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
|
|
||||||
@@ -56,13 +78,3 @@ src/
|
|||||||
paraglide/ GENERATED i18n runtime (paraglide)
|
paraglide/ GENERATED i18n runtime (paraglide)
|
||||||
messages/{en,de}.json translation sources
|
messages/{en,de}.json translation sources
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build
|
|
||||||
|
|
||||||
```sh
|
|
||||||
pnpm build # client + SSR bundles under dist/
|
|
||||||
pnpm lint # tsc --noEmit
|
|
||||||
```
|
|
||||||
|
|
||||||
A future step serves the built assets from the host itself (same origin as the API);
|
|
||||||
today it's a standalone dev/preview app against the loopback management port.
|
|
||||||
|
|||||||
+1440
File diff suppressed because it is too large
Load Diff
+5
-4
@@ -4,13 +4,13 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"description": "punktfunk management console — TanStack Start + React Query (orval) + shadcn/ui + Paraglide i18n",
|
"description": "punktfunk management console — TanStack Start + React Query (orval) + shadcn/ui + Paraglide i18n",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prepare": "pnpm run codegen",
|
"prepare": "bun run codegen",
|
||||||
"codegen": "orval --config orval.config.ts && paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
|
"codegen": "orval --config orval.config.ts && paraglide-js compile --project ./project.inlang --outdir ./src/paraglide",
|
||||||
"predev": "orval --config orval.config.ts",
|
"predev": "orval --config orval.config.ts",
|
||||||
"dev": "vite dev --port 3000",
|
"dev": "vite dev --port 3000",
|
||||||
"prebuild": "orval --config orval.config.ts",
|
"prebuild": "orval --config orval.config.ts",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"start": "node .output/server/index.mjs",
|
"start": "bun run .output/server/index.mjs",
|
||||||
"api:gen": "orval --config orval.config.ts",
|
"api:gen": "orval --config orval.config.ts",
|
||||||
"lint": "tsc --noEmit"
|
"lint": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
@@ -28,15 +28,16 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@inlang/paraglide-js": "^2.0.0",
|
"@inlang/paraglide-js": "^2.0.0",
|
||||||
"@tailwindcss/vite": "^4.0.0",
|
"@tailwindcss/vite": "^4.0.0",
|
||||||
|
"@tanstack/nitro-v2-vite-plugin": "^1.155.0",
|
||||||
"@types/node": "^22.10.0",
|
"@types/node": "^22.10.0",
|
||||||
"@types/react": "^19.0.0",
|
"@types/react": "^19.0.0",
|
||||||
"@types/react-dom": "^19.0.0",
|
"@types/react-dom": "^19.0.0",
|
||||||
"@vitejs/plugin-react": "^4.7.0",
|
"@vitejs/plugin-react": "^5",
|
||||||
"orval": "^8.16.0",
|
"orval": "^8.16.0",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"tw-animate-css": "^1.2.0",
|
"tw-animate-css": "^1.2.0",
|
||||||
"typescript": "^5.7.0",
|
"typescript": "^5.7.0",
|
||||||
"vite": "^6.0.0",
|
"vite": "^7.3.5",
|
||||||
"vite-tsconfig-paths": "^5.1.0"
|
"vite-tsconfig-paths": "^5.1.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
-3428
File diff suppressed because it is too large
Load Diff
@@ -1,2 +0,0 @@
|
|||||||
onlyBuiltDependencies:
|
|
||||||
- esbuild
|
|
||||||
+18
-7
@@ -1,13 +1,14 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
|
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
|
||||||
|
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'
|
||||||
import viteReact from '@vitejs/plugin-react'
|
import viteReact from '@vitejs/plugin-react'
|
||||||
import viteTsConfigPaths from 'vite-tsconfig-paths'
|
import viteTsConfigPaths from 'vite-tsconfig-paths'
|
||||||
import tailwindcss from '@tailwindcss/vite'
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
import { paraglideVitePlugin } from '@inlang/paraglide-js'
|
import { paraglideVitePlugin } from '@inlang/paraglide-js'
|
||||||
|
|
||||||
// The management API the console drives. In dev we proxy same-origin so the browser
|
// The management API the console drives. The browser always talks same-origin (/api/...):
|
||||||
// never needs CORS and the bearer token (when set) rides along untouched. Override the
|
// in `vite dev` the dev server proxies it (below); in the built Bun/Nitro server a Nitro
|
||||||
// target with PUNKTFUNK_MGMT_URL when the host isn't on the default loopback port.
|
// route-rule proxies it (below). Override the upstream with PUNKTFUNK_MGMT_URL.
|
||||||
const MGMT_URL = process.env.PUNKTFUNK_MGMT_URL ?? 'http://127.0.0.1:47990'
|
const MGMT_URL = process.env.PUNKTFUNK_MGMT_URL ?? 'http://127.0.0.1:47990'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@@ -24,10 +25,20 @@ export default defineConfig({
|
|||||||
outdir: './src/paraglide',
|
outdir: './src/paraglide',
|
||||||
strategy: ['localStorage', 'preferredLanguage', 'baseLocale'],
|
strategy: ['localStorage', 'preferredLanguage', 'baseLocale'],
|
||||||
}),
|
}),
|
||||||
tanstackStart({
|
// Full SSR on the TanStack Start runtime (the management console's data queries run
|
||||||
// A management console for a loopback host — render it as a client SPA (no SSR data
|
// client-side after hydration — React Query doesn't fetch during SSR — so the server
|
||||||
// fetching against a token-gated local API), still on the TanStack Start runtime.
|
// renders a data-free shell that hydrates in the browser).
|
||||||
spa: { enabled: true },
|
tanstackStart(),
|
||||||
|
// Nitro v2 is the deployment target: the `bun` preset bundles a Bun-runnable server to
|
||||||
|
// .output/ (`bun run .output/server/index.mjs`). The route-rule keeps the browser
|
||||||
|
// same-origin by proxying /api/** to the management host, so the bearer token and
|
||||||
|
// cookies ride along with no CORS.
|
||||||
|
nitroV2Plugin({
|
||||||
|
preset: 'bun',
|
||||||
|
compatibilityDate: '2026-06-10',
|
||||||
|
routeRules: {
|
||||||
|
'/api/**': { proxy: `${MGMT_URL}/api/**` },
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
// Must come AFTER tanstackStart — provides the React JSX transform + Refresh runtime
|
// Must come AFTER tanstackStart — provides the React JSX transform + Refresh runtime
|
||||||
// that Start's dev mode requires (omitting it leaves the client JS unable to load).
|
// that Start's dev mode requires (omitting it leaves the client JS unable to load).
|
||||||
|
|||||||
Reference in New Issue
Block a user