Val Town React + Hono Starter

\n I've been clicked{\" \"}\n times\n

Hello

\n );\n}",[],[156,174,180],[156,174],{"_105":190,"_96":191,"_157":192,"_159":158,"_160":142,"_161":193,"_163":119,"_107":194,"_101":182,"_165":195,"_167":73,"_168":22,"_169":-5,"_170":196,"_99":197},"b552fce6-7e94-11f0-a902-0224a6c84d84","code.html","b1d545ce-7e94-11f0-842b-0224a6c84d84",5,["D",1755783761076],"file",[],[156,191],{"_105":199,"_96":200,"_157":201,"_159":158,"_160":142,"_161":162,"_163":119,"_107":202,"_101":32,"_165":195,"_167":203,"_168":22,"_169":-5,"_170":204,"_99":205},"4440a3fa-7e94-11f0-8985-0224a6c84d84","favicon.svg","0198ccdb-27a8-70b8-8858-9f3b87c7b618",["D",1755783571285],"\n",[],[156,200],{"_105":207,"_96":208,"_157":209,"_159":158,"_160":142,"_161":162,"_163":119,"_107":210,"_101":32,"_165":195,"_167":211,"_168":22,"_169":-5,"_170":212,"_99":213},"4440a74c-7e94-11f0-8985-0224a6c84d84","index.html","0198ccdb-27a8-70b8-8858-a30362f8554b",["D",1755783571285],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[156,208],{"_105":215,"_96":216,"_157":217,"_159":158,"_160":142,"_161":162,"_163":119,"_107":218,"_101":32,"_165":184,"_167":219,"_168":22,"_169":-5,"_170":220,"_99":221},"4440a88c-7e94-11f0-8985-0224a6c84d84","index.tsx","0198ccdb-27a8-70b8-8858-a5d2249b66b6",["D",1755783571285],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[156,216],{"_105":223,"_96":224,"_157":225,"_159":158,"_160":142,"_161":162,"_163":119,"_107":226,"_101":32,"_165":195,"_167":227,"_168":22,"_169":-5,"_170":228,"_99":229},"4440ab02-7e94-11f0-8985-0224a6c84d84","style.css","0198ccdb-27a8-70b8-8858-a9276527cb9e",["D",1755783571285],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[156,224],[156],{"_105":232,"_96":233,"_157":234,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":235,"_101":32,"_165":195,"_167":236,"_168":22,"_169":-5,"_170":237,"_99":238},"4440ae40-7e94-11f0-8985-0224a6c84d84","README.md","0198ccdb-27a8-70b8-8858-b2e461143e5c",["D",1755783571285],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[],[233],{"_105":240,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":119,"_107":241,"_101":242,"_165":243,"_167":244,"_168":22,"_169":-5,"_170":245,"_99":246},"d864c552-7e94-11f0-9e55-0224a6c84d84",["D",1755783819908],3,"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/code/:url\", () => {\n return serveFile(\"/frontend/code.html\");\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\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;",[],[100],"files",[154,172,178,189,198,206,214,222,231,239],"counts",{"_251":32,"_252":162,"_253":32,"_254":255},"pulls","branches","forks","envVars",{"_256":32,"_257":32},"count","emptyCount","contents",[],{"_105":240,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":119,"_107":261,"_101":242,"_165":243,"_167":244,"_168":22,"_169":-5,"_99":262},["D",1755783819908],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":271,"_152":276,"_247":307,"_195":308,"_258":310,"_311":-5,"_312":-5,"_313":-5,"_314":-5,"_315":316,"_254":-5},{"_105":106,"_96":97,"_107":272,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":273,"_136":274,"_139":275,"_151":22},["D",1755783571285],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[277,301,304],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":278,"_99":300},[279,285,288,291,294,297],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":162,"_163":119,"_107":176,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":280,"_99":284},[281],{"_105":179,"_96":180,"_157":181,"_159":175,"_160":142,"_161":182,"_163":119,"_107":183,"_101":162,"_165":184,"_167":185,"_168":22,"_169":-5,"_170":282,"_99":283},[],[156,174,180],[156,174],{"_105":190,"_96":191,"_157":192,"_159":158,"_160":142,"_161":193,"_163":119,"_107":194,"_101":182,"_165":195,"_167":73,"_168":22,"_169":-5,"_170":286,"_99":287},[],[156,191],{"_105":199,"_96":200,"_157":201,"_159":158,"_160":142,"_161":162,"_163":119,"_107":202,"_101":32,"_165":195,"_167":203,"_168":22,"_169":-5,"_170":289,"_99":290},[],[156,200],{"_105":207,"_96":208,"_157":209,"_159":158,"_160":142,"_161":162,"_163":119,"_107":210,"_101":32,"_165":195,"_167":211,"_168":22,"_169":-5,"_170":292,"_99":293},[],[156,208],{"_105":215,"_96":216,"_157":217,"_159":158,"_160":142,"_161":162,"_163":119,"_107":218,"_101":32,"_165":184,"_167":219,"_168":22,"_169":-5,"_170":295,"_99":296},[],[156,216],{"_105":223,"_96":224,"_157":225,"_159":158,"_160":142,"_161":162,"_163":119,"_107":226,"_101":32,"_165":195,"_167":227,"_168":22,"_169":-5,"_170":298,"_99":299},[],[156,224],[156],{"_105":232,"_96":233,"_157":234,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":235,"_101":32,"_165":195,"_167":236,"_168":22,"_169":-5,"_170":302,"_99":303},[],[233],{"_105":240,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":119,"_107":241,"_101":242,"_165":243,"_167":244,"_168":22,"_169":-5,"_170":305,"_99":306},[],[100],[277,279,281,285,288,291,294,297,301,304],{"_105":240,"_96":100,"_157":117,"_159":-5,"_160":142,"_161":102,"_163":119,"_107":261,"_101":242,"_165":243,"_167":244,"_168":22,"_169":-5,"_99":309},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

andrew

untitled-497