`, 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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_278":279,"_280":281},"routes/_app.x.$handle.$name",{"_104":103,"_37":50,"_113":94,"_32":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":30,"_128":129,"_130":64,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","4314f355-2d70-469d-9d78-04409a76a4ad","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/lib/format.ts","latestPath","fileId","e195b9fa-b21f-11f1-9378-1607ee4eb77e","name","format.ts","fileType","script","content","/** Small display helpers. No dependencies — these run in the browser. */\n\nconst MINUTE = 60;\nconst HOUR = 60 * MINUTE;\nconst DAY = 24 * HOUR;\nconst WEEK = 7 * DAY;\nconst MONTH = 30 * DAY;\nconst YEAR = 365 * DAY;\n\n/** 1234 → \"1.2k\", 1200000 → \"1.2m\". */\nexport function compact(n: number): string {\n if (!Number.isFinite(n)) return \"0\";\n if (n < 1000) return String(n);\n if (n < 1_000_000) {\n const value = n / 1000;\n return `${(value < 10 ? value.toFixed(1) : Math.round(value)).toString().replace(/\\.0$/, \"\")}k`;\n }\n const value = n / 1_000_000;\n return `${value.toFixed(1).replace(/\\.0$/, \"\")}m`;\n}\n\n/** An ISO timestamp → \"3 days ago\". */\nexport function relative(iso: string): string {\n const then = Date.parse(iso);\n if (Number.isNaN(then)) return \"\";\n const secs = Math.max(0, (Date.now() - then) / 1000);\n if (secs < 45) return \"just now\";\n\n let value: number;\n let unit: string;\n if (secs < HOUR) {\n value = secs / MINUTE;\n unit = \"minute\";\n } else if (secs < DAY) {\n value = secs / HOUR;\n unit = \"hour\";\n } else if (secs < WEEK) {\n value = secs / DAY;\n unit = \"day\";\n } else if (secs < MONTH) {\n value = secs / WEEK;\n unit = \"week\";\n } else if (secs < YEAR) {\n value = secs / MONTH;\n unit = \"month\";\n } else {\n value = secs / YEAR;\n unit = \"year\";\n }\n\n const n = Math.floor(value);\n return n <= 1 ? `1 ${unit} ago` : `${n} ${unit}s ago`;\n}\n\n/**\n * GitHub's language colors, for the little dot next to a repo's language.\n * Not exhaustive — anything missing falls back to neutral gray.\n */\nconst LANGUAGE_COLORS: Record = {\n TypeScript: \"#3178c6\",\n JavaScript: \"#f1e05a\",\n Python: \"#3572A5\",\n Go: \"#00ADD8\",\n Rust: \"#dea584\",\n Java: \"#b07219\",\n \"C++\": \"#f34b7d\",\n C: \"#555555\",\n \"C#\": \"#178600\",\n Ruby: \"#701516\",\n PHP: \"#4F5D95\",\n Swift: \"#F05138\",\n Kotlin: \"#A97BFF\",\n Shell: \"#89e051\",\n HTML: \"#e34c26\",\n CSS: \"#563d7c\",\n SCSS: \"#c6538c\",\n Vue: \"#41b883\",\n Svelte: \"#ff3e00\",\n Dart: \"#00B4AB\",\n Elixir: \"#6e4a7e\",\n Erlang: \"#B83998\",\n Haskell: \"#5e5086\",\n Clojure: \"#db5855\",\n Lua: \"#000080\",\n R: \"#198CE7\",\n Scala: \"#c22d40\",\n Zig: \"#ec915c\",\n Nix: \"#7e7eff\",\n Astro: \"#ff5a03\",\n MDX: \"#fcb32c\",\n \"Jupyter Notebook\": \"#DA5B0B\",\n Dockerfile: \"#384d54\",\n Makefile: \"#427819\",\n Perl: \"#0298c3\",\n Julia: \"#a270ba\",\n OCaml: \"#ef7a08\",\n Solidity: \"#AA6746\",\n PowerShell: \"#012456\",\n Vim script: \"#199f4b\",\n \"Objective-C\": \"#438eff\",\n Assembly: \"#6E4C13\",\n TeX: \"#3D6117\",\n};\n\nexport function languageColor(name: string | null): string {\n if (!name) return \"#9ca3af\";\n return LANGUAGE_COLORS[name] ?? \"#9ca3af\";\n}","createdAt",["D",1789598542351],"branchVersion","branchId","62461c6f-d5a5-42e2-991d-eb12f267fb29","id","75594e46-fd3f-4fb5-b76f-ebeb3f30cc18","github-stars",["D",1789598460492],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A page showing the repos I've starred on GitHub","imageUrl","f3673646-3242-47b1-aeab-dea436ba0977","pinnedFileId","01a0ac61-6a82-70dc-b85b-426db4f32fd5","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0ac59-453d-700c-b458-c20df4d4e87d","tursoName","75594e46fd3f4fb5b76febeb3f30cc18","tursoHostname","75594e46fd3f4fb5b76febeb3f30cc18-val-town.aws-us-east-2.turso.io","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_19":60,"_109":110,"_111":30},"branch",{"_13":93,"_37":94,"_48":47,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":50,"_102":103},"isOwned",33,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","rodrigoalcaraz","handle","displayName","Rodrigo Alcaraz","avatar","https://lh3.googleusercontent.com/a/ACg8ocJkAyg-zXk2EMWk74tpj4qNlT0UcN03qroZ1zeS2w4W6ZgCFwA=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":274,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":275,"_88":276,"_90":277,"_92":30},"tree",[185,195,196,197,198],"files",[185,186,187,188,189,190,191,192,193,194,195,196,197,198],"counts",{"_175":68,"_176":143,"_177":68,"_178":179,"_180":181},"contents",[135,136,137,138,139],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":169,"_37":170,"_35":171,"_142":-5,"_46":47,"_45":143,"_144":64,"_43":172,"_13":68,"_39":173,"_41":-5,"_29":30,"_148":-5,"_32":174},{"_48":163,"_37":164,"_35":165,"_142":-5,"_46":47,"_45":143,"_144":64,"_43":166,"_13":68,"_39":26,"_41":167,"_29":30,"_148":-5,"_32":168},{"_48":157,"_37":158,"_35":159,"_142":-5,"_46":47,"_45":143,"_144":30,"_43":160,"_13":68,"_39":26,"_41":161,"_29":30,"_148":-5,"_32":162},{"_48":150,"_37":151,"_35":152,"_142":-5,"_46":47,"_45":153,"_144":30,"_43":154,"_13":68,"_39":40,"_41":155,"_29":30,"_148":-5,"_32":156},{"_48":140,"_37":141,"_35":62,"_142":-5,"_46":47,"_45":143,"_144":30,"_43":145,"_13":68,"_39":146,"_41":147,"_29":30,"_148":50,"_32":149},"341bca32-e5e9-43f1-864c-bd11a6b43912","index.ts","parentId",1,"latest",["D",1789598460492],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[141],"5d6e5529-66f3-4c81-9129-0d0a9ff26834","github.ts","e189343c-b21f-11f1-9378-1607ee4eb77e",2,["D",1789598542267],"/**\n * A minimal GitHub REST client — just enough to read one user's profile and\n * the repos they've starred.\n *\n * Two things shape this file:\n *\n * 1. **Rate limits.** Unauthenticated GitHub allows 60 requests/hour *per IP*,\n * and Val Town shares IPs, so that budget can already be spent by someone\n * else. A token (any token, no scopes needed for public data) raises it to\n * 5,000/hour. We surface the remaining count so the page can say which\n * regime it's in rather than just failing.\n * 2. **Caching.** Most page views should never touch GitHub at all, so a\n * snapshot is cached in blob storage for a few minutes. See readCache().\n */\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst API = \"https://api.github.com\";\nconst USER_AGENT = \"val-town-github-stars\";\n\n/** Optional. Without it we're on the 60/hour unauthenticated budget. */\nexport const TOKEN_VAR = \"GITHUB_TOKEN\";\n/** Optional. Whose stars to show; defaults to the val owner's handle. */\nexport const USER_VAR = \"GITHUB_USER\";\nexport const DEFAULT_USER = \"rodrigoalcaraz\";\n\n/** GitHub's maximum page size, and how many pages we're willing to walk. */\nconst PER_PAGE = 100;\nconst MAX_PAGES = 10;\n\n/** How long a cached snapshot stays fresh. */\nconst CACHE_TTL_MS = 5 * 60 * 1000;\n\n// ── Wire types (GitHub's shape) ─────────────────────────────────\n\ninterface GitHubUser {\n login: string;\n name: string | null;\n avatar_url: string;\n html_url: string;\n bio: string | null;\n location: string | null;\n blog: string | null;\n public_repos: number;\n followers: number;\n following: number;\n}\n\ninterface GitHubRepo {\n id: number;\n name: string;\n html_url: string;\n description: string | null;\n language: string | null;\n topics?: string[];\n stargazers_count: number;\n forks_count: number;\n archived: boolean;\n fork: boolean;\n homepage: string | null;\n pushed_at: string;\n owner: { login: string; avatar_url: string };\n}\n\n/**\n * With the `star+json` media type each item is wrapped as\n * `{ starred_at, repo }`. We ask for that header, but we also accept a bare\n * repo object so the code keeps working if GitHub ever ignores it.\n */\ntype StarredItem = { starred_at?: string; repo?: GitHubRepo } & Partial;\n\n// ── Wire types (ours) ───────────────────────────────────────────\n\n/** One starred repo, flattened to only what the page renders. */\nexport interface Star {\n id: number;\n name: string;\n owner: string;\n ownerAvatar: string;\n url: string;\n description: string | null;\n language: string | null;\n topics: string[];\n stars: number;\n forks: number;\n archived: boolean;\n isFork: boolean;\n homepage: string | null;\n pushedAt: string;\n starredAt: string;\n}\n\nexport interface Profile {\n login: string;\n name: string | null;\n avatarUrl: string;\n htmlUrl: string;\n bio: string | null;\n location: string | null;\n blog: string | null;\n publicRepos: number;\n followers: number;\n following: number;\n}\n\nexport interface RateLimit {\n limit: number;\n remaining: number;\n resetAt: string | null;\n}\n\nexport interface StarSnapshot {\n user: string;\n profile: Profile;\n stars: Star[];\n languages: { name: string; count: number }[];\n fetchedAt: string;\n rateLimit: RateLimit | null;\n /** True when the user has more stars than MAX_PAGES × PER_PAGE. */\n truncated: boolean;\n authenticated: boolean;\n}\n\nexport class GitHubError extends Error {\n status: number;\n rateLimited: boolean;\n rateLimit: RateLimit | null;\n\n constructor(\n message: string,\n status: number,\n rateLimited: boolean,\n rateLimit: RateLimit | null,\n ) {\n super(message);\n this.name = \"GitHubError\";\n this.status = status;\n this.rateLimited = rateLimited;\n this.rateLimit = rateLimit;\n }\n}\n\n// ── Config ──────────────────────────────────────────────────────\n\nexport function tokenValue(): string {\n return Deno.env.get(TOKEN_VAR)?.trim() ?? \"\";\n}\n\nexport function hasToken(): boolean {\n return tokenValue().length > 0;\n}\n\nexport function configuredUser(): string {\n return Deno.env.get(USER_VAR)?.trim() || DEFAULT_USER;\n}\n\nfunction requestHeaders(): Record {\n const headers: Record = {\n Accept: \"application/vnd.github.star+json\",\n \"User-Agent\": USER_AGENT,\n \"X-GitHub-Api-Version\": \"2022-11-28\",\n };\n const token = tokenValue();\n if (token) headers.Authorization = `Bearer ${token}`;\n return headers;\n}\n\nfunction readRateLimit(res: Response): RateLimit | null {\n const int = (name: string): number | null => {\n const raw = res.headers.get(name);\n if (raw === null) return null;\n const value = Number(raw);\n return Number.isFinite(value) ? value : null;\n };\n const limit = int(\"x-ratelimit-limit\");\n const remaining = int(\"x-ratelimit-remaining\");\n if (limit === null && remaining === null) return null;\n const reset = int(\"x-ratelimit-reset\");\n return {\n limit: limit ?? 0,\n remaining: remaining ?? 0,\n resetAt: reset === null ? null : new Date(reset * 1000).toISOString(),\n };\n}\n\n// ── Requests ────────────────────────────────────────────────────\n\nasync function getJson(path: string): Promise<{ data: T; rateLimit: RateLimit | null }> {\n const res = await fetch(`${API}${path}`, { headers: requestHeaders() });\n const rateLimit = readRateLimit(res);\n\n if (!res.ok) {\n // GitHub answers an exhausted budget with 403 (or 429 for secondary\n // limits), so status alone doesn't tell us — check the remaining count too.\n const rateLimited = res.status === 403 || res.status === 429;\n let detail = \"\";\n try {\n const body = await res.json();\n if (typeof body?.message === \"string\") detail = body.message;\n } catch {\n // Not JSON — fall through to the generic message.\n }\n throw new GitHubError(\n detail || `GitHub responded ${res.status}`,\n res.status,\n rateLimited,\n rateLimit,\n );\n }\n\n return { data: await res.json() as T, rateLimit };\n}\n\nfunction toStar(item: StarredItem): Star | null {\n const repo = item.repo ?? item;\n if (!repo?.id || !repo.name || !repo.owner) return null;\n return {\n id: repo.id,\n name: repo.name,\n owner: repo.owner.login,\n ownerAvatar: repo.owner.avatar_url,\n url: repo.html_url,\n description: repo.description,\n language: repo.language,\n topics: repo.topics ?? [],\n stars: repo.stargazers_count,\n forks: repo.forks_count,\n archived: repo.archived,\n isFork: repo.fork,\n homepage: repo.homepage,\n pushedAt: repo.pushed_at,\n // Without the star+json media type GitHub omits starred_at; pushed_at is\n // the closest thing we have, and it keeps the sort stable.\n starredAt: item.starred_at ?? repo.pushed_at,\n };\n}\n\nfunction tallyLanguages(stars: Star[]): { name: string; count: number }[] {\n const counts = new Map();\n for (const star of stars) {\n if (!star.language) continue;\n counts.set(star.language, (counts.get(star.language) ?? 0) + 1);\n }\n return [...counts.entries()]\n .map(([name, count]) => ({ name, count }))\n .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name));\n}\n\n/**\n * Read a user's profile and every repo they've starred.\n *\n * Throws GitHubError for anything GitHub says no to, so the caller can tell a\n * missing user (404) from an exhausted rate limit (403) from a real failure.\n */\nexport async function fetchStars(user: string): Promise {\n const slug = encodeURIComponent(user);\n const profileRes = await getJson(`/users/${slug}`);\n const profile = profileRes.data;\n\n const stars: Star[] = [];\n let rateLimit = profileRes.rateLimit;\n let truncated = false;\n\n for (let page = 1; page <= MAX_PAGES; page++) {\n const { data, rateLimit: pageLimit } = await getJson(\n `/users/${slug}/starred?per_page=${PER_PAGE}&page=${page}&sort=created&direction=desc`,\n );\n rateLimit = pageLimit;\n for (const item of data) {\n const star = toStar(item);\n if (star) stars.push(star);\n }\n if (data.length < PER_PAGE) break;\n if (page === MAX_PAGES) truncated = true;\n }\n\n return {\n user: profile.login,\n profile: {\n login: profile.login,\n name: profile.name,\n avatarUrl: profile.avatar_url,\n htmlUrl: profile.html_url,\n bio: profile.bio,\n location: profile.location,\n blog: profile.blog,\n publicRepos: profile.public_repos,\n followers: profile.followers,\n following: profile.following,\n },\n stars,\n languages: tallyLanguages(stars),\n fetchedAt: new Date().toISOString(),\n rateLimit,\n truncated,\n authenticated: hasToken(),\n };\n}\n\n// ── Cache ───────────────────────────────────────────────────────\n// A cache miss costs one GitHub request; a hit costs none. Failures here are\n// swallowed on purpose — the cache is an optimization, never a reason to fail\n// a page load.\n\nconst cacheKey = (user: string) => `stars:${user.toLowerCase()}`;\n\nexport async function readCache(user: string): Promise {\n try {\n const hit = await blob.getJSON(cacheKey(user)) as StarSnapshot | undefined;\n if (!hit?.fetchedAt) return null;\n if (Date.now() - Date.parse(hit.fetchedAt) > CACHE_TTL_MS) return null;\n return hit;\n } catch {\n return null;\n }\n}\n\nexport async function writeCache(user: string, snapshot: StarSnapshot): Promise {\n try {\n await blob.setJSON(cacheKey(user), snapshot);\n } catch (err) {\n console.error(\"star cache write failed:\", err);\n }\n}",[151],"c75cc8fa-6d59-4705-a298-cce5c9105284","README.md","01a0ac61-6a82-70dc-b85b-3f0f5a830f77",["D",1789598460492],"# 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",[158],"83ee693a-3593-4c89-ab74-8f0f7a13f722","CHANGELOG.md","01a0ac61-6a82-70dc-b85b-3845daa4751d",["D",1789598460492],"# 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

Diff · v4