`, 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",{"_238":239,"_240":241},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":58,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_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":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","01a080ae-13c1-76f8-bf82-111d1bc14424","name","fileType","http","content","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","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","createdAt",["D",1788865329949],"branchVersion","branchId","450da61b-2536-4be1-a391-9ccc0f0c6fbe","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","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",1789476648181],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","omriluz","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycWxkOWxiOE00SkVtZENmRWM4YWxLWTRVUFMifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":233,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":234,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":235,"_83":236,"_85":237,"_87":25},"tree",[168,175,176,177],"files",[168,169,170,171,172,173,174,175,176,177],"counts",{"_158":62,"_159":14,"_160":62,"_161":162,"_163":164},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":152,"_32":153,"_30":154,"_134":-5,"_41":42,"_40":137,"_135":58,"_38":155,"_13":62,"_33":156,"_35":-5,"_24":25,"_138":-5,"_27":157},{"_43":146,"_32":147,"_30":148,"_134":-5,"_41":42,"_40":137,"_135":58,"_38":149,"_13":62,"_33":20,"_35":150,"_24":25,"_138":-5,"_27":151},{"_43":140,"_32":141,"_30":142,"_134":-5,"_41":42,"_40":137,"_135":25,"_38":143,"_13":62,"_33":20,"_35":144,"_24":25,"_138":-5,"_27":145},{"_43":133,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_135":25,"_38":136,"_13":137,"_33":34,"_35":37,"_24":25,"_138":-5,"_27":139},"27737467-279f-4d5b-a79f-c2b6b1f109ea","parentId","latest",["D",1788865329949],1,"label",[28],"5fa006fa-6e71-4b40-93fb-cc3aaddbf9f1","README.md","01a080ae-13c1-76f8-bf82-0e9dc0d3c748",["D",1788865286969],"# 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",[141],"1b3c9e78-328a-406a-809b-0e9dbdae1c9c","CHANGELOG.md","01a080ae-13c1-76f8-bf82-0a556f143389",["D",1788865286969],"# 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