`, 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",[159,160,69],"frontend","components","pulls","branches","forks","envVars",{"_168":39,"_170":26},"connections",{"_168":26,"_169":26},"count","unfilledCount","emptyCount",{"_32":263,"_13":159,"_67":210,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":264,"_38":26,"_70":260,"_155":-5,"_72":24,"_157":-5,"_190":265,"_17":266},{"_32":258,"_13":160,"_67":151,"_42":210,"_34":35,"_152":39,"_153":89,"_36":259,"_38":26,"_70":260,"_155":-5,"_72":24,"_157":-5,"_190":261,"_17":262},{"_32":250,"_13":251,"_67":252,"_42":151,"_34":35,"_152":253,"_153":89,"_36":254,"_38":26,"_70":71,"_155":255,"_72":24,"_157":-5,"_190":256,"_17":257},{"_32":242,"_13":243,"_67":244,"_42":151,"_34":35,"_152":115,"_153":89,"_36":245,"_38":246,"_70":71,"_155":247,"_72":24,"_157":-5,"_190":248,"_17":249},{"_32":150,"_13":69,"_67":68,"_42":151,"_34":35,"_152":39,"_153":89,"_36":239,"_38":26,"_70":71,"_155":156,"_72":24,"_157":-5,"_190":240,"_17":241},{"_32":231,"_13":232,"_67":233,"_42":151,"_34":35,"_152":234,"_153":89,"_36":235,"_38":26,"_70":71,"_155":236,"_72":24,"_157":-5,"_190":237,"_17":238},{"_32":223,"_13":224,"_67":225,"_42":210,"_34":35,"_152":226,"_153":89,"_36":227,"_38":39,"_70":21,"_155":228,"_72":24,"_157":-5,"_190":229,"_17":230},{"_32":216,"_13":217,"_67":218,"_42":210,"_34":35,"_152":39,"_153":89,"_36":219,"_38":26,"_70":71,"_155":220,"_72":24,"_157":-5,"_190":221,"_17":222},{"_32":207,"_13":208,"_67":209,"_42":210,"_34":35,"_152":211,"_153":89,"_36":212,"_38":39,"_70":71,"_155":213,"_72":24,"_157":-5,"_190":214,"_17":215},{"_32":200,"_13":201,"_67":202,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":203,"_38":26,"_70":21,"_155":204,"_72":24,"_157":-5,"_190":205,"_17":206},{"_32":193,"_13":194,"_67":195,"_42":-5,"_34":35,"_152":39,"_153":89,"_36":196,"_38":26,"_70":21,"_155":197,"_72":24,"_157":-5,"_190":198,"_17":199},{"_32":183,"_13":184,"_67":87,"_42":-5,"_34":35,"_152":185,"_153":89,"_36":186,"_38":187,"_70":188,"_155":189,"_72":24,"_157":14,"_190":191,"_17":192},"22e31ed7-e684-4f30-a0b2-93f40cc63fbb","index.ts",12,["D",1787750343639],7,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\nasync function setup() {\n await sqlite.batch([\n { sql: `CREATE TABLE IF NOT EXISTS members (id INTEGER PRIMARY KEY AUTOINCREMENT,name TEXT NOT NULL,email TEXT NOT NULL UNIQUE,interests TEXT NOT NULL,experience TEXT NOT NULL,status TEXT NOT NULL DEFAULT 'pending',joined_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)` },\n { sql: `CREATE TABLE IF NOT EXISTS cars (id INTEGER PRIMARY KEY,name TEXT NOT NULL,year TEXT NOT NULL,discipline TEXT NOT NULL,status TEXT NOT NULL,detail TEXT NOT NULL,next_ready TEXT,accent TEXT NOT NULL)` },\n { sql: `CREATE TABLE IF NOT EXISTS events (id INTEGER PRIMARY KEY,title TEXT NOT NULL,event_date TEXT NOT NULL,location TEXT NOT NULL,discipline TEXT NOT NULL,car_id INTEGER,capacity INTEGER NOT NULL,status TEXT NOT NULL,description TEXT NOT NULL)` },\n { sql: `CREATE TABLE IF NOT EXISTS bookings (id INTEGER PRIMARY KEY AUTOINCREMENT,member_id INTEGER NOT NULL,event_id INTEGER NOT NULL,status TEXT NOT NULL DEFAULT 'confirmed',created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,UNIQUE(member_id,event_id))` },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (1,?,?,?,?,?,?,?)\", args: [\"Red Five\",\"1999 Mazda MX-5\",\"Drift\",\"Ready\",\"Fresh fluids · 80% tires · aligned\",\"Now\",\"red\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (2,?,?,?,?,?,?,?)\", args: [\"Blue Monday\",\"2001 Mazda MX-5\",\"Track\",\"Ready\",\"Track inspection passed · new pads\",\"Now\",\"blue\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (3,?,?,?,?,?,?,?)\", args: [\"Dad Bod\",\"1994 Mazda MX-5\",\"Autocross\",\"Service\",\"Cooling refresh in progress\",\"Sep 8\",\"amber\"] },\n { sql: \"INSERT OR IGNORE INTO cars VALUES (4,?,?,?,?,?,?,?)\", args: [\"Long Way Round\",\"2006 Mazda MX-5\",\"Off-road pilot\",\"Planning\",\"Rallycross setup under evaluation\",\"2027\",\"green\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (1,?,?,?,?,?,?,?,?)\", args: [\"Drift School: First Slide\",\"2026-09-19\",\"Virginia International Raceway\",\"Drift\",1,8,\"Open\",\"A low-pressure day for learning weight transfer, initiating a slide, and laughing at your first spin.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (2,?,?,?,?,?,?,?,?)\", args: [\"GT Pace: Full Course\",\"2026-10-17\",\"Dominion Raceway\",\"Track\",2,6,\"Open\",\"Lead-follow laps, coaching, and a properly prepared car without owning a trailer or a torque wrench collection.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (3,?,?,?,?,?,?,?,?)\", args: [\"Parking Lot Hero\",\"2026-11-08\",\"Hampton Roads Autocross\",\"Autocross\",3,10,\"Waitlist\",\"Cones, timing lights, and friendly competition. The purest dollar-to-grin ratio in motorsport.\"] },\n { sql: \"INSERT OR IGNORE INTO events VALUES (4,?,?,?,?,?,?,?,?)\", args: [\"Quarterly Garage Social\",\"2026-12-05\",\"The Shared Garage · Norfolk\",\"Social\",null,30,\"Open\",\"Meet the members, see the fleet, vote on next quarter, and help set maintenance priorities.\"] },\n { sql: `CREATE TABLE IF NOT EXISTS finance_settings (id INTEGER PRIMARY KEY CHECK(id=1),period_label TEXT NOT NULL,projected_members INTEGER NOT NULL DEFAULT 1,reserve_target_cents INTEGER NOT NULL DEFAULT 0,opening_balance_cents INTEGER NOT NULL DEFAULT 0,methodology TEXT NOT NULL,updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP)` },\n { sql: `CREATE TABLE IF NOT EXISTS finance_budget (id INTEGER PRIMARY KEY AUTOINCREMENT,period_label TEXT NOT NULL,category TEXT NOT NULL,planned_cents INTEGER NOT NULL DEFAULT 0,explanation TEXT NOT NULL,sort_order INTEGER NOT NULL DEFAULT 0)` },\n { sql: `CREATE TABLE IF NOT EXISTS finance_transactions (id INTEGER PRIMARY KEY AUTOINCREMENT,transaction_date TEXT NOT NULL,type TEXT NOT NULL CHECK(type IN ('income','expense')),category TEXT NOT NULL,payee TEXT NOT NULL,description TEXT NOT NULL,amount_cents INTEGER NOT NULL CHECK(amount_cents>=0),receipt_url TEXT,posted_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,voided_at TEXT,void_reason TEXT)` },\n { sql: \"INSERT OR IGNORE INTO finance_settings(id,period_label,projected_members,reserve_target_cents,opening_balance_cents,methodology) VALUES(1,?,?,?,?,?)\", args: [\"2026 Q4\",1,0,0,\"Quarterly dues = max(0, planned operating costs + reserve target − current cash balance) ÷ projected participating members. The result is rounded up to the next cent.\"] },\n { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(1,?,?,?,?,?)\", args: [\"2026 Q4\",\"Track and venue fees\",0,\"Facility rental, event entry, and track access.\",1] },\n { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(2,?,?,?,?,?)\", args: [\"2026 Q4\",\"Fleet maintenance\",0,\"Parts, fluids, tires, inspections, and specialist labor.\",2] },\n { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(3,?,?,?,?,?)\", args: [\"2026 Q4\",\"Insurance and compliance\",0,\"Coverage, registrations, waivers, and administrative requirements.\",3] },\n { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(4,?,?,?,?,?)\", args: [\"2026 Q4\",\"Transport and storage\",0,\"Trailer, fuel, towing, garage, and storage costs.\",4] },\n { sql: \"INSERT OR IGNORE INTO finance_budget(id,period_label,category,planned_cents,explanation,sort_order) VALUES(5,?,?,?,?,?)\", args: [\"2026 Q4\",\"Instruction and safety\",0,\"Coaches, helmets, extinguishers, and other safety equipment.\",5] }\n ]);\n}\napp.get(\"/\", async c => { await setup(); return c.html(Root()); });\napp.get(\"/__immutable/*\", c => serveImmutableFile(c.req.path));\napp.get(\"/source\", c => c.redirect(parseVal().links.self.val));\napp.get(\"/api/dashboard\", async c => {\n await setup();\n const [cars,events,counts] = await Promise.all([\n sqlite.execute(\"SELECT * FROM cars ORDER BY id\"),\n sqlite.execute(`SELECT e.*,c.name car_name,COUNT(b.id) booked FROM events e LEFT JOIN cars c ON c.id=e.car_id LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' GROUP BY e.id ORDER BY e.event_date`),\n sqlite.execute(`SELECT (SELECT COUNT(*) FROM members) members,(SELECT COUNT(*) FROM bookings) reservations,(SELECT COUNT(*) FROM cars WHERE status='Ready') ready_cars`)\n ]);\n return c.json({cars:cars.rows,events:events.rows,stats:counts.rows[0]});\n});\n\napp.get(\"/api/finance\", async c => {\n await setup();\n const [settings,budget,transactions] = await Promise.all([\n sqlite.execute(\"SELECT * FROM finance_settings WHERE id=1\"),\n sqlite.execute(\"SELECT * FROM finance_budget ORDER BY sort_order,id\"),\n sqlite.execute(\"SELECT * FROM finance_transactions ORDER BY transaction_date DESC,id DESC\")\n ]);\n const s:any=settings.rows[0];\n const active=(transactions.rows as any[]).filter(t=>!t.voided_at);\n const income=active.filter(t=>t.type===\"income\").reduce((n,t)=>n+Number(t.amount_cents),0);\n const expenses=active.filter(t=>t.type===\"expense\").reduce((n,t)=>n+Number(t.amount_cents),0);\n const cash=Number(s.opening_balance_cents)+income-expenses;\n const planned=(budget.rows as any[]).reduce((n,b)=>n+Number(b.planned_cents),0);\n const needed=Math.max(0,planned+Number(s.reserve_target_cents)-cash);\n const members=Math.max(1,Number(s.projected_members));\n const dues=Math.ceil(needed/members);\n return c.json({settings:s,budget:budget.rows,transactions:transactions.rows,summary:{income_cents:income,expense_cents:expenses,cash_balance_cents:cash,planned_costs_cents:planned,funding_needed_cents:needed,quarterly_dues_cents:dues,projected_members:members}});\n});\n\napp.post(\"/api/members\", async c => {\n await setup(); const b=await c.req.json();\n const name=String(b.name||\"\").trim(), email=String(b.email||\"\").trim().toLowerCase();\n const interests=Array.isArray(b.interests)?b.interests.join(\", \"):\"\", experience=String(b.experience||\"\");\n if(!name||!email.includes(\"@\")||!interests||!experience)return c.json({error:\"Please complete every field.\"},400);\n try { await sqlite.execute({sql:\"INSERT INTO members(name,email,interests,experience) VALUES(?,?,?,?)\",args:[name,email,interests,experience]}); return c.json({ok:true,message:\"You're on the founding member list.\"},201); }\n catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"That email is already on the member list.\"},409); throw err; }\n});\napp.post(\"/api/events/:id/join\", async c => {\n await setup(); const eventId=Number(c.req.param(\"id\")); const b=await c.req.json(); const email=String(b.email||\"\").trim().toLowerCase();\n const member=await sqlite.execute({sql:\"SELECT id FROM members WHERE email=?\",args:[email]});\n if(!member.rows.length)return c.json({error:\"Apply for membership first, then reserve your event.\"},404);\n const event=await sqlite.execute({sql:`SELECT e.capacity,e.status,COUNT(b.id) booked FROM events e LEFT JOIN bookings b ON b.event_id=e.id AND b.status='confirmed' WHERE e.id=? GROUP BY e.id`,args:[eventId]});\n if(!event.rows.length)return c.json({error:\"Event not found.\"},404);\n const row:any=event.rows[0]; const status=row.status===\"Waitlist\"||Number(row.booked)>=Number(row.capacity)?\"waitlist\":\"confirmed\";\n try { await sqlite.execute({sql:\"INSERT INTO bookings(member_id,event_id,status) VALUES(?,?,?)\",args:[Number((member.rows[0] as any).id),eventId,status]}); return c.json({ok:true,message:status===\"confirmed\"?\"Your spot is reserved.\":\"You're on the waitlist.\"},201); }\n catch(err){ if(String(err).includes(\"UNIQUE\"))return c.json({error:\"You're already registered for this event.\"},409); throw err; }\n});\n\nasync function requireAdmin(c:any) {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return { response: c.json({ error: \"Sign in required\", login: \"/auth/login\" }, 401) };\n if (session.user.username !== \"pchinjr\") return { response: c.json({ error: \"This dashboard is restricted to the club owner.\" }, 403) };\n return { session };\n}\napp.get(\"/admin\", async c => {\n const auth = await requireAdmin(c);\n if (auth.response) return c.redirect(\"/auth/login\");\n return c.redirect(\"/#desk\");\n});\napp.get(\"/api/admin/dashboard\", async c => {\n const auth = await requireAdmin(c); if (auth.response) return auth.response;\n await setup();\n const [members,bookings,cars,events] = await Promise.all([\n sqlite.execute(\"SELECT * FROM members ORDER BY joined_at DESC\"),\n sqlite.execute(`SELECT b.*,m.name member_name,m.email member_email,e.title event_title FROM bookings b JOIN members m ON m.id=b.member_id JOIN events e ON e.id=b.event_id ORDER BY b.created_at DESC`),\n sqlite.execute(\"SELECT * FROM cars ORDER BY id\"),\n sqlite.execute(\"SELECT * FROM events ORDER BY event_date\")\n ]);\n return c.json({ user: auth.session?.user.username, members: members.rows, bookings: bookings.rows, cars: cars.rows, events: events.rows });\n});\napp.patch(\"/api/admin/members/:id\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); if(![\"pending\",\"active\",\"paused\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n await sqlite.execute({sql:\"UPDATE members SET status=? WHERE id=?\",args:[b.status,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/cars/:id\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); if(![\"Ready\",\"Service\",\"Planning\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n await sqlite.execute({sql:\"UPDATE cars SET status=?,detail=?,next_ready=? WHERE id=?\",args:[b.status,String(b.detail||\"\"),String(b.next_ready||\"\"),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/events/:id\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); if(![\"Open\",\"Waitlist\",\"Closed\",\"Complete\"].includes(b.status)||Number(b.capacity)<1)return c.json({error:\"Invalid event update\"},400);\n await sqlite.execute({sql:\"UPDATE events SET status=?,capacity=? WHERE id=?\",args:[b.status,Number(b.capacity),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/bookings/:id\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); if(![\"confirmed\",\"waitlist\",\"cancelled\",\"attended\"].includes(b.status))return c.json({error:\"Invalid status\"},400);\n await sqlite.execute({sql:\"UPDATE bookings SET status=? WHERE id=?\",args:[b.status,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\n\napp.post(\"/api/admin/finance/transactions\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); const type=String(b.type),amount=Math.round(Number(b.amount)*100);\n if(![\"income\",\"expense\"].includes(type)||!Number.isFinite(amount)||amount<0||!b.transaction_date||!b.category||!b.description)return c.json({error:\"Complete all required transaction fields.\"},400);\n const url=String(b.receipt_url||\"\").trim(); if(url&&!/^https?:\\/\\//i.test(url))return c.json({error:\"Receipt link must begin with http:// or https://\"},400);\n await sqlite.execute({sql:\"INSERT INTO finance_transactions(transaction_date,type,category,payee,description,amount_cents,receipt_url) VALUES(?,?,?,?,?,?,?)\",args:[String(b.transaction_date),type,String(b.category),String(b.payee||\"\"),String(b.description),amount,url||null]});\n return c.json({ok:true},201);\n});\napp.patch(\"/api/admin/finance/transactions/:id/void\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); const reason=String(b.reason||\"\").trim(); if(!reason)return c.json({error:\"A public correction reason is required.\"},400);\n await sqlite.execute({sql:\"UPDATE finance_transactions SET voided_at=CURRENT_TIMESTAMP,void_reason=? WHERE id=? AND voided_at IS NULL\",args:[reason,Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/finance/settings\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); const members=Math.max(1,Math.floor(Number(b.projected_members))); const reserve=Math.max(0,Math.round(Number(b.reserve_target)*100)); const opening=Math.round(Number(b.opening_balance)*100);\n if(!b.period_label||!Number.isFinite(members)||!Number.isFinite(reserve)||!Number.isFinite(opening))return c.json({error:\"Invalid planning assumptions.\"},400);\n await sqlite.execute({sql:\"UPDATE finance_settings SET period_label=?,projected_members=?,reserve_target_cents=?,opening_balance_cents=?,updated_at=CURRENT_TIMESTAMP WHERE id=1\",args:[String(b.period_label),members,reserve,opening]});\n await sqlite.execute({sql:\"UPDATE finance_budget SET period_label=?\",args:[String(b.period_label)]}); return c.json({ok:true});\n});\napp.patch(\"/api/admin/finance/budget/:id\", async c => {\n const auth=await requireAdmin(c); if(auth.response)return auth.response;\n const b=await c.req.json(); const amount=Math.max(0,Math.round(Number(b.planned_amount)*100)); if(!Number.isFinite(amount)||!b.explanation)return c.json({error:\"Invalid budget line.\"},400);\n await sqlite.execute({sql:\"UPDATE finance_budget SET planned_cents=?,explanation=? WHERE id=?\",args:[amount,String(b.explanation),Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\napp.onError(err=>Promise.reject(err));\nexport default oauthMiddleware(app.fetch);","children",[],[184],"e93ca4d6-3d1b-4f47-be68-a915258e0c74","README.md","01a03bb4-ad04-7558-b577-f661a8929c18",["D",1787708091556],"# 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",[],[194],"866b0aaf-14cc-4ced-bf06-af0ebb6336e2","CHANGELOG.md","01a03bb4-ad04-7558-b577-f25405a25147",["D",1787708091556],"# 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