`, 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",{"_367":368,"_369":370},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_274":-5,"_20":275,"_22":276,"_277":278,"_279":280,"_26":281,"_24":282,"_283":-5,"_284":-5,"_285":55,"_286":287,"_288":46,"_289":-5,"_290":-5,"_291":292},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","thimbunhuv","name","ecommerce-fullstack","branchName","main","version","path","db","project",{"_34":217,"_13":14,"_47":218,"_219":-5,"_220":55,"_221":222,"_223":222,"_224":225,"_226":-5,"_227":228,"_229":72,"_230":46,"_231":-5,"_232":-5,"_233":61,"_234":235,"_236":237,"_238":239,"_240":241,"_242":-5,"_243":244,"_245":244,"_246":247,"_248":247,"_249":247,"_250":244,"_251":244,"_252":253,"_254":255,"_256":257,"_258":55},"tree",[64,65,66,67,68,69],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":63},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","49230f3d-0e8e-4929-a564-7a369084cedd","schema.ts","fileId","3d4f690e-adc4-11f1-95a2-1607ee4eb77e","parentId","a0fbb412-0d8b-4629-845f-fb16f8815a84","branchId","6b84f907-9e8f-45d7-a71c-56a2a983dc31","branchVersion",3,"latest",true,"createdAt",["D",1789119382585],1,"fileType","script","content","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initSchema() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS products (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL DEFAULT '',\n price REAL NOT NULL,\n emoji TEXT NOT NULL DEFAULT '📦',\n stock INTEGER NOT NULL DEFAULT 100\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS cart_items (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n product_id INTEGER NOT NULL REFERENCES products(id),\n quantity INTEGER NOT NULL DEFAULT 1,\n UNIQUE(session_id, product_id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS orders (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n customer_name TEXT NOT NULL,\n customer_email TEXT NOT NULL,\n total REAL NOT NULL,\n status TEXT NOT NULL DEFAULT 'placed',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS order_items (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n order_id INTEGER NOT NULL REFERENCES orders(id),\n product_id INTEGER NOT NULL REFERENCES products(id),\n product_name TEXT NOT NULL,\n unit_price REAL NOT NULL,\n quantity INTEGER NOT NULL\n )`,\n },\n ]);\n\n const { rows } = await sqlite.execute(\"SELECT COUNT(*) as count FROM products\");\n const count = Number((rows[0] as { count: number }).count);\n if (count === 0) {\n await sqlite.batch([\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Wireless Headphones\", \"Noise-cancelling over-ear headphones\", 89.99, \"🎧\", 40],\n },\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Mechanical Keyboard\", \"Hot-swappable RGB mechanical keyboard\", 129.99, \"⌨️\", 25],\n },\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Smart Watch\", \"Fitness tracking smart watch\", 199.99, \"⌚\", 15],\n },\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Desk Lamp\", \"Adjustable LED desk lamp\", 34.99, \"💡\", 60],\n },\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Coffee Mug\", \"Ceramic 12oz coffee mug\", 14.99, \"☕\", 100],\n },\n {\n sql: \"INSERT INTO products (name, description, price, emoji, stock) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Backpack\", \"Water-resistant 20L daypack\", 59.99, \"🎒\", 35],\n },\n ]);\n }\n}\n","deleted",false,"label",[19,36],"a087bd18-9051-4532-aa88-14c053963aea",2,["D",1789119377885],0,"directory",[19],{"_34":202,"_13":203,"_37":204,"_39":-5,"_41":42,"_43":205,"_45":46,"_47":206,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_78":207,"_18":208},{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":195,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_78":196,"_18":197},{"_34":96,"_13":97,"_37":98,"_39":-5,"_41":42,"_43":49,"_45":46,"_47":99,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_78":100,"_18":101},{"_34":89,"_13":90,"_37":91,"_39":-5,"_41":42,"_43":49,"_45":46,"_47":92,"_17":61,"_50":24,"_52":93,"_54":55,"_56":-5,"_78":94,"_18":95},{"_34":81,"_13":82,"_37":83,"_39":-5,"_41":42,"_43":84,"_45":46,"_47":85,"_17":49,"_50":24,"_52":86,"_54":55,"_56":-5,"_78":87,"_18":88},{"_34":70,"_13":71,"_37":72,"_39":-5,"_41":42,"_43":73,"_45":46,"_47":74,"_17":49,"_50":75,"_52":76,"_54":55,"_56":77,"_78":79,"_18":80},"0ed376b4-0951-4732-965d-7e23e2ea3bb0","index.ts","01a08fd2-faaf-742b-b80a-89f8be99ffa6",5,["D",1789119406023],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { api } from \"./api/routes.ts\";\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// API routes\napp.route(\"/api\", api);\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","thimbunhuv-ecommerce","children",[],[71],"84c5ac83-ef78-4caa-b847-a733e7845ca4","README.md","01a08fd2-faaf-742b-b80a-850b9087b214",13,["D",1789119492626],"# 🛍️ Fullstack Ecommerce (Hono + React + SQLite)\n\nA fullstack ecommerce demo on Val Town. Val Town runs Deno (TypeScript), not\nPython, so this uses **Hono** — a lightweight web framework with the same\nroute/middleware feel as FastAPI — instead of FastAPI itself.\n\n[Open the shop](url:index.ts)\n\n## Stack\n\n- **Backend**: Hono REST API (`api/routes.ts`), cookie-based session cart\n- **Database**: Val Town SQLite (`db/schema.ts`) — products, cart, orders, order_items\n- **Frontend**: Client-side React SPA (`frontend/`), Twind for styling\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| Root[\"frontend/root.tsx\"]\n Root -->|loads| App[\"frontend/components/App.tsx\"]\n App --> ProductList\n App --> CartPanel\n App --> Checkout\n Browser -.->|fetch /api/*| API[\"api/routes.ts\"]\n API --> DB[(SQLite)]\n```\n\n## API routes\n\n| Method | Path | Description |\n| --- | --- | --- |\n| GET | `/api/products` | List all products |\n| GET | `/api/products/:id` | Get one product |\n| GET | `/api/cart` | Get current session's cart |\n| POST | `/api/cart` | Add item to cart `{ productId, quantity }` |\n| PATCH | `/api/cart/:productId` | Update quantity `{ quantity }` (0 removes) |\n| DELETE | `/api/cart/:productId` | Remove item from cart |\n| POST | `/api/checkout` | Place order `{ name, email }`, clears cart |\n| GET | `/api/orders/:id` | Get an order + its line items |\n\n## File structure\n\n```\nindex.ts ← Hono entrypoint (serves frontend + /api)\napi/routes.ts ← All REST API routes\ndb/schema.ts ← SQLite schema + seed data\nfrontend/\n root.tsx ← HTML shell\n index.tsx ← React entrypoint\n lib/api.ts ← Typed fetch client for the API\n components/\n App.tsx ← Root layout / view router\n ProductList.tsx ← Product grid\n CartPanel.tsx ← Cart sidebar\n Checkout.tsx ← Checkout form\n OrderConfirmation.tsx ← Post-order confirmation\n```\n\n## Next steps\n\n- Add product images/categories\n- Add an admin view to manage inventory\n- Add auth so orders are tied to real user accounts instead of a cart cookie\n",[],[82],"8fa491da-7567-43d0-8e01-e9d19fff6f8f","CHANGELOG.md","01a08fd2-faaf-742b-b80a-825098e8b7ab",["D",1789119363697],"# 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