`, 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",{"_403":404,"_405":406},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"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",83,"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","01a027f5-8329-75bb-a811-b31cd1dc4512","name","fileType","http","content","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite as licenseDb } from \"https://esm.town/v/std/sqlite/global.ts\";\nimport { sqlite as appDb } 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();\nawait appDb.execute(`CREATE TABLE IF NOT EXISTS tc_app_store (\n device_id TEXT NOT NULL,\n collection TEXT NOT NULL CHECK (collection IN ('products','sales','clients','suppliers','finance','business')),\n payload TEXT NOT NULL,\n updated_at TEXT NOT NULL,\n PRIMARY KEY (device_id, collection)\n)`);\nawait appDb.execute(`CREATE TABLE IF NOT EXISTS tc_app_access (\n device_id TEXT PRIMARY KEY,\n secret_hash TEXT NOT NULL,\n created_at TEXT NOT NULL,\n last_access_at TEXT NOT NULL\n)`);\nconst secretHash=async(value:string)=>Array.from(new Uint8Array(await crypto.subtle.digest(\"SHA-256\",new TextEncoder().encode(value)))).map(x=>x.toString(16).padStart(2,\"0\")).join(\"\");\nconst authorized=async(c:any,device:string)=>{\n const header=c.req.header(\"Authorization\")||\"\",token=header.startsWith(\"Bearer \")?header.slice(7):\"\";\n if(!device||token.length<40)return false;\n const q=await appDb.execute({sql:\"SELECT secret_hash FROM tc_app_access WHERE device_id=?\",args:[device]});\n if(!q.rows.length||q.rows[0].secret_hash!==await secretHash(token))return false;\n await appDb.execute({sql:\"UPDATE tc_app_access SET last_access_at=? WHERE device_id=?\",args:[new Date().toISOString(),device]});\n return true;\n};\nawait licenseDb.execute(`CREATE TABLE IF NOT EXISTS tc_licenses (\n license_key TEXT PRIMARY KEY, plan TEXT NOT NULL, customer TEXT, created_at TEXT NOT NULL,\n activated_at TEXT, expires_at TEXT, device_id TEXT, active INTEGER NOT NULL DEFAULT 1\n)`);\nawait licenseDb.execute(`CREATE TABLE IF NOT EXISTS tc_trials (\n device_id TEXT PRIMARY KEY, started_at TEXT NOT NULL, expires_at TEXT NOT NULL\n)`);\n\nconst daysFor=(plan:string)=>({semanal:7,mensual:30,semestral:182,anual:365}[plan]||30);\nconst state=async(device:string)=>{\n if(!device) return {active:false,status:\"device_required\"};\n const l=await licenseDb.execute({sql:\"SELECT license_key,plan,customer,expires_at FROM tc_licenses WHERE device_id=? AND active=1 AND expires_at>?\",args:[device,new Date().toISOString()]});\n if(l.rows.length) return {active:true,status:\"licensed\",...l.rows[0]};\n let t=await licenseDb.execute({sql:\"SELECT * FROM tc_trials WHERE device_id=?\",args:[device]});\n if(!t.rows.length){\n const now=new Date(),expires=new Date(now.getTime()+5*86400000);\n await licenseDb.execute({sql:\"INSERT INTO tc_trials(device_id,started_at,expires_at) VALUES(?,?,?)\",args:[device,now.toISOString(),expires.toISOString()]});\n t=await licenseDb.execute({sql:\"SELECT * FROM tc_trials WHERE device_id=?\",args:[device]});\n }\n const trial=t.rows[0] as any, active=new Date(trial.expires_at)>new Date();\n return {active,status:active?\"trial\":\"expired\",expires_at:trial.expires_at,days_left:Math.max(0,Math.ceil((new Date(trial.expires_at).getTime()-Date.now())/86400000))};\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/license/status\",async c=>c.json(await state(c.req.query(\"device\")||\"\")));\napp.post(\"/api/license/activate\",async c=>{\n const {key,device}=await c.req.json();\n if(!key||!device) return c.json({ok:false,error:\"Datos incompletos\"},400);\n const q=await licenseDb.execute({sql:\"SELECT * FROM tc_licenses WHERE license_key=? AND active=1\",args:[String(key).trim().toUpperCase()]});\n if(!q.rows.length) return c.json({ok:false,error:\"Licencia inválida\"},404);\n const lic=q.rows[0] as any;\n if(lic.device_id&&lic.device_id!==device) return c.json({ok:false,error:\"Esta licencia ya está vinculada a otro equipo\"},409);\n const activated=lic.activated_at||new Date().toISOString();\n const expires=lic.expires_at||new Date(new Date(activated).getTime()+daysFor(lic.plan)*86400000).toISOString();\n if(new Date(expires)<=new Date()) return c.json({ok:false,error:\"Licencia vencida\"},410);\n await licenseDb.execute({sql:\"UPDATE tc_licenses SET device_id=?,activated_at=?,expires_at=? WHERE license_key=?\",args:[device,activated,expires,lic.license_key]});\n return c.json({ok:true,license:await state(device)});\n});\nconst collections=new Set([\"products\",\"sales\",\"clients\",\"suppliers\",\"finance\",\"business\"]);\napp.post(\"/api/store/register\",async c=>{\n const body=await c.req.json(),device=String(body.device||\"\");\n if(!device)return c.json({error:\"Equipo requerido\"},400);\n const access=await state(device);if(!access.active)return c.json({error:\"Licencia o prueba vencida\"},403);\n const exists=await appDb.execute({sql:\"SELECT device_id FROM tc_app_access WHERE device_id=?\",args:[device]});\n if(exists.rows.length)return c.json({error:\"La base ya está protegida en este equipo\"},409);\n const token=crypto.randomUUID().replaceAll(\"-\",\"\")+crypto.randomUUID().replaceAll(\"-\",\"\");\n const now=new Date().toISOString();\n await appDb.execute({sql:\"INSERT INTO tc_app_access(device_id,secret_hash,created_at,last_access_at) VALUES(?,?,?,?)\",args:[device,await secretHash(token),now,now]});\n return c.json({ok:true,token});\n});\napp.get(\"/api/store/:collection\",async c=>{\n const collection=c.req.param(\"collection\"),device=c.req.query(\"device\")||\"\";\n if(!collections.has(collection))return c.json({error:\"Colección inválida\"},400);\n if(!await authorized(c,device))return c.json({error:\"Acceso no autorizado\"},401);\n const q=await appDb.execute({sql:\"SELECT payload,updated_at FROM tc_app_store WHERE device_id=? AND collection=?\",args:[device,collection]});\n if(!q.rows.length)return c.json({exists:false,data:null});\n const row=q.rows[0] as any;\n try{return c.json({exists:true,data:JSON.parse(row.payload),updated_at:row.updated_at})}catch{return c.json({exists:false,data:null})}\n});\napp.put(\"/api/store/:collection\",async c=>{\n const collection=c.req.param(\"collection\"),body=await c.req.json(),device=String(body.device||\"\");\n if(!collections.has(collection))return c.json({error:\"Colección inválida\"},400);\n if(!await authorized(c,device))return c.json({error:\"Acceso no autorizado\"},401);\n const payload=JSON.stringify(body.data??(collection===\"business\"?{}:[]));\n if(payload.length>6000000)return c.json({error:\"Datos demasiado grandes\"},413);\n const updated=new Date().toISOString();\n await appDb.execute({sql:\"INSERT INTO tc_app_store(device_id,collection,payload,updated_at) VALUES(?,?,?,?) ON CONFLICT(device_id,collection) DO UPDATE SET payload=excluded.payload,updated_at=excluded.updated_at\",args:[device,collection,payload,updated]});\n return c.json({ok:true,updated_at:updated});\n});\napp.get(\"/api/database/status\",async c=>{\n const device=c.req.query(\"device\")||\"\";\n if(!await authorized(c,device))return c.json({connected:false,error:\"Acceso no autorizado\"},401);\n const q=await appDb.execute({sql:\"SELECT collection,updated_at FROM tc_app_store WHERE device_id=? ORDER BY collection\",args:[device]});\n return c.json({connected:true,collections:q.rows});\n});\n\napp.get(\"/api/plans\",c=>c.json([\n {id:\"semanal\",name:\"Semanal\",days:7},{id:\"mensual\",name:\"Mensual\",days:30},\n {id:\"semestral\",name:\"Semestral\",days:182},{id:\"anual\",name:\"Anual\",days:365}\n]));\napp.onError(err=>Promise.reject(err));\nexport default app.fetch;","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite as licenseDb } from \"https://esm.town/v/std/sqlite/global.ts\";\nimport { sqlite as appDb } 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();\nawait appDb.execute(`CREATE TABLE IF NOT EXISTS tc_app_store (\n device_id TEXT NOT NULL,\n collection TEXT NOT NULL CHECK (collection IN ('products','sales','clients','suppliers','finance','business')),\n payload TEXT NOT NULL,\n updated_at TEXT NOT NULL,\n PRIMARY KEY (device_id, collection)\n)`);\nawait appDb.execute(`CREATE TABLE IF NOT EXISTS tc_app_access (\n device_id TEXT PRIMARY KEY,\n secret_hash TEXT NOT NULL,\n created_at TEXT NOT NULL,\n last_access_at TEXT NOT NULL\n)`);\nconst secretHash=async(value:string)=>Array.from(new Uint8Array(await crypto.subtle.digest(\"SHA-256\",new TextEncoder().encode(value)))).map(x=>x.toString(16).padStart(2,\"0\")).join(\"\");\nconst authorized=async(c:any,device:string)=>{\n const header=c.req.header(\"Authorization\")||\"\",token=header.startsWith(\"Bearer \")?header.slice(7):\"\";\n if(!device||token.length<40)return false;\n const q=await appDb.execute({sql:\"SELECT secret_hash FROM tc_app_access WHERE device_id=?\",args:[device]});\n if(!q.rows.length||q.rows[0].secret_hash!==await secretHash(token))return false;\n await appDb.execute({sql:\"UPDATE tc_app_access SET last_access_at=? WHERE device_id=?\",args:[new Date().toISOString(),device]});\n return true;\n};\nawait licenseDb.execute(`CREATE TABLE IF NOT EXISTS tc_licenses (\n license_key TEXT PRIMARY KEY, plan TEXT NOT NULL, customer TEXT, created_at TEXT NOT NULL,\n activated_at TEXT, expires_at TEXT, device_id TEXT, active INTEGER NOT NULL DEFAULT 1\n)`);\nawait licenseDb.execute(`CREATE TABLE IF NOT EXISTS tc_trials (\n device_id TEXT PRIMARY KEY, started_at TEXT NOT NULL, expires_at TEXT NOT NULL\n)`);\n\nconst daysFor=(plan:string)=>({semanal:7,mensual:30,semestral:182,anual:365}[plan]||30);\nconst state=async(device:string)=>{\n if(!device) return {active:false,status:\"device_required\"};\n const l=await licenseDb.execute({sql:\"SELECT license_key,plan,customer,expires_at FROM tc_licenses WHERE device_id=? AND active=1 AND expires_at>?\",args:[device,new Date().toISOString()]});\n if(l.rows.length) return {active:true,status:\"licensed\",...l.rows[0]};\n let t=await licenseDb.execute({sql:\"SELECT * FROM tc_trials WHERE device_id=?\",args:[device]});\n if(!t.rows.length){\n const now=new Date(),expires=new Date(now.getTime()+5*86400000);\n await licenseDb.execute({sql:\"INSERT INTO tc_trials(device_id,started_at,expires_at) VALUES(?,?,?)\",args:[device,now.toISOString(),expires.toISOString()]});\n t=await licenseDb.execute({sql:\"SELECT * FROM tc_trials WHERE device_id=?\",args:[device]});\n }\n const trial=t.rows[0] as any, active=new Date(trial.expires_at)>new Date();\n return {active,status:active?\"trial\":\"expired\",expires_at:trial.expires_at,days_left:Math.max(0,Math.ceil((new Date(trial.expires_at).getTime()-Date.now())/86400000))};\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/license/status\",async c=>c.json(await state(c.req.query(\"device\")||\"\")));\napp.post(\"/api/license/activate\",async c=>{\n const {key,device}=await c.req.json();\n if(!key||!device) return c.json({ok:false,error:\"Datos incompletos\"},400);\n const q=await licenseDb.execute({sql:\"SELECT * FROM tc_licenses WHERE license_key=? AND active=1\",args:[String(key).trim().toUpperCase()]});\n if(!q.rows.length) return c.json({ok:false,error:\"Licencia inválida\"},404);\n const lic=q.rows[0] as any;\n if(lic.device_id&&lic.device_id!==device) return c.json({ok:false,error:\"Esta licencia ya está vinculada a otro equipo\"},409);\n const activated=lic.activated_at||new Date().toISOString();\n const expires=lic.expires_at||new Date(new Date(activated).getTime()+daysFor(lic.plan)*86400000).toISOString();\n if(new Date(expires)<=new Date()) return c.json({ok:false,error:\"Licencia vencida\"},410);\n await licenseDb.execute({sql:\"UPDATE tc_licenses SET device_id=?,activated_at=?,expires_at=? WHERE license_key=?\",args:[device,activated,expires,lic.license_key]});\n return c.json({ok:true,license:await state(device)});\n});\nconst collections=new Set([\"products\",\"sales\",\"clients\",\"suppliers\",\"finance\",\"business\"]);\napp.post(\"/api/store/register\",async c=>{\n const body=await c.req.json(),device=String(body.device||\"\");\n if(!device)return c.json({error:\"Equipo requerido\"},400);\n const access=await state(device);if(!access.active)return c.json({error:\"Licencia o prueba vencida\"},403);\n const exists=await appDb.execute({sql:\"SELECT device_id FROM tc_app_access WHERE device_id=?\",args:[device]});\n if(exists.rows.length)return c.json({error:\"La base ya está protegida en este equipo\"},409);\n const token=crypto.randomUUID().replaceAll(\"-\",\"\")+crypto.randomUUID().replaceAll(\"-\",\"\");\n const now=new Date().toISOString();\n await appDb.execute({sql:\"INSERT INTO tc_app_access(device_id,secret_hash,created_at,last_access_at) VALUES(?,?,?,?)\",args:[device,await secretHash(token),now,now]});\n await appDb.batch(Array.from(collections).map(collection=>({sql:\"INSERT INTO tc_app_store(device_id,collection,payload,updated_at) VALUES(?,?,?,?) ON CONFLICT(device_id,collection) DO NOTHING\",args:[device,collection,collection===\"business\"?JSON.stringify({name:\"Mi Tienda\",phone:\"\",rfc:\"\",printer:\"55\",logo:\"\"}):\"[]\",now]})));\n return c.json({ok:true,token});\n});\napp.get(\"/api/store/:collection\",async c=>{\n const collection=c.req.param(\"collection\"),device=c.req.query(\"device\")||\"\";\n if(!collections.has(collection))return c.json({error:\"Colección inválida\"},400);\n if(!await authorized(c,device))return c.json({error:\"Acceso no autorizado\"},401);\n const q=await appDb.execute({sql:\"SELECT payload,updated_at FROM tc_app_store WHERE device_id=? AND collection=?\",args:[device,collection]});\n if(!q.rows.length)return c.json({exists:false,data:null});\n const row=q.rows[0] as any;\n try{return c.json({exists:true,data:JSON.parse(row.payload),updated_at:row.updated_at})}catch{return c.json({exists:false,data:null})}\n});\napp.put(\"/api/store/:collection\",async c=>{\n const collection=c.req.param(\"collection\"),body=await c.req.json(),device=String(body.device||\"\");\n if(!collections.has(collection))return c.json({error:\"Colección inválida\"},400);\n if(!await authorized(c,device))return c.json({error:\"Acceso no autorizado\"},401);\n const payload=JSON.stringify(body.data??(collection===\"business\"?{}:[]));\n if(payload.length>6000000)return c.json({error:\"Datos demasiado grandes\"},413);\n const updated=new Date().toISOString();\n await appDb.execute({sql:\"INSERT INTO tc_app_store(device_id,collection,payload,updated_at) VALUES(?,?,?,?) ON CONFLICT(device_id,collection) DO UPDATE SET payload=excluded.payload,updated_at=excluded.updated_at\",args:[device,collection,payload,updated]});\n return c.json({ok:true,updated_at:updated});\n});\napp.get(\"/api/database/status\",async c=>{\n const device=c.req.query(\"device\")||\"\";\n if(!await authorized(c,device))return c.json({connected:false,error:\"Acceso no autorizado\"},401);\n const q=await appDb.execute({sql:\"SELECT collection,updated_at FROM tc_app_store WHERE device_id=? ORDER BY collection\",args:[device]});\n return c.json({connected:true,collections:q.rows});\n});\n\napp.get(\"/api/plans\",c=>c.json([\n {id:\"semanal\",name:\"Semanal\",days:7},{id:\"mensual\",name:\"Mensual\",days:30},\n {id:\"semestral\",name:\"Semestral\",days:182},{id:\"anual\",name:\"Anual\",days:365}\n]));\napp.onError(err=>Promise.reject(err));\nexport default app.fetch;","createdAt",["D",1787696741820],"branchVersion","branchId","174e37a7-82d7-4e69-8db8-f77d0ba301f1","id","3f3a5e4d-f3dc-4961-8504-22ab93e75dfa","tiendaclik",["D",1787376796366],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Punto de venta profesional para comercios","imageUrl","937461b6-f153-4b14-9d82-e55bb64aeeb4","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a027f1-6240-77dd-8b4f-130cb45977de","tursoName","3f3a5e4df3dc4961850422ab93e75dfa","tursoHostname","3f3a5e4df3dc4961850422ab93e75dfa-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789556471789],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":55,"_104":105,"_106":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",105,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","joseguadalupechavez","handle","displayName","jose guadalupe chavez","avatar","https://lh3.googleusercontent.com/a/ACg8ocICo6fVCOfVouJ4kd4kJv5iylbzJRfGqOctbAL9Eqxhgp-Wf7GqVQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":398,"_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":399,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":400,"_83":401,"_85":402,"_87":25},"tree",[329,336,337,338],"files",[329,330,331,332,333,334,335,336,337,338],"counts",{"_319":62,"_320":303,"_321":62,"_322":323,"_324":325},"contents",[289,290,291,292],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":288,"_210":-5},{"_43":287,"_210":-5},{"_43":286,"_210":-5},{"_43":285,"_210":-5},{"_43":284,"_210":-5},{"_43":283,"_210":-5},{"_43":282,"_210":-5},{"_43":281,"_210":-5},{"_43":280,"_210":-5},{"_43":279,"_210":-5},{"_43":278,"_210":-5},{"_43":277,"_210":-5},{"_43":276,"_210":-5},{"_43":275,"_210":-5},{"_43":274,"_210":-5},{"_43":273,"_210":-5},{"_43":272,"_210":-5},{"_43":271,"_210":-5},{"_43":270,"_210":-5},{"_43":269,"_210":-5},{"_43":268,"_210":-5},{"_43":267,"_210":-5},{"_43":266,"_210":-5},{"_43":265,"_210":-5},{"_43":264,"_210":-5},{"_43":263,"_210":-5},{"_43":262,"_210":-5},{"_43":261,"_210":-5},{"_43":260,"_210":-5},{"_43":259,"_210":-5},{"_43":258,"_210":-5},{"_43":257,"_210":-5},{"_43":256,"_210":-5},{"_43":255,"_210":-5},{"_43":254,"_210":-5},{"_43":253,"_210":-5},{"_43":252,"_210":-5},{"_43":251,"_210":-5},{"_43":250,"_210":-5},{"_43":249,"_210":-5},{"_43":248,"_210":-5},{"_43":247,"_210":-5},{"_43":246,"_210":-5},{"_43":245,"_210":-5},{"_43":244,"_210":-5},{"_43":243,"_210":-5},{"_43":242,"_210":-5},{"_43":241,"_210":-5},{"_43":240,"_210":-5},{"_43":239,"_210":-5},{"_43":238,"_210":-5},{"_43":237,"_210":-5},{"_43":236,"_210":-5},{"_43":235,"_210":-5},{"_43":234,"_210":-5},{"_43":233,"_210":-5},{"_43":232,"_210":-5},{"_43":231,"_210":-5},{"_43":230,"_210":-5},{"_43":229,"_210":-5},{"_43":228,"_210":-5},{"_43":227,"_210":-5},{"_43":226,"_210":-5},{"_43":225,"_210":-5},{"_43":224,"_210":-5},{"_43":223,"_210":-5},{"_43":222,"_210":-5},{"_43":221,"_210":-5},{"_43":220,"_210":-5},{"_43":219,"_210":-5},{"_43":218,"_210":-5},{"_43":217,"_210":-5},{"_43":216,"_210":-5},{"_43":215,"_210":-5},{"_43":214,"_210":-5},{"_43":213,"_210":-5},{"_43":212,"_210":-5},{"_43":211,"_210":-5},{"_43":209,"_210":-5},"55a4a88d-2f3c-490e-b3d8-7ca1de0b4507","reporterId","df16d848-ccb8-44e4-ad6c-8118c57f63a3","0241343b-87ff-4fa9-bdc0-f0e61189a48c","2fb4b028-0ce3-4bac-a9ca-351480a0ad0d","e82e2a62-ffff-41e9-917f-2c619c44c5c6","0fee471b-7da6-4f29-b80b-49b8e3867f6f","3c3d757e-4dbc-422d-b860-86eca0883a02","283e0e07-b4e7-4f84-8584-298754c10cde","b9ea338e-1739-43e4-a192-65522341f7e0","598bbd8d-70ce-48ee-92be-220d3363ca0e","d61b0fc9-d6d5-456d-927c-60915a709122","2273c757-07af-4cf6-98b4-d0440d96de47","f4686de3-8e63-4e26-b377-194bbc4ee2a8","60813cdb-c96f-413d-9ab8-8b1f952b7e53","bfe3ab78-254f-46e1-8ab5-5b098a17e5e2","6f4dc18f-5df9-4d09-8409-6ab6981ef971","d451af87-82b4-4db3-8fe7-925e04cb7eb8","1646d702-afdc-49c6-94c0-8b2525729af7","28f37239-fdaa-4bd5-bcca-1a6f67d68bf8","ee319e87-ace3-449d-a0c3-d2cca5c7c19e","e9359faf-d93c-4169-80fa-3660d9f88b16","795a8822-2cfd-485c-a563-90f1d70d81c2","5f0f739a-22fc-492a-9f61-6e1c1ae3c78b","0cf79a98-b587-4192-95f8-18bf219f7886","da08fea1-b589-4732-8449-da45cd65dbe2","5a89307a-a471-495b-9031-1bd047b2f80f","4a4947ac-1cb6-4d12-b6e0-6d49e7b7efcd","b52a174b-84ca-4b4e-b27b-3a630db2a62b","4fcaec90-8773-43e5-ad33-b58dfa45c3d8","1123b58c-a6b3-4517-9c10-09b85c84986b","96c507b6-bc4c-4a4b-b3b2-c9cf75b4c96f","39f0c9fb-82ac-4204-9dc5-add20feddda4","92a88338-3b65-4078-8056-0496a842147e","12848608-fd39-4f4c-8747-34b945d930cf","6760df15-49ad-4b14-9311-b58e62eacdb2","d0e32ec7-0b4f-4516-81cb-ca1b88ffe45d","0990643e-f941-43ea-ae50-3506863fb147","09fddeb9-3e14-4826-bef7-498b53cdf43c","6bb014f5-7fe8-45a6-8206-b2a060cae3cf","0b02819f-c051-40ab-9e9c-14736d42a9c0","26fea11c-2e0b-4486-ad9b-a78d3a8a8b77","faf659a5-c186-42f0-ad5a-3ba0ab0d8769","1750c427-062b-41f2-81df-8ddc8455222a","10b55a0d-bdb4-4bdf-a468-e34a164d98ca","ea5f546a-9c7b-4543-afca-a80c9ca1dd3c","3533d4f7-d3d3-482e-8e6d-00126d41092e","d6b3b91e-a923-449e-bb8f-59c1c1f8909f","7def36bd-2e39-4145-a040-78218ca4e484","617e41ff-3510-43d3-9df1-f4145629e1ae","ece1ac34-ffc1-4cc9-a12a-25e4b1c91b91","6dc751df-919c-4356-9374-576dc0bb7697","c36b0fd7-bb50-48df-931c-12716a9f97b4","a6aba4eb-dde7-4aeb-891b-81e893ed3c2b","7fb35678-cd70-4949-9b7b-3b6915b0d7ee","63727532-1460-4da2-9309-8a3b072b3f0a","1639c0d7-2f5a-4575-80f1-d0800397cf2f","adfd7b36-7690-4b54-bb9c-c43f345d502c","32d94d52-45a0-4865-9c80-8ced7bc9ae4a","d46681d4-7e6c-407c-997d-45fad060eaa5","36661ddf-7a5d-4a07-9f69-c831f652b417","f8685a5f-ff8f-4c1e-bcec-a7cdda06c955","a94c2131-cf8b-4c62-9310-38018eaff505","8fd244dc-5a6c-41ff-aa35-bc70b712957f","6445b39a-3ca4-4c1d-bea3-7d96cbf325d6","c46d4e64-4394-4f65-8d71-ec5897cae8e1","66e65c4b-87f2-45f3-911f-262863425c31","79ccaa92-75c8-45eb-8362-9c2d9f0ebdbe","2d522611-b3d6-4115-a029-7f6d40e572ec","fc05e81b-1b73-47e9-972c-6985535b8bc0","0ec1b9c8-8e78-4f35-8d9b-13cba58a27f5","01fb6754-804c-40f2-942d-835e0d6a303c","cbad780a-abca-4a26-abf5-87fe4e6c68a5","55faf5af-aeb7-404d-939f-17e4a8528cc5","13e9d759-64ad-49df-915f-01d8f0b1ab44","b865b209-93be-4814-a29d-514525033304","9b593253-3b22-4350-be27-7c7545fc2822","3ab5a67f-c98e-4c74-9dfe-b0bab90dbe4f","0ca81b37-91f4-49b5-80f6-4e72751b64fc","9e350f1d-bf1c-472c-a9ea-a648cdbe4dd4",{"_43":313,"_32":314,"_30":315,"_294":-5,"_41":42,"_40":303,"_295":58,"_38":316,"_13":62,"_33":317,"_35":-5,"_24":25,"_298":-5,"_27":318},{"_43":307,"_32":308,"_30":309,"_294":-5,"_41":42,"_40":303,"_295":58,"_38":310,"_13":62,"_33":20,"_35":311,"_24":25,"_298":-5,"_27":312},{"_43":300,"_32":301,"_30":302,"_294":-5,"_41":42,"_40":303,"_295":58,"_38":304,"_13":62,"_33":20,"_35":305,"_24":25,"_298":-5,"_27":306},{"_43":293,"_32":28,"_30":31,"_294":-5,"_41":42,"_40":14,"_295":58,"_38":296,"_13":297,"_33":34,"_35":37,"_24":25,"_298":-5,"_27":299},"728f2bf1-469a-41d9-a263-11104770ff8a","parentId","latest",["D",1787696741820],3,"label",[28],"f8db0b98-4645-4bd7-85dd-1f49fbc9f50f","README.md","01a027f5-8329-75bb-a811-acc7021ccbd6",1,["D",1787376796366],"# 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",[301],"852662b2-b866-41d6-a841-b920dc8a770f","CHANGELOG.md","01a027f5-8329-75bb-a811-a9ae9f5b5e5b",["D",1787376796366],"# 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 · v83