`, 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",{"_255":256,"_257":258},"routes/_app.x.$handle.$name",{"_101":100,"_31":44,"_109":89,"_26":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":123,"_124":24,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/domain.ts","latestPath","fileId","f68654a4-ab77-11f1-9748-1607ee4eb77e","name","domain.ts","fileType","script","content","export const SHAPES = ['Round', 'Pear', 'Oval', 'Cushion', 'Emerald', 'Princess', 'Marquise'] as const;\nexport const COLORS = ['D', 'E', 'F', 'G', 'H', 'I', 'J'] as const;\nexport const CLARITIES = ['IF', 'VVS1', 'VVS2', 'VS1', 'VS2', 'SI1', 'SI2'] as const;\nexport type Offer = {\n id: string; supplier: string; shape: string; carat: string; color: string;\n clarity: string; askingPrice: string; example: boolean;\n};\nexport type Diamond = {shape: string; carat: number; color: string; clarity: string; askingPrice: number; supplier: string};\nexport type Price = {\n caratPrice: number; source: 'live' | 'demo'; listShape: 'Round' | 'Pear';\n proxy: boolean; priceDate: string | null; fetchedAt: string; cached: boolean;\n};\nexport type Analysis = {\n diamond: Diamond; price: Price; rapTotal: number; askingPerCarat: number;\n difference: number; percent: number; direction: 'above' | 'below' | 'at';\n};\nexport type Connection = {configured: boolean; authorized: boolean; signedIn: boolean; mode: 'live' | 'demo'};\nexport type RowState = {fingerprint: string; loading: boolean; data?: Analysis; error?: string};\nexport const EXAMPLES: Offer[] = [\n {id:'sample-1', supplier:'Ramesh', shape:'Round', carat:'1.08', color:'G', clarity:'VS2', askingPrice:'5400', example:true},\n {id:'sample-2', supplier:'Patel', shape:'Round', carat:'1.01', color:'H', clarity:'SI1', askingPrice:'4200', example:true},\n {id:'sample-3', supplier:'Kunal', shape:'Pear', carat:'1.25', color:'G', clarity:'VS2', askingPrice:'4300', example:true},\n {id:'sample-4', supplier:'Josh', shape:'Round', carat:'0.72', color:'F', clarity:'VS1', askingPrice:'3250', example:true},\n {id:'sample-5', supplier:'Mehta', shape:'Oval', carat:'1.55', color:'H', clarity:'SI1', askingPrice:'5100', example:true},\n];\nexport const fingerprint = (o: Offer) => JSON.stringify([o.shape,o.carat,o.color,o.clarity,o.askingPrice,o.supplier]);\nexport function validate(input: unknown): Diamond {\n if (!input || typeof input !== 'object' || Array.isArray(input)) throw new Error('Enter a diamond offer.');\n const r = input as Record;\n const shape = String(r.shape || '').trim();\n const color = String(r.color || '').toUpperCase().trim();\n const clarity = String(r.clarity || '').toUpperCase().trim();\n if (!SHAPES.includes(shape as typeof SHAPES[number])) throw new Error('Choose one of the supported shapes.');\n if (!COLORS.includes(color as typeof COLORS[number])) throw new Error('Choose a color from D to J.');\n if (!CLARITIES.includes(clarity as typeof CLARITIES[number])) throw new Error('Choose a supported clarity grade.');\n const number = (value: unknown) => (typeof value === 'number' || typeof value === 'string' && value.trim() !== '') ? Number(value) : NaN;\n const carat = number(r.carat), askingPrice = number(r.askingPrice);\n if (!Number.isFinite(carat) || carat < .3 || carat > 5.99) throw new Error('Carat weight must be between 0.30 and 5.99 for this MVP.');\n if (Math.abs(carat * 100 - Math.round(carat * 100)) > .000001) throw new Error('Use at most two decimal places for carat weight.');\n if (!Number.isFinite(askingPrice) || askingPrice <= 0 || askingPrice > 10_000_000) throw new Error('Enter a total asking price greater than $0, up to $10,000,000.');\n if (Math.abs(askingPrice * 100 - Math.round(askingPrice * 100)) > .000001) throw new Error('Use at most two decimal places for the asking price.');\n const supplier = String(r.supplier || '').trim();\n if (supplier.length > 80) throw new Error('Supplier name must be 80 characters or less.');\n return {shape, color, clarity, carat, askingPrice, supplier};\n}\nexport function calculate(diamond: Diamond, price: Price): Analysis {\n if (!Number.isFinite(price.caratPrice) || price.caratPrice <= 0) throw new Error('No valid benchmark was returned.');\n const round = (n: number) => Math.round((n + Number.EPSILON) * 100) / 100;\n const rapTotal = round(price.caratPrice * diamond.carat);\n const difference = round(diamond.askingPrice - rapTotal);\n return {diamond, price, rapTotal, difference, askingPerCarat: round(diamond.askingPrice / diamond.carat),\n percent: (diamond.askingPrice / rapTotal - 1) * 100,\n direction: difference === 0 ? 'at' : difference > 0 ? 'above' : 'below'};\n}\nexport function demoPrice(d: Diamond): Price {\n // Synthetic demonstration formula, NOT a copy of any Rapaport list.\n const size = d.carat >= 2 ? 1.45 : d.carat >= 1.5 ? 1.25 : d.carat >= 1 ? 1 : d.carat >= .7 ? .82 : .68;\n const cf: Record = {D:1.18,E:1.12,F:1.07,G:1,H:.92,I:.84,J:.76};\n const qf: Record = {IF:1.3,VVS1:1.22,VVS2:1.16,VS1:1.08,VS2:1,SI1:.88,SI2:.76};\n return {caratPrice: Math.round(8000 * size * cf[d.color] * qf[d.clarity] * (d.shape === 'Round' ? 1 : .9) / 10) * 10,\n source:'demo', listShape:d.shape === 'Round' ? 'Round' : 'Pear', proxy: !['Round','Pear'].includes(d.shape), priceDate:null,\n fetchedAt:new Date().toISOString(), cached:false};\n}\nexport const usd = (value: number, cents = false) => new Intl.NumberFormat('en-US', {style:'currency',currency:'USD',maximumFractionDigits:cents ? 2 : 0, minimumFractionDigits:cents ? 2 : 0}).format(value);\nexport const displayPercent = (value: number) => Math.abs(value) > 0 && Math.abs(value) < .05 ? '<0.1' : Math.abs(value).toFixed(1);\nexport function formatDate(value: string | null): string {\n if (!value) return 'Date not provided';\n const date = new Date(value);\n return Number.isNaN(date.getTime()) ? 'Date not provided' : date.toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric',timeZone:'UTC'});\n}\nexport function isOld(price: Price) { return price.source === 'live' && price.priceDate !== null && Date.now() - new Date(price.priceDate).getTime() > 8 * 86400000; }\n","createdAt",["D",1788866715034],"branchVersion","branchId","9f23ebd9-83c3-4cee-95f6-8ff2be5419d0","id","8b68b606-e895-47b1-bdcb-922bde243fd7","diamond-dealdesk",["D",1788865286969],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Diamond deal analysis MVP with Rapaport pricing","imageUrl","f5be24e4-c798-4816-91e5-037b60b986f5","pinnedFileId","01a080ae-13c1-76f8-bf82-111d1bc14424","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","7f67379d-2d38-49bd-81ac-2c7f92a739e2","tursoName","8b68b606e89547b1bdcb922bde243fd7","tursoHostname","8b68b606e89547b1bdcb922bde243fd7-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789563628475],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":54,"_105":106,"_107":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":92,"_93":94,"_95":49,"_96":43,"_97":64,"_98":44,"_99":100},"isOwned",17,"professional-offer-desk","projectId","forkedBranchId","450da61b-2536-4be1-a391-9ccc0f0c6fbe","forkedBranchVersion",7,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","omriluz","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycWxkOWxiOE00SkVtZENmRWM4YWxLWTRVUFMifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":250,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":251,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":252,"_83":253,"_85":254,"_87":24},"tree",[181,189,190,191],"files",[181,182,183,184,185,186,187,188,189,190,191],"counts",{"_171":62,"_172":14,"_173":62,"_174":175,"_176":177},"contents",[138,139,140,141],"upstreamProject","upstreamBranch",{"_42":92,"_37":132,"_133":134,"_31":135,"_90":43,"_13":94,"_91":-5,"_93":-5,"_136":137,"_46":-5,"_87":24,"_48":49,"_99":100,"_63":64,"_98":44},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1788865286969],"updatedAt",["D",1788867523446],"main","lockfileKey","1788867523579-esm.town_v_omriluz_diamond-dealdesk@7-main",{"_42":165,"_31":166,"_29":167,"_145":-5,"_40":41,"_39":146,"_147":58,"_37":168,"_13":62,"_33":169,"_35":-5,"_23":24,"_151":-5,"_26":170},{"_42":159,"_31":160,"_29":161,"_145":-5,"_40":41,"_39":146,"_147":58,"_37":162,"_13":62,"_33":20,"_35":163,"_23":24,"_151":-5,"_26":164},{"_42":153,"_31":154,"_29":155,"_145":-5,"_40":41,"_39":146,"_147":24,"_37":156,"_13":62,"_33":20,"_35":157,"_23":24,"_151":-5,"_26":158},{"_42":142,"_31":143,"_29":144,"_145":-5,"_40":41,"_39":146,"_147":24,"_37":148,"_13":62,"_33":149,"_35":150,"_23":24,"_151":-5,"_26":152},"10bac18b-81f6-44e8-bb64-08f4fd7d3a5b","index.ts","01a080bd-0b74-77b0-b17f-f048bc3ea537","parentId",1,"latest",["D",1788866268022],"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\nconst buyers = [\n { name: \"David\", market: \"USA\", shapes: [\"Round\"], minCarat: 0.9, maxCarat: 1.5, colors: [\"F\",\"G\",\"H\",\"I\"], clarities: [\"VS1\",\"VS2\",\"SI1\"], targetDiscount: -30 },\n { name: \"Maya\", market: \"USA\", shapes: [\"Round\"], minCarat: 0.5, maxCarat: 1.1, colors: [\"D\",\"E\",\"F\",\"G\"], clarities: [\"VVS2\",\"VS1\",\"VS2\"], targetDiscount: -27 },\n { name: \"Rohan\", market: \"India\", shapes: [\"Pear\",\"Oval\",\"Cushion\",\"Emerald\",\"Princess\",\"Marquise\"], minCarat: 1, maxCarat: 2.5, colors: [\"G\",\"H\",\"I\",\"J\"], clarities: [\"VS2\",\"SI1\",\"SI2\"], targetDiscount: -37 },\n];\n\nlet cachedToken: string | null = null;\nlet tokenExpiresAt = 0;\nconst money = (n:number) => Math.round(n * 100) / 100;\n\nfunction normalize(input:any) {\n const d = { shape:String(input.shape||\"\"), carat:Number(input.carat), color:String(input.color||\"\").toUpperCase(), clarity:String(input.clarity||\"\").toUpperCase(), askingPrice:Number(input.askingPrice), supplier:String(input.supplier||\"\") };\n if (!d.shape || !d.carat || !d.color || !d.clarity || !d.askingPrice) throw new Error(\"Shape, carat, color, clarity and asking price are required.\");\n return d;\n}\n\nasync function token() {\n if (cachedToken && Date.now() < tokenExpiresAt - 60000) return cachedToken;\n const clientId = Deno.env.get(\"RAPAPORT_CLIENT_ID\");\n const clientSecret = Deno.env.get(\"RAPAPORT_CLIENT_SECRET\");\n if (!clientId || !clientSecret) throw new Error(\"Rapaport credentials are not configured.\");\n const r = await fetch(\"https://authztoken.api.rapaport.com/api/get\", { method:\"POST\", headers:{\"content-type\":\"application/json\"}, body:JSON.stringify({client_id:clientId, client_secret:clientSecret}) });\n if (!r.ok) throw new Error(`Rapaport authentication failed (${r.status}).`);\n const p:any = await r.json();\n cachedToken = p.access_token || p.token;\n tokenExpiresAt = Date.now() + Number(p.expires_in || 28800) * 1000;\n if (!cachedToken) throw new Error(\"Rapaport returned no access token.\");\n return cachedToken;\n}\n\nasync function livePrice(d:any) {\n const t = await token();\n const apiShape = d.shape === \"Round\" ? \"Round\" : \"Pear\";\n const url = new URL(\"https://technet.rapnetapis.com/pricelist/api/Prices\");\n url.searchParams.set(\"shape\", apiShape); url.searchParams.set(\"size\", String(d.carat)); url.searchParams.set(\"color\", d.color.toLowerCase()); url.searchParams.set(\"clarity\", d.clarity.toLowerCase());\n const r = await fetch(url, { headers:{authorization:`Bearer ${t}`, accept:\"application/json\"} });\n if (!r.ok) throw new Error(`Rapaport price lookup failed (${r.status}).`);\n const p:any = await r.json(); const item = Array.isArray(p) ? p[0] : p;\n const caratPrice = Number(item?.caratprice ?? item?.caratPrice);\n if (!caratPrice) throw new Error(\"No Rapaport price returned for this stone.\");\n return { caratPrice, source:\"Rapaport live API\", note:d.shape === \"Round\" ? null : `${d.shape} uses the Pear list as the fancy-shape benchmark.` };\n}\n\nfunction demoPrice(d:any) {\n const size = d.carat>=2?1.45:d.carat>=1.5?1.25:d.carat>=1?1:d.carat>=0.7?.82:.68;\n const color:any={D:1.18,E:1.12,F:1.07,G:1,H:.92,I:.84,J:.76}; const clarity:any={IF:1.3,VVS1:1.22,VVS2:1.16,VS1:1.08,VS2:1,SI1:.88,SI2:.76};\n return { caratPrice:Math.round(8000*size*(color[d.color]||.7)*(clarity[d.clarity]||.68)*(d.shape===\"Round\"?1:.9)/10)*10, source:\"Demo pricing\", note:null };\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(\"/api/status\", c => { const configured=!!(Deno.env.get(\"RAPAPORT_CLIENT_ID\")&&Deno.env.get(\"RAPAPORT_CLIENT_SECRET\")); return c.json({configured,demoMode:!configured}); });\napp.post(\"/api/analyze\", async c => {\n try {\n const d = normalize(await c.req.json());\n const configured=!!(Deno.env.get(\"RAPAPORT_CLIENT_ID\")&&Deno.env.get(\"RAPAPORT_CLIENT_SECRET\"));\n const rap = configured ? await livePrice(d) : demoPrice(d);\n const rapTotal = rap.caratPrice*d.carat;\n const discount=(d.askingPrice/rapTotal-1)*100;\n const matches=buyers.filter(b=>b.shapes.includes(d.shape)&&d.carat>=b.minCarat&&d.carat<=b.maxCarat&&b.colors.includes(d.color)&&b.clarities.includes(d.clarity)).map(b=>({...b,estimatedSellPrice:money(rapTotal*(1+b.targetDiscount/100)),estimatedGrossProfit:money(rapTotal*(1+b.targetDiscount/100)-d.askingPrice)})).sort((a,b)=>b.estimatedGrossProfit-a.estimatedGrossProfit);\n const best=matches[0]||null; const profit=best?.estimatedGrossProfit||0; const margin=profit/d.askingPrice;\n const opportunity = profit>=500||margin>=.08?\"Strong opportunity\":profit>=150||margin>=.03?\"Worth a look\":profit>0?\"Thin margin\":\"Does not look attractive\";\n return c.json({diamond:d,pricing:{rapCaratPrice:money(rap.caratPrice),rapTotal:money(rapTotal),askingDiscount:money(discount),source:rap.source,benchmarkNote:rap.note},bestBuyer:best,matches,opportunity,demoMode:!configured});\n } catch (e) { return c.json({error:e instanceof Error?e.message:\"Analysis failed\"},400); }\n});\n\napp.onError(err => Promise.reject(err));\nexport default app.fetch;\n","label",[143],"08619fda-eb5b-41bc-a380-5dcc70a0f1e8","README.md","01a080bd-0b74-77b0-b17f-ec8772db6065",["D",1788866268022],"# 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",[154],"d774b705-1418-4fb5-b32f-7eb0a4947800","CHANGELOG.md","01a080bd-0b74-77b0-b17f-eb83175e9b29",["D",1788866268022],"# 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 · v2