You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.9 KiB
Markdown
74 lines
2.9 KiB
Markdown
+++
|
|
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"]
|
|
+++
|
|
|
|
<context>
|
|
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.
|
|
</context>
|
|
|
|
<goal>
|
|
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 `<link data-trunk rel="css" href="src/bin/ui/style.css"/>` (plain CSS — see triage 5e3e37)
|
|
- Include `<link data-trunk rel="rust" data-bin="ui"/>` so Trunk compiles the `ui` binary
|
|
- Include `<div id="app"></div>` as the Yew mount point
|
|
|
|
Verify `trunk build` succeeds.
|
|
</goal>
|
|
|
|
<css-approach>
|
|
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.
|
|
</css-approach>
|
|
|
|
<proxy-config>
|
|
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`:
|
|
|
|
```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
|
|
</proxy-config>
|
|
|
|
<constraints>
|
|
- `index.html` must include a `<div id="app">` 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 `<link data-trunk rel="copy-file" href="_redirects"/>` line
|
|
added by ticket 9ef703 — that line must remain in `index.html`.
|
|
</constraints>
|
|
|
|
<validation>
|
|
From the `quotesdb/` directory:
|
|
|
|
```sh
|
|
trunk build
|
|
```
|
|
</validation>
|
|
|
|
<commit>
|
|
`chore(quotesdb): set up Trunk.toml and index.html for UI build`
|
|
</commit> |