vibed/quotesdb/.nbd/tickets/dc3d2b.md

+++ title = "Set up ui/Trunk.toml and ui/index.html — build configuration and Wasm entry point" priority = 8 status = "todo" ticket_type = "task" dependencies = ["a9534d", "9ef703"] +++

The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development. Update `Trunk.toml` and `index.html` in the `quotesdb/` root: 1. `Trunk.toml` must specify the target index.html so Trunk uses the right entry point. 2. `Trunk.toml` must include a `proxy` block to forward `/api/*` requests to the local API server (see proxy-config section below). 3. `index.html` must: - Include `` (plain CSS — see triage 5e3e37) - Include `` so Trunk compiles the `ui` binary - Include `

` as the Yew mount point

Verify trunk build succeeds.

CSS approach resolved in triage 5e3e37: **plain CSS**.

• CSS file lives at src/bin/ui/style.css
• Linked in index.html as: <link data-trunk rel="css" href="src/bin/ui/style.css"/>
• Naming convention: BEM-style — quote-card, quote-card__text, page-browse, etc.
• No CDN Tailwind (incompatible with Wasm class-name scanning), no Rust CSS-in-Wasm crate.
• The actual CSS content is implemented in ticket bb1514.

CORS/proxy approach resolved in triage a9534d: **Trunk proxy**.

During trunk serve, Trunk's built-in proxy forwards all /api/* requests to the local API server. The API server runs on localhost:3000 during local development (plain Axum/Tokio — not wrangler dev). No CORS headers are needed anywhere; the proxy makes API calls appear same-origin.

Add this block to Trunk.toml:

[[proxy]]
rewrite = "/api"
backend = "http://localhost:3000"

This means:

• trunk serve listens on localhost:8080 (default)
• Browser requests to http://localhost:8080/api/quotes are transparently proxied to http://localhost:3000/api/quotes
• In production (Cloudflare Pages + Workers), /api/* routes to the Worker via Cloudflare's routing — same path prefix, no code change needed

- `index.html` must include a `

` mount point for the Yew app. - Trunk.toml `target` must point to `index.html`. - The `proxy` block must appear in `Trunk.toml` (not `Trunk.toml.dev` or elsewhere). - Do NOT remove or overwrite the `` line added by ticket 9ef703 — that line must remain in `index.html`. From the `quotesdb/` directory:

trunk build

`chore(quotesdb): set up Trunk.toml and index.html for UI build`