Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[155,174,181],[155,174],{"_102":192,"_95":193,"_156":194,"_158":157,"_159":141,"_160":195,"_162":117,"_104":196,"_99":164,"_165":197,"_167":198,"_168":22,"_169":-5,"_170":199,"_98":200},"82a730d4-3261-11f0-aa46-569c3dd06744","favicon.svg","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"file","\n",[],[155,193],{"_102":202,"_95":203,"_156":204,"_158":157,"_159":141,"_160":205,"_162":117,"_104":206,"_99":207,"_165":197,"_167":208,"_168":22,"_169":-5,"_170":209,"_98":210},"538a58d0-3261-11f0-9414-569c3dd06744","index.html","5404b440-f52b-11ef-99f0-569c3dd06744",42,["D",1747405404319],7,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[155,203],{"_102":212,"_95":213,"_156":214,"_158":157,"_159":141,"_160":215,"_162":117,"_104":216,"_99":217,"_165":186,"_167":218,"_168":22,"_169":-5,"_170":219,"_98":220},"37ad4e0c-f53e-11ef-940f-569c3dd06744","index.tsx","5b1c65b6-f52b-11ef-bc72-569c3dd06744",24,["D",1740683304259],3,"/** @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();",[],[155,213],{"_102":222,"_95":223,"_156":224,"_158":157,"_159":141,"_160":225,"_162":117,"_104":226,"_99":227,"_165":197,"_167":228,"_168":22,"_169":-5,"_170":229,"_98":230},"e8142ab2-3261-11f0-8425-569c3dd06744","style.css","6ce9bd70-3261-11f0-b1e3-569c3dd06744",54,["D",1747405653521],9,"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}",[],[155,223],[155],{"_102":233,"_95":234,"_156":235,"_158":-5,"_159":141,"_160":236,"_162":117,"_104":237,"_99":238,"_165":197,"_167":239,"_168":22,"_169":-5,"_170":240,"_98":241},"f8bf1838-7a08-11f0-b058-0224a6c84d84","README.md","a50c3760-f53e-11ef-bd6d-569c3dd06744",69,["D",1755283939999],19,"# 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.",[],[234],{"_102":243,"_95":244,"_156":115,"_158":-5,"_159":141,"_160":245,"_162":117,"_104":246,"_99":121,"_165":247,"_167":248,"_168":22,"_169":-5,"_170":249,"_98":250},"61618220-7a0b-11f0-a212-0224a6c84d84","index.ts",71,["D",1755284974540],"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\"));\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;",[],[244],"files",[153,172,179,191,201,211,221,232,242],"counts",{"_255":164,"_256":164,"_257":258,"_259":260},"pulls","branches","forks",121,"envVars",{"_261":32,"_262":32},"count","emptyCount","contents",[265,268,271],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":141,"_160":161,"_162":117,"_104":266,"_99":164,"_165":166,"_167":-5,"_168":22,"_169":-5,"_98":267},["D",1740675182468],[155],{"_102":233,"_95":234,"_156":235,"_158":-5,"_159":141,"_160":236,"_162":117,"_104":269,"_99":238,"_165":197,"_167":239,"_168":22,"_169":-5,"_98":270},["D",1755283939999],[234],{"_102":243,"_95":244,"_156":115,"_158":-5,"_159":141,"_160":245,"_162":117,"_104":272,"_99":121,"_165":247,"_167":248,"_168":22,"_169":-5,"_98":273},["D",1755284974540],[244],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":282,"_259":287},{"_102":103,"_95":96,"_104":283,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":284,"_135":285,"_138":286,"_150":22},["D",1740674013689],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_99":140,"_95":43,"_102":141,"_142":103,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[],"actionData","errors"]

std

reactHonoStarter

Environment variables