`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","label",[158,159,68],"frontend","components","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_32":258,"_13":158,"_66":224,"_42":-5,"_34":35,"_151":39,"_152":88,"_36":259,"_38":26,"_69":255,"_154":-5,"_71":24,"_156":-5,"_188":260,"_17":261},{"_32":253,"_13":159,"_66":150,"_42":224,"_34":35,"_151":39,"_152":88,"_36":254,"_38":26,"_69":255,"_154":-5,"_71":24,"_156":-5,"_188":256,"_17":257},{"_32":246,"_13":247,"_66":248,"_42":150,"_34":35,"_151":114,"_152":88,"_36":249,"_38":39,"_69":70,"_154":250,"_71":24,"_156":-5,"_188":251,"_17":252},{"_32":149,"_13":68,"_66":67,"_42":150,"_34":35,"_151":39,"_152":88,"_36":243,"_38":26,"_69":70,"_154":155,"_71":24,"_156":-5,"_188":244,"_17":245},{"_32":236,"_13":237,"_66":238,"_42":224,"_34":35,"_151":39,"_152":88,"_36":239,"_38":26,"_69":21,"_154":240,"_71":24,"_156":-5,"_188":241,"_17":242},{"_32":229,"_13":230,"_66":231,"_42":224,"_34":35,"_151":39,"_152":88,"_36":232,"_38":26,"_69":70,"_154":233,"_71":24,"_156":-5,"_188":234,"_17":235},{"_32":221,"_13":222,"_66":223,"_42":224,"_34":35,"_151":39,"_152":88,"_36":225,"_38":26,"_69":70,"_154":226,"_71":24,"_156":-5,"_188":227,"_17":228},{"_32":214,"_13":215,"_66":216,"_42":-5,"_34":35,"_151":39,"_152":88,"_36":217,"_38":26,"_69":21,"_154":218,"_71":24,"_156":-5,"_188":219,"_17":220},{"_32":207,"_13":208,"_66":209,"_42":-5,"_34":35,"_151":39,"_152":88,"_36":210,"_38":26,"_69":21,"_154":211,"_71":24,"_156":-5,"_188":212,"_17":213},{"_32":199,"_13":200,"_66":201,"_42":-5,"_34":35,"_151":202,"_152":88,"_36":203,"_38":26,"_69":70,"_154":204,"_71":24,"_156":-5,"_188":205,"_17":206},{"_32":191,"_13":192,"_66":193,"_42":-5,"_34":35,"_151":194,"_152":88,"_36":195,"_38":26,"_69":70,"_154":196,"_71":24,"_156":-5,"_188":197,"_17":198},{"_32":182,"_13":183,"_66":86,"_42":-5,"_34":35,"_151":184,"_152":88,"_36":185,"_38":39,"_69":186,"_154":187,"_71":24,"_156":-5,"_188":189,"_17":190},"33aa653c-6549-48d3-8f49-bf8bce178039","index.ts",4,["D",1789565468611],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { deleteCookie, getCookie, setCookie } from \"npm:hono/cookie\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { one, q } from \"./db.ts\";\nimport {\n COST,\n createCode,\n deliverCode,\n grantPoints,\n loginWithCode,\n logout,\n spendPoints,\n userFromToken,\n type Kind,\n type User,\n} from \"./auth.ts\";\n\nconst app = new Hono();\n\nconst COOKIE = \"session\";\nconst cookieOpts = {\n httpOnly: true,\n sameSite: \"Lax\" as const,\n path: \"/\",\n maxAge: 30 * 24 * 60 * 60,\n};\n\n// ── 前端 ─────────────────────────────────────────────────────────\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ── 小工具 ───────────────────────────────────────────────────────\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/** 从 cookie 取当前用户，没有就抛错（由下面的 catch 转成 401） */\nasync function requireUser(c: { req: { header: (k: string) => string | undefined } }) {\n const user = await userFromToken(getCookie(c as never, COOKIE));\n if (!user) throw Object.assign(new Error(\"请先登录\"), { status: 401 });\n return user;\n}\n\nasync function requireAdmin(c: { req: { header: (k: string) => string | undefined } }) {\n const user = await requireUser(c);\n if (user.role !== \"admin\") {\n throw Object.assign(new Error(\"需要管理员权限\"), { status: 403 });\n }\n return user;\n}\n\n// ── 认证 ─────────────────────────────────────────────────────────\n\n/** 发送邮箱验证码 */\napp.post(\"/api/auth/code\", async (c) => {\n const { email } = await c.req.json<{ email?: string }>();\n if (!email || !EMAIL_RE.test(email)) {\n return c.json({ error: \"邮箱格式不对\" }, 400);\n }\n const code = await createCode(email);\n const devCode = await deliverCode(email, code);\n // devCode 非 null 说明没配邮件服务，直接把验证码给前端方便调试\n return c.json({ ok: true, devCode });\n});\n\n/** 验证码登录（首次自动注册） */\napp.post(\"/api/auth/login\", async (c) => {\n const { email, code } = await c.req.json<{ email?: string; code?: string }>();\n if (!email || !code) return c.json({ error: \"邮箱和验证码都要填\" }, 400);\n\n const { token, user } = await loginWithCode(email, code);\n\n // 第一个注册的人自动成为管理员\n const count = await one(\"SELECT COUNT(*) AS n FROM users\");\n if (Number(count?.n ?? 0) === 1) {\n await q(\"UPDATE users SET role = 'admin' WHERE id = ?\", [user.id]);\n user.role = \"admin\";\n }\n\n setCookie(c, COOKIE, token, cookieOpts);\n return c.json({ ok: true, user });\n});\n\napp.post(\"/api/auth/logout\", async (c) => {\n await logout(getCookie(c, COOKIE));\n deleteCookie(c, COOKIE, { path: \"/\" });\n return c.json({ ok: true });\n});\n\n/** 当前用户 + 价目表 */\napp.get(\"/api/me\", async (c) => {\n const user = await userFromToken(getCookie(c, COOKIE));\n return c.json({ user, costs: COST });\n});\n\n// ── 生成 ─────────────────────────────────────────────────────────\n\n/**\n * 真正调用模型的地方。\n *\n * 现在接了 SiliconFlow（OpenAI 兼容的图片生成接口）。\n * 配上 SILICONFLOW_API_KEY 就走真生成；没配就返回一个占位结果，\n * 并且**不收积分** —— 免得白扣你分。\n *\n * 想换成别的厂商，改这个函数即可：\n * OpenAI → https://api.openai.com/v1/images/generations\n * 火山方舟 → https://ark.cn-beijing.volces.com/api/v3/images/generations\n * fal.ai → https://fal.run/fal-ai/...\n */\nasync function runGeneration(\n kind: Kind,\n prompt: string,\n): Promise<{ resultUrl: string | null; note: string }> {\n const key = Deno.env.get(\"SILICONFLOW_API_KEY\");\n\n if (kind === \"image\" && key) {\n const res = await fetch(\"https://api.siliconflow.cn/v1/images/generations\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${key}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n model: Deno.env.get(\"IMAGE_MODEL\") ?? \"Kwai-Kolors/Kolors\",\n prompt,\n image_size: \"1024x1024\",\n }),\n });\n if (!res.ok) throw new Error(`模型接口报错：${res.status} ${await res.text()}`);\n const data = await res.json() as { images?: { url?: string }[] };\n const url = data.images?.[0]?.url ?? null;\n if (!url) throw new Error(\"模型没返回图片地址\");\n return { resultUrl: url, note: \"\" };\n }\n\n // 没配 key（或视频/短剧还没接）—— 不扣分，只留一条记录\n return {\n resultUrl: null,\n note: kind === \"image\"\n ? \"未配置 SILICONFLOW_API_KEY，本次为占位结果，未扣积分\"\n : `${kind} 还没接模型 API —— 在 index.ts 的 runGeneration() 里接上你自己的`,\n };\n}\n\napp.get(\"/api/generations\", async (c) => {\n const user = await requireUser(c);\n const rows = await q(\n \"SELECT * FROM generations WHERE user_id = ? ORDER BY id DESC LIMIT 50\",\n [user.id],\n );\n return c.json(rows);\n});\n\napp.post(\"/api/generations\", async (c) => {\n const user = await requireUser(c);\n const { kind, prompt } = await c.req.json<{ kind?: string; prompt?: string }>();\n\n if (!kind || !(kind in COST)) {\n return c.json({ error: `kind 必须是 ${Object.keys(COST).join(\" / \")}` }, 400);\n }\n if (!prompt?.trim()) return c.json({ error: \"提示词不能为空\" }, 400);\n\n const k = kind as Kind;\n const cost = COST[k];\n\n // 先落一条 queued 记录，再扣分 —— 这样即使扣分失败也有痕迹\n await q(\n \"INSERT INTO generations (user_id, kind, prompt, status, cost) VALUES (?, ?, ?, 'queued', ?)\",\n [user.id, k, prompt.trim(), cost],\n );\n const row = await one(\"SELECT last_insert_rowid() AS id\");\n const id = Number(row?.id);\n\n try {\n const { resultUrl, note } = await runGeneration(k, prompt.trim());\n const charged = note ? 0 : cost;\n\n if (charged > 0) {\n await spendPoints(user.id, charged, `${k} 生成 #${id}`);\n }\n\n await q(\n \"UPDATE generations SET status = 'completed', result_url = ?, cost = ?, error = ? WHERE id = ?\",\n [resultUrl, charged, note || null, id],\n );\n return c.json({ ok: true, id, resultUrl, charged, note });\n } catch (e) {\n const message = (e as Error).message;\n await q(\"UPDATE generations SET status = 'failed', error = ? WHERE id = ?\", [\n message,\n id,\n ]);\n return c.json({ error: message }, 400);\n }\n});\n\n// ── 积分流水 ─────────────────────────────────────────────────────\n\napp.get(\"/api/points\", async (c) => {\n const user = await requireUser(c);\n const rows = await q(\n \"SELECT * FROM points_ledger WHERE user_id = ? ORDER BY id DESC LIMIT 50\",\n [user.id],\n );\n return c.json(rows);\n});\n\n// ── 管理后台 ─────────────────────────────────────────────────────\n\napp.get(\"/api/admin/users\", async (c) => {\n await requireAdmin(c);\n const rows = await q(\n `SELECT u.id, u.email, u.nickname, u.points, u.role, u.created_at,\n (SELECT COUNT(*) FROM generations g WHERE g.user_id = u.id) AS gens\n FROM users u ORDER BY u.id DESC LIMIT 100`,\n );\n return c.json(rows);\n});\n\napp.post(\"/api/admin/points\", async (c) => {\n await requireAdmin(c);\n const { userId, delta, reason } = await c.req.json<{\n userId?: number;\n delta?: number;\n reason?: string;\n }>();\n if (!userId || !delta) return c.json({ error: \"userId 和 delta 必填\" }, 400);\n await grantPoints(Number(userId), Number(delta), reason?.trim() || \"管理员调整\");\n return c.json({ ok: true });\n});\n\napp.get(\"/api/admin/stats\", async (c) => {\n await requireAdmin(c);\n const [users, gens, spent] = await Promise.all([\n one(\"SELECT COUNT(*) AS n FROM users\"),\n one(\"SELECT COUNT(*) AS n FROM generations\"),\n one(\"SELECT COALESCE(SUM(-delta), 0) AS n FROM points_ledger WHERE delta < 0\"),\n ]);\n return c.json({\n users: Number(users?.n ?? 0),\n generations: Number(gens?.n ?? 0),\n pointsSpent: Number(spent?.n ?? 0),\n });\n});\n\n// ── 错误处理 ─────────────────────────────────────────────────────\n\napp.onError((err, c) => {\n const status = (err as { status?: number }).status ?? 500;\n if (status >= 500) return Promise.reject(err);\n return c.json({ error: err.message }, status as 400);\n});\n\nexport default app.fetch;\n\nexport type { User };","children",[],[183],"d267576f-16ae-4df3-9f2c-79432398d5a1","db.ts","d896f122-b1d2-11f1-a287-1607ee4eb77e",2,["D",1789565455988],"/**\n * 数据层：建表 + 查询助手。\n *\n * 表结构（对标薪火那套的功能，但字段自己设计）：\n * users 用户：邮箱、昵称、积分、角色\n * login_codes 邮箱验证码（10 分钟有效，一次性）\n * sessions 登录会话（30 天）\n * generations 生成记录：类型、提示词、状态、结果、消耗积分\n * points_ledger 积分流水（每次增减都记一笔，可对账）\n */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport type Row = Record;\ntype Arg = string | number | null;\n\nlet ready: Promise | null = null;\n\n/** 建表，幂等。第一次查询时自动跑一次。 */\nexport function initDb(): Promise {\n ready ??= (async () => {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL UNIQUE,\n nickname TEXT NOT NULL DEFAULT '',\n points INTEGER NOT NULL DEFAULT 0,\n role TEXT NOT NULL DEFAULT 'user',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS login_codes (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n email TEXT NOT NULL,\n code TEXT NOT NULL,\n expires_at INTEGER NOT NULL,\n consumed INTEGER NOT NULL DEFAULT 0,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE INDEX IF NOT EXISTS idx_login_codes_email ON login_codes(email)`,\n `CREATE TABLE IF NOT EXISTS sessions (\n token TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n expires_at INTEGER NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE TABLE IF NOT EXISTS generations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n kind TEXT NOT NULL,\n prompt TEXT NOT NULL,\n status TEXT NOT NULL DEFAULT 'queued',\n result_url TEXT,\n cost INTEGER NOT NULL DEFAULT 0,\n error TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE INDEX IF NOT EXISTS idx_generations_user ON generations(user_id, id DESC)`,\n `CREATE TABLE IF NOT EXISTS points_ledger (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n delta INTEGER NOT NULL,\n reason TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n `CREATE INDEX IF NOT EXISTS idx_ledger_user ON points_ledger(user_id, id DESC)`,\n ]);\n })();\n return ready;\n}\n\n/** 执行查询，返回行数组。所有用户输入都必须走 args 占位符。 */\nexport async function q(sql: string, args: Arg[] = []): Promise {\n await initDb();\n const res = await sqlite.execute({ sql, args });\n return res.rows as Row[];\n}\n\n/** 取第一行，没有则返回 null */\nexport async function one(sql: string, args: Arg[] = []): Promise {\n const rows = await q(sql, args);\n return rows[0] ?? null;\n}\n\nexport { sqlite };",[],[192],"f0951bb4-2d98-413e-b335-c37d4d929e6b","auth.ts","d8a268ea-b1d2-11f1-a287-1607ee4eb77e",3,["D",1789565456077],"/**\n * 认证 + 积分。\n *\n * 登录方式：邮箱验证码（不需要密码）。\n * 验证码默认打到 console，同时返回给前端 —— 这是**开发模式**，\n * 方便你不配邮件服务就能跑通。配上 RESEND_API_KEY 后自动改成真发邮件。\n */\nimport { randomBytes, randomInt } from \"node:crypto\";\nimport { one, q, sqlite, type Row } from \"./db.ts\";\n\n/** 注册赠送的积分 */\nexport const SIGNUP_BONUS = 500;\n\n/** 各类生成消耗的积分 */\nexport const COST = {\n image: 20,\n video: 100,\n drama: 200,\n} as const;\n\nexport type Kind = keyof typeof COST;\n\nconst CODE_TTL_MS = 10 * 60 * 1000;\nconst SESSION_TTL_MS = 30 * 24 * 60 * 60 * 1000;\n\nexport type User = {\n id: number;\n email: string;\n nickname: string;\n points: number;\n role: string;\n};\n\nfunction toUser(row: Row): User {\n return {\n id: Number(row.id),\n email: String(row.email),\n nickname: String(row.nickname),\n points: Number(row.points),\n role: String(row.role),\n };\n}\n\n/** 生成 6 位验证码并存库，返回验证码本身（交给调用方决定怎么送达） */\nexport async function createCode(email: string): Promise {\n const code = String(randomInt(100000, 1000000));\n await q(\n \"INSERT INTO login_codes (email, code, expires_at) VALUES (?, ?, ?)\",\n [email, code, Date.now() + CODE_TTL_MS],\n );\n return code;\n}\n\n/**\n * 校验验证码并登录。首次登录自动注册，送 SIGNUP_BONUS 积分。\n * 返回会话 token。\n */\nexport async function loginWithCode(\n email: string,\n code: string,\n): Promise<{ token: string; user: User }> {\n const row = await one(\n `SELECT id, expires_at FROM login_codes\n WHERE email = ? AND code = ? AND consumed = 0\n ORDER BY id DESC LIMIT 1`,\n [email, code],\n );\n if (!row) throw new Error(\"验证码不正确\");\n if (Number(row.expires_at) < Date.now()) throw new Error(\"验证码已过期，请重新获取\");\n\n // 一次性：立刻作废，防止重放\n await q(\"UPDATE login_codes SET consumed = 1 WHERE id = ?\", [Number(row.id)]);\n\n let userRow = await one(\"SELECT * FROM users WHERE email = ?\", [email]);\n if (!userRow) {\n await q(\n \"INSERT INTO users (email, nickname, points) VALUES (?, ?, ?)\",\n [email, email.split(\"@\")[0], SIGNUP_BONUS],\n );\n userRow = await one(\"SELECT * FROM users WHERE email = ?\", [email]);\n if (!userRow) throw new Error(\"创建用户失败\");\n await q(\n \"INSERT INTO points_ledger (user_id, delta, reason) VALUES (?, ?, ?)\",\n [Number(userRow.id), SIGNUP_BONUS, \"注册赠送\"],\n );\n }\n\n const token = randomBytes(24).toString(\"hex\");\n await q(\n \"INSERT INTO sessions (token, user_id, expires_at) VALUES (?, ?, ?)\",\n [token, Number(userRow.id), Date.now() + SESSION_TTL_MS],\n );\n\n return { token, user: toUser(userRow) };\n}\n\n/** 用 token 换用户，过期或无效返回 null */\nexport async function userFromToken(token: string | undefined): Promise {\n if (!token) return null;\n const row = await one(\n `SELECT u.* FROM sessions s\n JOIN users u ON u.id = s.user_id\n WHERE s.token = ? AND s.expires_at > ?`,\n [token, Date.now()],\n );\n return row ? toUser(row) : null;\n}\n\nexport async function logout(token: string | undefined): Promise {\n if (!token) return;\n await q(\"DELETE FROM sessions WHERE token = ?\", [token]);\n}\n\n/**\n * 扣积分。用 batch 保证「扣分 + 记流水」要么都成功要么都回滚，\n * 避免出现扣了分没记录、或记了流水没扣分的脏数据。\n */\nexport async function spendPoints(\n userId: number,\n amount: number,\n reason: string,\n): Promise {\n const row = await one(\"SELECT points FROM users WHERE id = ?\", [userId]);\n if (!row) throw new Error(\"用户不存在\");\n if (Number(row.points) < amount) {\n throw new Error(`积分不足：需要 ${amount}，当前 ${Number(row.points)}`);\n }\n await sqlite.batch([\n {\n sql: \"UPDATE users SET points = points - ? WHERE id = ?\",\n args: [amount, userId],\n },\n {\n sql: \"INSERT INTO points_ledger (user_id, delta, reason) VALUES (?, ?, ?)\",\n args: [userId, -amount, reason],\n },\n ]);\n}\n\n/** 加积分（管理员调整、活动赠送等） */\nexport async function grantPoints(\n userId: number,\n amount: number,\n reason: string,\n): Promise {\n await sqlite.batch([\n {\n sql: \"UPDATE users SET points = points + ? WHERE id = ?\",\n args: [amount, userId],\n },\n {\n sql: \"INSERT INTO points_ledger (user_id, delta, reason) VALUES (?, ?, ?)\",\n args: [userId, amount, reason],\n },\n ]);\n}\n\n/**\n * 送验证码。有 RESEND_API_KEY 就真发邮件，没有就返回明文（开发模式）。\n * 返回 null 表示已通过邮件送达。\n */\nexport async function deliverCode(email: string, code: string): Promise {\n const key = Deno.env.get(\"RESEND_API_KEY\");\n if (!key) {\n console.log(`[开发模式] ${email} 的验证码是 ${code}`);\n return code;\n }\n const res = await fetch(\"https://api.resend.com/emails\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${key}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n from: Deno.env.get(\"RESEND_FROM\") ?? \"onboarding@resend.dev\",\n to: email,\n subject: \"你的登录验证码\",\n text: `验证码：${code}\\n10 分钟内有效。`,\n }),\n });\n if (!res.ok) throw new Error(`邮件发送失败：${res.status} ${await res.text()}`);\n return null;\n}",[],[200],"da974dc1-fece-4968-ac7e-082a8fa72cf7","README.md","01a0aa69-97a0-72fb-98d4-e7927f9d5074",["D",1789565441882],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[208],"239d12c5-865e-47fa-82ed-b364434b68ae","CHANGELOG.md","01a0aa69-97a0-72fb-98d4-e02dbec7365d",["D",1789565441882],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

History · Counter.tsx