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

BATTLEFIELD X • {status}

WASD / left joystick • drag right to aim

❤️ 100 🎯 0
💰 ${money}
👤 {character}

}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nexport function App(){\n const mount=useRef(null);const[status,setStatus]=useState(\"READY\");const[money,setMoney]=useState(500);const[character,setCharacter]=useState(\"RANGER\");\n useEffect(()=>{let cleanup=()=>{};let cancelled=false;import(\"https://esm.sh/three@0.179.1\").then(THREE=>{if(cancelled||!mount.current)return;const el=mount.current;const scene=new THREE.Scene();scene.background=new THREE.Color(0x8db7d8);scene.fog=new THREE.Fog(0x8db7d8,35,115);const camera=new THREE.PerspectiveCamera(62,el.clientWidth/Math.max(1,el.clientHeight),.1,220);const renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(Math.min(devicePixelRatio,2));renderer.setSize(el.clientWidth,el.clientHeight);renderer.shadowMap.enabled=true;el.appendChild(renderer.domElement);scene.add(new THREE.HemisphereLight(0xffffff,0x405060,2.2));const sun=new THREE.DirectionalLight(0xffffff,3);sun.position.set(20,35,10);sun.castShadow=true;scene.add(sun);const ground=new THREE.Mesh(new THREE.PlaneGeometry(180,180),new THREE.MeshStandardMaterial({color:0x587b55,roughness:1}));ground.rotation.x=-Math.PI/2;ground.receiveShadow=true;scene.add(ground);scene.add(new THREE.GridHelper(180,60,0x334c35,0x456447));for(let i=0;i<32;i++){const s=2+Math.random()*4,h=1.5+Math.random()*4,b=new THREE.Mesh(new THREE.BoxGeometry(s,h,s),new THREE.MeshStandardMaterial({color:i%3===0?0x777777:0x9a7b58}));b.position.set((Math.random()-.5)*90,h/2,(Math.random()-.5)*90);b.castShadow=true;b.receiveShadow=true;scene.add(b)}\n const player=new THREE.Group();const suitColor=0x244b75;const torso=new THREE.Mesh(new THREE.BoxGeometry(.85,1.05,.5),new THREE.MeshStandardMaterial({color:suitColor}));torso.position.y=1.3;torso.castShadow=true;player.add(torso);const head=new THREE.Mesh(new THREE.SphereGeometry(.4,18,14),new THREE.MeshStandardMaterial({color:0xd8a47c}));head.position.y=2.15;head.castShadow=true;player.add(head);const helmet=new THREE.Mesh(new THREE.SphereGeometry(.46,18,10,0,Math.PI*2,0,Math.PI/2),new THREE.MeshStandardMaterial({color:0x182432,metalness:.3}));helmet.position.y=2.25;player.add(helmet);const pack=new THREE.Mesh(new THREE.BoxGeometry(.55,.7,.25),new THREE.MeshStandardMaterial({color:0x182c3d}));pack.position.set(0,1.35,.4);player.add(pack);const limbs:any[]=[];for(const x of[-.27,.27]){const leg=new THREE.Mesh(new THREE.BoxGeometry(.25,.8,.3),new THREE.MeshStandardMaterial({color:0x1b2633}));leg.position.set(x,.55,0);leg.castShadow=true;player.add(leg);limbs.push(leg)}\n const gun=new THREE.Group();gun.position.set(.58,1.42,-.55);const metal=new THREE.MeshStandardMaterial({color:0x20262d,metalness:.8,roughness:.28});const dark=new THREE.MeshStandardMaterial({color:0x11161b,metalness:.35,roughness:.5});const receiver=new THREE.Mesh(new THREE.BoxGeometry(.22,.25,.62),metal);receiver.position.z=.05;gun.add(receiver);const stock=new THREE.Mesh(new THREE.BoxGeometry(.16,.18,.42),dark);stock.position.z=.48;gun.add(stock);const mag=new THREE.Mesh(new THREE.BoxGeometry(.16,.34,.2),dark);mag.position.set(0,-.24,-.02);mag.rotation.x=-.22;gun.add(mag);const handguard=new THREE.Mesh(new THREE.CylinderGeometry(.12,.12,.58,12),dark);handguard.rotation.x=Math.PI/2;handguard.position.z=-.53;gun.add(handguard);const barrel=new THREE.Mesh(new THREE.CylinderGeometry(.055,.055,.48,12),metal);barrel.rotation.x=Math.PI/2;barrel.position.z=-1.03;gun.add(barrel);const muzzle=new THREE.Mesh(new THREE.CylinderGeometry(.085,.085,.12,12),metal);muzzle.rotation.x=Math.PI/2;muzzle.position.z=-1.32;gun.add(muzzle);const sight=new THREE.Mesh(new THREE.BoxGeometry(.09,.12,.18),dark);sight.position.set(0,.2,-.15);gun.add(sight);player.add(gun);const armR=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));armR.position.set(.43,1.35,-.05);player.add(armR);const armL=new THREE.Mesh(new THREE.CapsuleGeometry(.12,.48,6,10),new THREE.MeshStandardMaterial({color:suitColor}));armL.position.set(-.43,1.35,-.05);player.add(armL);const flash=new THREE.Mesh(new THREE.ConeGeometry(.13,.38,8),new THREE.MeshBasicMaterial({color:0xffd36a}));flash.rotation.x=-Math.PI/2;flash.position.z=-1.43;flash.visible=false;gun.add(flash);scene.add(player);player.position.set(0,0,8);\n const enemies:any[]=[];for(let i=0;i<7;i++){const e=new THREE.Group();const body=new THREE.Mesh(new THREE.BoxGeometry(.7,1,.45),new THREE.MeshStandardMaterial({color:0x8b2020}));body.position.y=1.1;e.add(body);const h=new THREE.Mesh(new THREE.SphereGeometry(.32,12,10),new THREE.MeshStandardMaterial({color:0x5b3030}));h.position.y=1.85;e.add(h);const eye=new THREE.Mesh(new THREE.BoxGeometry(.42,.08,.04),new THREE.MeshBasicMaterial({color:0xff3333}));eye.position.set(0,1.86,-.29);e.add(eye);e.position.set((Math.random()-.5)*65,0,(Math.random()-.5)*65);e.userData.hp=3;e.userData.cool=0;scene.add(e);enemies.push(e)}const coins:any[]=[];for(let i=0;i<10;i++){const c=new THREE.Mesh(new THREE.CylinderGeometry(.28,.28,.08,18),new THREE.MeshStandardMaterial({color:0xffc928,metalness:.65,roughness:.25}));c.rotation.x=Math.PI/2;c.position.set((Math.random()-.5)*75,.35,(Math.random()-.5)*75);scene.add(c);coins.push(c)}const ring=new THREE.Mesh(new THREE.RingGeometry(13,13.25,96),new THREE.MeshBasicMaterial({color:0x55aaff,side:THREE.DoubleSide,transparent:true,opacity:.7}));ring.rotation.x=-Math.PI/2;scene.add(ring);\n let keys:Record={},yaw=0,pitch=.28,last=performance.now();const shots:any[]=[];const touch={left:null as any,right:null as any};let recoil=0,walkTime=0,ammo=30,kills=0,playerHP=100;let godMode=false,rapidFire=false,speedBoost=false;let camo=\"ONYX\";const audioCtx=new AudioContext();const beep=(freq:number,dur:number=0.08)=>{try{const o=audioCtx.createOscillator(),g=audioCtx.createGain();o.frequency.value=freq;o.type=\"square\";g.gain.value=.035;o.connect(g);g.connect(audioCtx.destination);o.start();g.gain.exponentialRampToValueAtTime(.001,audioCtx.currentTime+dur);o.stop(audioCtx.currentTime+dur)}catch{}};const keydown=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=true,keyUp=(e:KeyboardEvent)=>keys[e.key.toLowerCase()]=false;addEventListener(\"keydown\",keydown);addEventListener(\"keyup\",keyUp);const fireShot=()=>{if(!rapidFire&&ammo<=0){beep(180,.15);setStatus(\"RELOAD\");return}ammo=rapidFire?ammo:ammo-1;beep(95,.055);const dir=new THREE.Vector3(0,0,-1).applyEuler(new THREE.Euler(pitch,yaw,0,\"YXZ\"));const m=new THREE.Mesh(new THREE.SphereGeometry(.08,8,8),new THREE.MeshBasicMaterial({color:0xffe28a}));m.position.copy(player.position).add(new THREE.Vector3(0,1.5,0));scene.add(m);shots.push({m,dir,t:0});recoil=.16;flash.visible=true;setTimeout(()=>flash.visible=false,65);setStatus(\"FIRING\")};\n const down=(e:PointerEvent)=>{if(e.pointerType!==\"touch\")return;const r=el.getBoundingClientRect(),x=e.clientX-r.left;if(x{if(touch.right?.id===e.pointerId){const dx=e.clientX-touch.right.x,dy=e.clientY-touch.right.y;yaw-=dx*.006;pitch=Math.max(-.45,Math.min(.8,pitch-dy*.004));touch.right.x=e.clientX;touch.right.y=e.clientY}else if(touch.left?.id===e.pointerId){touch.left.x=e.clientX;touch.left.y=e.clientY}};const up=(e:PointerEvent)=>{if(touch.left?.id===e.pointerId)touch.left=null;if(touch.right?.id===e.pointerId)touch.right=null};el.addEventListener(\"pointerdown\",down);el.addEventListener(\"pointermove\",move);el.addEventListener(\"pointerup\",up);el.addEventListener(\"pointercancel\",up);const fire=document.createElement(\"button\");fire.textContent=\"FIRE\";fire.style.cssText=\"position:absolute;right:22px;bottom:24px;width:82px;height:82px;border-radius:50%;border:2px solid white;background:#d83c3c;color:white;font-weight:900;z-index:5;touch-action:none;box-shadow:0 4px 15px #0008\";el.appendChild(fire);fire.onpointerdown=e=>{e.preventDefault();fireShot()};const onResize=()=>{camera.aspect=el.clientWidth/Math.max(1,el.clientHeight);camera.updateProjectionMatrix();renderer.setSize(el.clientWidth,el.clientHeight)};addEventListener(\"resize\",onResize);\n const animate=()=>{const now=performance.now(),dt=Math.min(.04,(now-last)/1000);last=now;const speed=(speedBoost?12:7)*dt;enemies.forEach((e:any)=>{const d=e.position.distanceTo(player.position);if(d<28){const v=player.position.clone().sub(e.position);v.y=0;if(v.length()>2)e.position.addScaledVector(v.normalize(),dt*1.8);e.lookAt(player.position.x,e.position.y+1,player.position.z);e.userData.cool-=dt;if(d<5&&e.userData.cool<=0&&!godMode){playerHP=Math.max(0,playerHP-8);beep(160,.1);e.userData.cool=1;setStatus(\"ENEMY ATTACK\")}}});const forward=new THREE.Vector3(Math.sin(yaw),0,Math.cos(yaw)),right=new THREE.Vector3(Math.cos(yaw),0,-Math.sin(yaw));if(keys.w)player.position.addScaledVector(forward,-speed);if(keys.s)player.position.addScaledVector(forward,speed);if(keys.a)player.position.addScaledVector(right,-speed);if(keys.d)player.position.addScaledVector(right,speed);let moving=!!(keys.w||keys.a||keys.s||keys.d||touch.left);if(touch.left){const dx=touch.left.x-touch.left.sx,dy=touch.left.y-touch.left.sy;const len=Math.min(70,Math.hypot(dx,dy));if(len>5){const nx=dx/Math.max(1,Math.hypot(dx,dy)),ny=dy/Math.max(1,Math.hypot(dx,dy));player.position.addScaledVector(right,nx*speed*(len/45));player.position.addScaledVector(forward,ny*speed*(len/45))}}walkTime+=dt*(moving?9:2);limbs[0].rotation.x=Math.sin(walkTime)*.38*(moving?1:.15);limbs[1].rotation.x=-Math.sin(walkTime)*.38*(moving?1:.15);armR.rotation.x=-.45+Math.sin(walkTime)*.12*(moving?1:.25);armL.rotation.x=-.55-Math.sin(walkTime)*.12*(moving?1:.25);player.position.y=Math.abs(Math.sin(walkTime))*(moving?.045:0);recoil=Math.max(0,recoil-dt*1.8);gun.rotation.x=-recoil;gun.position.z=-.55+recoil*.55;player.rotation.y=yaw;const camOffset=new THREE.Vector3(5*Math.sin(yaw),3.4+pitch*1.5,5*Math.cos(yaw));camera.position.lerp(player.position.clone().add(camOffset),.16);camera.lookAt(player.position.clone().add(new THREE.Vector3(0,1.2,0)));coins.forEach((c:any)=>{c.rotation.z+=dt*2;if(c.position.distanceTo(player.position)<1.4){scene.remove(c);coins.splice(coins.indexOf(c),1);setMoney(v=>v+100);setStatus(\"+$100 CASH\")}});for(let i=shots.length-1;i>=0;i--){const s=shots[i];s.m.position.addScaledVector(s.dir,35*dt);s.t+=dt;if(s.t>2){scene.remove(s.m);shots.splice(i,1)}}renderer.render(scene,camera);requestAnimationFrame(animate)};animate();cleanup=()=>{cancelled=true;removeEventListener(\"keydown\",keydown);removeEventListener(\"keyup\",keyUp);removeEventListener(\"resize\",onResize);el.removeEventListener(\"pointerdown\",down);el.removeEventListener(\"pointermove\",move);el.removeEventListener(\"pointerup\",up);el.removeEventListener(\"pointercancel\",up);el.innerHTML=\"\";renderer.dispose()}});return()=>cleanup()},[]);\n const [modOpen,setModOpen]=useState(false);const [camoOpen,setCamoOpen]=useState(false);const mods=()=>{godMode=!godMode;rapidFire=!rapidFire;speedBoost=!speedBoost;setStatus(\"MODS \"+(godMode?\"ON\":\"OFF\"));beep(520,.08)};const applyCamo=(name:string)=>{camo=name;const c=name===\"GOLD\"?0xffc928:name===\"RED\"?0xb51f2a:name===\"ICE\"?0x9eeaff:0x20262d;gun.traverse((o:any)=>{if(o.material&&o.material.color)o.material.color.setHex(c)});setCamoOpen(false);setStatus(name+\" CAMO EQUIPPED\")};const buyCharacter=()=>{if(money>=1000){setMoney(m=>m-1000);setCharacter(character===\"RANGER\"?\"SHADOW\":\"RANGER\");setStatus(\"CHARACTER UNLOCKED\")}else setStatus(\"NEED $1000\")};return

BATTLEFIELD X • {status}

WASD / left joystick • drag right to aim

❤️ 100 🎯 0
💰 ${money}
👤 {character}

}\n","createdAt",["D",1788939519110],"branchVersion","branchId","8e657c2b-ea2d-41e9-8daf-571bb7efa99f","id","7ac2b1fc-3bf6-4590-a8bf-e95239aed13f","mobile-3d-shooter",["D",1788938999309],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","3D mobile battle royale prototype","imageUrl","151b79b1-d995-46cb-bc68-140038ba3959","pinnedFileId","01a08512-d669-73d9-b964-94c2c90fe5fd","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a084fa-dc07-75ed-8eaa-46f0803b8997","tursoName","7ac2b1fc3bf64590a8bfe95239aed13f","tursoHostname","7ac2b1fc3bf64590a8bfe95239aed13f-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789459281818],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":56,"_105":106,"_107":25},"branch",{"_13":14,"_32":90,"_44":43,"_91":45,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":46,"_98":99},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","raziels","handle","displayName","Raziel S","avatar","https://lh3.googleusercontent.com/a/ACg8ocKcQ2GwxzpzNB1V1fPW0uE-PdDqCDeRsoQsatc4PVytFe9O5Q=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":235,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":236,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":237,"_85":238,"_87":239,"_89":25},"tree",[173,180,181,182],"files",[173,174,175,176,177,178,179,180,181,182],"counts",{"_163":64,"_164":138,"_165":64,"_166":167,"_168":169},"contents",[131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":157,"_32":158,"_30":159,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":160,"_13":64,"_34":161,"_36":-5,"_24":25,"_143":-5,"_27":162},{"_44":151,"_32":152,"_30":153,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":154,"_13":64,"_34":20,"_36":155,"_24":25,"_143":-5,"_27":156},{"_44":145,"_32":146,"_30":147,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":148,"_13":64,"_34":20,"_36":149,"_24":25,"_143":-5,"_27":150},{"_44":135,"_32":136,"_30":58,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":140,"_13":64,"_34":141,"_36":142,"_24":25,"_143":-5,"_27":144},"fab50b79-6c5b-489c-a60d-157d0b59a8e1","index.ts","parentId",1,"latest",["D",1788938999309],"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",[136],"c50af9ab-0be7-4ee1-87b9-bc6a9a4fdedc","README.md","01a08512-d669-73d9-b964-923e494004ef",["D",1788938999309],"# 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",[146],"617d9f96-8e2e-4f95-a1ff-40e372d65475","CHANGELOG.md","01a08512-d669-73d9-b964-8fce6fcdbc25",["D",1788938999309],"# 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 · v13