`, 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",{"_276":277,"_278":279},"routes/_app.x.$handle.$name",{"_98":97,"_31":43,"_107":88,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":24,"_122":123,"_124":57,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":24},"version",48,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","test-ecotrack-tracking.ts","latestPath","fileId","55241964-ae0d-11f1-b815-1607ee4eb77e","name","fileType","script","content","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst TRACKING = \"ECCDA2260901788920\";\n\nasync function run() {\n const row = await sqlite.execute({\n sql: \"SELECT value FROM app_settings WHERE key = ? LIMIT 1\",\n args: [\"ecotrack_api_credentials\"],\n });\n if (!row.rows.length) return { ok: false, message: \"API non configurée\" };\n\n const parsed = JSON.parse(String(row.rows[0].value));\n const apiToken = String(parsed.apiToken || \"\").trim();\n if (!apiToken) return { ok: false, message: \"API Token vide\" };\n\n const url = new URL(\"https://omexpress.ecotrack.dz/api/v1/get/orders\");\n url.searchParams.set(\"tracking\", TRACKING);\n url.searchParams.set(\"api_token\", apiToken);\n\n try {\n const response = await fetch(url, {\n headers: {\n Accept: \"application/json\",\n Authorization: `Bearer ${apiToken}`,\n },\n });\n const contentType = response.headers.get(\"content-type\") || \"\";\n let body: any = null;\n if (contentType.includes(\"application/json\")) {\n try { body = await response.json(); } catch { body = null; }\n } else {\n const text = await response.text();\n body = text.slice(0, 120);\n }\n\n const data = body && typeof body === \"object\" ? body : null;\n const topKeys = data ? Object.keys(data).slice(0, 20) : [];\n const orderCandidate = Array.isArray(data)\n ? data[0]\n : Array.isArray(data?.data)\n ? data.data[0]\n : Array.isArray(data?.orders)\n ? data.orders[0]\n : data?.data && typeof data.data === \"object\"\n ? data.data\n : data;\n\n const orderKeys = orderCandidate && typeof orderCandidate === \"object\"\n ? Object.keys(orderCandidate).slice(0, 30)\n : [];\n\n const statusValue = orderCandidate && typeof orderCandidate === \"object\"\n ? (orderCandidate.status ?? orderCandidate.statut ?? orderCandidate.status_name ?? orderCandidate.activity ?? orderCandidate.etat ?? null)\n : null;\n\n return {\n ok: response.ok,\n httpStatus: response.status,\n tracking: TRACKING,\n responseType: contentType.split(\";\")[0] || null,\n topKeys,\n orderKeys,\n status: typeof statusValue === \"string\" || typeof statusValue === \"number\" ? statusValue : null,\n hasData: Boolean(orderCandidate),\n };\n } catch (error) {\n return { ok: false, message: error instanceof Error ? error.message : String(error) };\n }\n}\n\nconst result = await run();\nconsole.log(\"ECOTRACK_TRACKING_TEST\", JSON.stringify(result));\nexport default result;\n","createdAt",["D",1789150771128],"branchVersion","branchId","35ff6f46-dcdc-4cd7-a4a5-2561eb24a897","id","3632ee8b-d3b0-4a9d-b80b-ecc4536ce5a6","sami-tech-retours",["D",1789148091907],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Scanner mobile pour valider les retours Ecotrack","imageUrl","d1a4e165-322f-4bea-a472-a3bfe065b80a","pinnedFileId","01a09189-5663-7486-bd31-6d54914632cb","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a04a3a-ab09-722d-b08e-d53e0c46d95a","tursoName","3632ee8bd3b04a9db80becc4536ce5a6","tursoHostname","3632ee8bd3b04a9db80becc4536ce5a6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789495880338],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":87,"_31":88,"_41":40,"_89":42,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":43,"_96":97},"isOwned",105,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","emller","handle","displayName","E. Müller","avatar","https://lh3.googleusercontent.com/a/ACg8ocLJnTmCFn0ipeSgvNaIC4rYdYukPA7khbo2Fye1VgNbr6ozzQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":271,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":272,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":273,"_82":274,"_84":275,"_86":24},"tree",[186,194,195,196,197,198],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198],"counts",{"_176":61,"_177":160,"_178":61,"_179":180,"_181":182},"contents",[129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":170,"_31":171,"_29":172,"_136":-5,"_39":40,"_38":160,"_137":57,"_36":173,"_13":61,"_32":174,"_34":-5,"_23":24,"_139":-5,"_26":175},{"_41":164,"_31":165,"_29":166,"_136":-5,"_39":40,"_38":160,"_137":57,"_36":167,"_13":61,"_32":20,"_34":168,"_23":24,"_139":-5,"_26":169},{"_41":157,"_31":158,"_29":159,"_136":-5,"_39":40,"_38":160,"_137":57,"_36":161,"_13":61,"_32":20,"_34":162,"_23":24,"_139":-5,"_26":163},{"_41":149,"_31":150,"_29":55,"_136":-5,"_39":40,"_38":151,"_137":24,"_36":152,"_13":153,"_32":154,"_34":155,"_23":24,"_139":43,"_26":156},{"_41":141,"_31":142,"_29":143,"_136":-5,"_39":40,"_38":144,"_137":57,"_36":145,"_13":146,"_32":33,"_34":147,"_23":24,"_139":-5,"_26":148},{"_41":135,"_31":27,"_29":30,"_136":-5,"_39":40,"_38":14,"_137":57,"_36":138,"_13":61,"_32":33,"_34":35,"_23":24,"_139":-5,"_26":140},"235ee83b-b1e6-42f2-a1e9-64ba2e305b18","parentId","latest",["D",1789150771128],"label",[27],"4f06ff76-cde3-4238-87d0-496961f33707","test-ecotrack-token.ts","2889601c-ae0d-11f1-b584-1607ee4eb77e",47,["D",1789150711844],2,"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nasync function testEcotrackToken() {\n const row = await sqlite.execute({\n sql: \"SELECT value FROM app_settings WHERE key = ? LIMIT 1\",\n args: [\"ecotrack_api_credentials\"],\n });\n\n if (!row.rows.length) {\n return { ok: false, configured: false, message: \"Aucun API Token enregistré.\" };\n }\n\n let apiToken = \"\";\n try {\n const parsed = JSON.parse(String(row.rows[0].value));\n apiToken = String(parsed.apiToken || \"\").trim();\n } catch {\n return { ok: false, configured: true, message: \"Configuration API illisible.\" };\n }\n\n if (!apiToken) {\n return { ok: false, configured: false, message: \"API Token vide.\" };\n }\n\n const url = new URL(\"https://omexpress.ecotrack.dz/api/v1/validate/token\");\n url.searchParams.set(\"api_token\", apiToken);\n\n try {\n const response = await fetch(url, {\n method: \"GET\",\n headers: {\n Accept: \"application/json\",\n Authorization: `Bearer ${apiToken}`,\n },\n });\n\n const contentType = response.headers.get(\"content-type\") || \"\";\n let body: any = null;\n if (contentType.includes(\"application/json\")) {\n try { body = await response.json(); } catch { body = null; }\n } else {\n const text = await response.text();\n body = text.slice(0, 300);\n }\n\n const valid = response.ok && Boolean(body?.success === true || body?.data?.success === true);\n\n return {\n ok: valid,\n configured: true,\n httpStatus: response.status,\n success: body?.success ?? body?.data?.success ?? null,\n message: valid ? \"API Token OM Express valide.\" : \"Le serveur OM Express n’a pas confirmé le token.\",\n responseType: contentType.split(\";\")[0] || null,\n };\n } catch (error) {\n return {\n ok: false,\n configured: true,\n message: \"Impossible de joindre l’API OM Express.\",\n error: error instanceof Error ? error.message : String(error),\n };\n }\n}\n\n\nconst result = await testEcotrackToken();\nconsole.log(\"ECOTRACK_TEST\", JSON.stringify(result));\nexport default result;\n",[142],"54afe7a5-282c-48bc-8db5-2191410e711a","index.ts",37,["D",1789150510440],9,"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 { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\nconst SESSION_COOKIE = \"sami_access\";\nconst SESSION_MS = 12 * 60 * 60 * 1000;\n\nfunction hex(bytes: Uint8Array) {\n return Array.from(bytes, (b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nfunction randomHex(size = 32) {\n return hex(crypto.getRandomValues(new Uint8Array(size)));\n}\n\nasync function sha256(value: string) {\n const data = new TextEncoder().encode(value);\n const digest = await crypto.subtle.digest(\"SHA-256\", data);\n return hex(new Uint8Array(digest));\n}\n\nfunction parseCookies(request: Request) {\n const raw = request.headers.get(\"cookie\") || \"\";\n const cookies: Record = {};\n for (const part of raw.split(\";\")) {\n const i = part.indexOf(\"=\");\n if (i <= 0) continue;\n cookies[part.slice(0, i).trim()] = decodeURIComponent(part.slice(i + 1).trim());\n }\n return cookies;\n}\n\nfunction validPattern(pattern: unknown) {\n if (!Array.isArray(pattern)) return false;\n if (pattern.length < 4 || pattern.length > 9) return false;\n if (!pattern.every((n) => Number.isInteger(n) && n >= 0 && n <= 8)) return false;\n return new Set(pattern).size === pattern.length;\n}\n\nasync function getPatternRecord() {\n const result = await sqlite.execute({\n sql: \"SELECT value FROM app_settings WHERE key = ? LIMIT 1\",\n args: [\"pattern_auth\"],\n });\n if (!result.rows.length) return null;\n try {\n return JSON.parse(String(result.rows[0].value));\n } catch {\n return null;\n }\n}\n\nasync function createSession() {\n const token = randomHex(32);\n const tokenHash = await sha256(token);\n const now = Date.now();\n const expiresAt = now + SESSION_MS;\n await sqlite.execute({\n sql: \"INSERT INTO app_sessions (token_hash, expires_at, created_at) VALUES (?, ?, ?)\",\n args: [tokenHash, expiresAt, now],\n });\n return { token, expiresAt };\n}\n\nasync function isAuthenticated(request: Request) {\n const token = parseCookies(request)[SESSION_COOKIE];\n if (!token) return false;\n const tokenHash = await sha256(token);\n const now = Date.now();\n const result = await sqlite.execute({\n sql: \"SELECT token_hash FROM app_sessions WHERE token_hash = ? AND expires_at > ? LIMIT 1\",\n args: [tokenHash, now],\n });\n return result.rows.length > 0;\n}\n\nfunction sessionCookie(token: string) {\n const maxAge = Math.floor(SESSION_MS / 1000);\n return `${SESSION_COOKIE}=${encodeURIComponent(token)}; Path=/; Max-Age=${maxAge}; HttpOnly; Secure; SameSite=Lax`;\n}\n\nfunction clearSessionCookie() {\n return `${SESSION_COOKIE}=; Path=/; Max-Age=0; HttpOnly; Secure; SameSite=Lax`;\n}\n\nasync function getEcotrackCredentials() {\n const result = await sqlite.execute({\n sql: \"SELECT value FROM app_settings WHERE key = ? LIMIT 1\",\n args: [\"ecotrack_api_credentials\"],\n });\n if (!result.rows.length) return null;\n try {\n const parsed = JSON.parse(String(result.rows[0].value));\n const apiToken = String(parsed.apiToken || \"\").trim();\n if (!apiToken) return null;\n return { apiToken };\n } catch {\n return null;\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));\napp.get(\"/health\", (c) => c.json({ ok: true }));\n\napp.get(\"/api/access/status\", async (c) => {\n const configured = Boolean(await getPatternRecord());\n const authenticated = configured ? await isAuthenticated(c.req.raw) : false;\n return c.json({ ok: true, configured, authenticated });\n});\n\napp.post(\"/api/access/setup\", async (c) => {\n if (await getPatternRecord()) {\n return c.json({ ok: false, message: \"Le schéma est déjà configuré.\" }, 409);\n }\n\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ ok: false, message: \"Requête invalide.\" }, 400);\n }\n\n if (!validPattern(body.pattern)) {\n return c.json({ ok: false, message: \"Le schéma doit relier au moins 4 points différents.\" }, 400);\n }\n\n const pattern = body.pattern.join(\"-\");\n const salt = randomHex(16);\n const hash = await sha256(`${salt}:${pattern}`);\n const value = JSON.stringify({ salt, hash });\n\n const insert = await sqlite.execute({\n sql: \"INSERT OR IGNORE INTO app_settings (key, value) VALUES (?, ?)\",\n args: [\"pattern_auth\", value],\n });\n\n if (insert.rowsAffected === 0) {\n return c.json({ ok: false, message: \"Le schéma est déjà configuré.\" }, 409);\n }\n\n const session = await createSession();\n c.header(\"Set-Cookie\", sessionCookie(session.token));\n return c.json({ ok: true, authenticated: true });\n});\n\napp.post(\"/api/access/unlock\", async (c) => {\n const record = await getPatternRecord();\n if (!record) {\n return c.json({ ok: false, code: \"NOT_CONFIGURED\", message: \"Aucun schéma configuré.\" }, 409);\n }\n\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ ok: false, message: \"Requête invalide.\" }, 400);\n }\n\n if (!validPattern(body.pattern)) {\n return c.json({ ok: false, message: \"Schéma incorrect.\" }, 401);\n }\n\n const candidate = await sha256(`${record.salt}:${body.pattern.join(\"-\")}`);\n if (candidate !== record.hash) {\n return c.json({ ok: false, message: \"Schéma incorrect.\" }, 401);\n }\n\n const session = await createSession();\n c.header(\"Set-Cookie\", sessionCookie(session.token));\n return c.json({ ok: true, authenticated: true });\n});\n\napp.post(\"/api/access/logout\", async (c) => {\n const token = parseCookies(c.req.raw)[SESSION_COOKIE];\n if (token) {\n const tokenHash = await sha256(token);\n await sqlite.execute({ sql: \"DELETE FROM app_sessions WHERE token_hash = ?\", args: [tokenHash] });\n }\n c.header(\"Set-Cookie\", clearSessionCookie());\n return c.json({ ok: true });\n});\n\napp.get(\"/api/ecotrack/settings\", async (c) => {\n if (!(await isAuthenticated(c.req.raw))) {\n return c.json({ ok: false, code: \"LOCKED\", message: \"Application verrouillée.\" }, 401);\n }\n const credentials = await getEcotrackCredentials();\n return c.json({\n ok: true,\n configured: Boolean(credentials),\n });\n});\n\napp.post(\"/api/ecotrack/settings\", async (c) => {\n if (!(await isAuthenticated(c.req.raw))) {\n return c.json({ ok: false, code: \"LOCKED\", message: \"Application verrouillée.\" }, 401);\n }\n\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ ok: false, message: \"Requête invalide.\" }, 400);\n }\n\n const apiToken = String(body.apiToken || \"\").trim();\n if (apiToken.length < 8 || apiToken.length > 512) {\n return c.json({ ok: false, message: \"API Token invalide.\" }, 400);\n }\n\n const value = JSON.stringify({ apiToken });\n await sqlite.execute({\n sql: \"INSERT INTO app_settings (key, value) VALUES (?, ?) ON CONFLICT(key) DO UPDATE SET value = excluded.value\",\n args: [\"ecotrack_api_credentials\", value],\n });\n\n return c.json({ ok: true, configured: true });\n});\n\napp.delete(\"/api/ecotrack/settings\", async (c) => {\n if (!(await isAuthenticated(c.req.raw))) {\n return c.json({ ok: false, code: \"LOCKED\", message: \"Application verrouillée.\" }, 401);\n }\n await sqlite.execute({ sql: \"DELETE FROM app_settings WHERE key = ?\", args: [\"ecotrack_api_credentials\"] });\n return c.json({ ok: true, configured: false });\n});\n\napp.get(\"/api/config\", async (c) => {\n const authenticated = await isAuthenticated(c.req.raw);\n const integrationReady = Boolean(await getEcotrackCredentials());\n return c.json({ ok: true, integrationReady, authenticated });\n});\n\napp.post(\"/api/validate\", async (c) => {\n if (!(await isAuthenticated(c.req.raw))) {\n return c.json({ ok: false, code: \"LOCKED\", message: \"Application verrouillée.\" }, 401);\n }\n\n let payload: { tracking?: unknown };\n try {\n payload = await c.req.json();\n } catch {\n return c.json({ ok: false, message: \"Requête invalide.\" }, 400);\n }\n\n const tracking = String(payload.tracking ?? \"\").trim().toUpperCase();\n console.log(\"QR_TRACKING\", tracking);\n if (!/^[A-Z0-9_-]{6,64}$/.test(tracking)) {\n return c.json({ ok: false, message: \"Numéro de tracking invalide.\" }, 400);\n }\n\n return c.json(\n {\n ok: false,\n tracking,\n code: \"INTEGRATION_PENDING\",\n message: \"Le scan fonctionne. La connexion Ecotrack sécurisée reste à brancher.\",\n },\n 503,\n );\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n",[150],"a373e6a5-2b4c-4ec4-8183-faccde24322d","README.md","01a09189-5663-7486-bd31-6b2de115ed27",1,["D",1789148091907],"# 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],"273ebb44-c518-4a33-a45f-2755ef99712f","CHANGELOG.md","01a09189-5663-7486-bd31-67a9b60befea",["D",1789148091907],"# 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 · v48