Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[176,184,191],[176,184],{"_102":201,"_95":202,"_148":203,"_150":177,"_151":137,"_152":204,"_154":117,"_104":205,"_99":180,"_157":206,"_159":207,"_160":27,"_161":-5,"_162":208,"_98":209},"82a730d4-3261-11f0-aa46-569c3dd06744","favicon.svg","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"file","\n",[],[176,202],{"_102":211,"_95":212,"_148":213,"_150":177,"_151":137,"_152":214,"_154":117,"_104":215,"_99":216,"_157":206,"_159":217,"_160":27,"_161":-5,"_162":218,"_98":219},"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",[],[176,212],{"_102":221,"_95":222,"_148":223,"_150":177,"_151":137,"_152":224,"_154":117,"_104":225,"_99":226,"_157":195,"_159":227,"_160":27,"_161":-5,"_162":228,"_98":229},"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();",[],[176,222],{"_102":231,"_95":232,"_148":233,"_150":177,"_151":137,"_152":136,"_154":117,"_104":234,"_99":235,"_157":206,"_159":236,"_160":27,"_161":-5,"_162":237,"_98":238},"e8142ab2-3261-11f0-8425-569c3dd06744","style.css","6ce9bd70-3261-11f0-b1e3-569c3dd06744",["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}",[],[176,232],[176],{"_102":241,"_95":242,"_148":243,"_150":-5,"_151":137,"_152":244,"_154":117,"_104":245,"_99":121,"_157":206,"_159":246,"_160":27,"_161":-5,"_162":247,"_98":248},"1d794ef6-0019-11f0-8283-569c3dd06744","README.md","a50c3760-f53e-11ef-bd6d-569c3dd06744",37,["D",1741876831709],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[242],"files",[145,164,174,182,189,200,210,220,230,240],"counts",{"_253":31,"_254":180,"_255":256,"_257":31},"pulls","branches","forks",41,"envVars","contents",[260,263,266],{"_102":146,"_95":147,"_148":149,"_150":-5,"_151":137,"_152":153,"_154":117,"_104":261,"_99":156,"_157":158,"_159":-5,"_160":27,"_161":-5,"_98":262},["D",1740674043956],[147],{"_102":175,"_95":176,"_148":177,"_150":-5,"_151":137,"_152":178,"_154":117,"_104":264,"_99":180,"_157":158,"_159":-5,"_160":27,"_161":-5,"_98":265},["D",1740675182468],[176],{"_102":241,"_95":242,"_148":243,"_150":-5,"_151":137,"_152":244,"_154":117,"_104":267,"_99":121,"_157":206,"_159":246,"_160":27,"_161":-5,"_98":268},["D",1741876831709],[242],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":274,"_278":279,"_436":180,"_437":27},{"_102":103,"_95":96,"_104":275,"_106":-5,"_107":27,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":276,"_134":277},["D",1740674013689],{"_93":94,"_132":133},{"_99":136,"_95":41,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5},"history",[280,288,296,304,312,319,327,332,340,348,355,363,370,377,384,389,396,404,411,416,423,429],{"_148":115,"_99":281,"_104":282,"_151":137,"_249":283},22,["D",1740683236763],[284],{"_102":285,"_151":137,"_148":115,"_95":166,"_159":286,"_157":169,"_99":121,"_150":149,"_104":282,"_152":281,"_161":-5,"_154":27,"_160":27,"_98":287},"0f726d6e-f53e-11ef-8069-569c3dd06744","import { parseProject, serveFile } from \"https://esm.town/v/std/utils@63-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\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, c) => {\n throw err;\n});\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;",[147,166],{"_148":115,"_99":289,"_104":290,"_151":137,"_249":291},21,["D",1740683214879],[292],{"_102":293,"_151":137,"_148":115,"_95":166,"_159":294,"_157":169,"_99":153,"_150":149,"_104":290,"_152":289,"_161":-5,"_154":27,"_160":27,"_98":295},"02671ab6-f53e-11ef-9f0f-569c3dd06744","import { parseProject, serveFile } from \"https://esm.town/v/std/utils@62-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", c => serveFile(c.req.path, import.meta.url));\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, c) => {\n throw err;\n});\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;",[147,166],{"_148":115,"_99":297,"_104":298,"_151":137,"_249":299},20,["D",1740675403853],[300],{"_102":301,"_151":137,"_148":115,"_95":166,"_159":302,"_157":169,"_99":226,"_150":149,"_104":298,"_152":297,"_161":-5,"_154":27,"_160":27,"_98":303},"d2ab5e3e-f52b-11ef-aa11-569c3dd06744","import { parseProject } from \"https://esm.town/v/std/utils@52-main/parseImportMeta/project.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@52-main/serve-file/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getMessages, insertMessage } from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Bootstrap the initial messages data into index.html\n // To avoid an extra request and loading flash\n const initialMessages = await getMessages();\n\n // Get this project's URL, in a way that works across forks and branches\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => serveFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Provide an endpoint for the frontend to get messages as JSON\napp.get(\"/messages\", async (c) => {\n const messages = await getMessages();\n return c.json(messages);\n});\n\n// Provide an endpoint for the frontend to insert a new message\napp.post(\"/messages\", async (c) => {\n const { content } = await c.req.json();\n\n if (!content || content.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n await insertMessage(content);\n\n return c.json({ success: true }, 201);\n});\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, c) => {\n throw err;\n});\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;",[147,166],{"_148":192,"_99":305,"_104":306,"_151":137,"_249":307},19,["D",1740675298282],[308],{"_102":309,"_151":137,"_148":192,"_95":191,"_159":310,"_157":195,"_99":156,"_150":185,"_104":306,"_152":305,"_161":-5,"_154":27,"_160":27,"_98":311},"93bee06a-f52b-11ef-b9c3-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function App() {\n return (\n

React Hono Starter

\n Deployed with Val Town\n

\n );\n}",[176,184,191],{"_148":192,"_99":313,"_104":314,"_151":137,"_249":315},18,["D",1740675239248],[316],{"_102":317,"_151":137,"_148":192,"_95":191,"_159":68,"_157":195,"_99":180,"_150":185,"_104":314,"_152":313,"_161":-5,"_154":27,"_160":27,"_98":318},"708e602a-f52b-11ef-b05c-569c3dd06744",[176,184,191],{"_148":192,"_99":320,"_104":321,"_151":137,"_249":322},17,["D",1740675235541],[323],{"_102":324,"_151":137,"_148":192,"_95":325,"_159":68,"_157":195,"_99":31,"_150":185,"_104":321,"_152":320,"_161":-5,"_154":27,"_160":27,"_98":326},"6e5857ca-f52b-11ef-a8e1-569c3dd06744","enthusiasticOliveWasp",[176,184,325],{"_148":185,"_99":186,"_104":328,"_151":137,"_249":329},["D",1740675232558],[330],{"_102":183,"_151":137,"_148":185,"_95":184,"_159":-5,"_157":158,"_99":180,"_150":177,"_104":328,"_152":186,"_161":-5,"_154":117,"_160":27,"_98":331},[176,184],{"_148":185,"_99":333,"_104":334,"_151":137,"_249":335},15,["D",1740675228130],[336],{"_102":337,"_151":137,"_148":185,"_95":338,"_159":-5,"_157":158,"_99":31,"_150":177,"_104":334,"_152":333,"_161":-5,"_154":27,"_160":27,"_98":339},"69ed661c-f52b-11ef-9dac-569c3dd06744","instinctiveLimeQuelea",[176,338],{"_148":223,"_99":341,"_104":342,"_151":137,"_249":343},14,["D",1740675222707],[344],{"_102":345,"_151":137,"_148":223,"_95":222,"_159":346,"_157":195,"_99":156,"_150":177,"_104":342,"_152":341,"_161":-5,"_154":27,"_160":27,"_98":347},"66b2d770-f52b-11ef-9279-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { type Message } from \"../shared/utils.ts\";\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();",[176,222],{"_148":223,"_99":349,"_104":350,"_151":137,"_249":351},13,["D",1740675207027],[352],{"_102":353,"_151":137,"_148":223,"_95":222,"_159":68,"_157":195,"_99":180,"_150":177,"_104":350,"_152":349,"_161":-5,"_154":27,"_160":27,"_98":354},"5d5a2e30-f52b-11ef-9324-569c3dd06744",[176,222],{"_148":223,"_99":356,"_104":357,"_151":137,"_249":358},12,["D",1740675203272],[359],{"_102":360,"_151":137,"_148":223,"_95":361,"_159":68,"_157":195,"_99":31,"_150":177,"_104":357,"_152":356,"_161":-5,"_154":27,"_160":27,"_98":362},"5b1c64f8-f52b-11ef-bc72-569c3dd06744","fluentTurquoiseSpoonbill",[176,361],{"_148":213,"_99":168,"_104":364,"_151":137,"_249":365},["D",1740675198768],[366],{"_102":367,"_151":137,"_148":213,"_95":212,"_159":368,"_157":206,"_99":156,"_150":177,"_104":364,"_152":168,"_161":-5,"_154":27,"_160":27,"_98":369},"586dcc60-f52b-11ef-99f0-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n",[176,212],{"_148":213,"_99":371,"_104":372,"_151":137,"_249":373},10,["D",1740675196304],[374],{"_102":375,"_151":137,"_148":213,"_95":212,"_159":68,"_157":206,"_99":180,"_150":177,"_104":372,"_152":371,"_161":-5,"_154":27,"_160":27,"_98":376},"56f87d94-f52b-11ef-bb09-569c3dd06744",[176,212],{"_148":213,"_99":235,"_104":378,"_151":137,"_249":379},["D",1740675191371],[380],{"_102":381,"_151":137,"_148":213,"_95":382,"_159":68,"_157":206,"_99":31,"_150":177,"_104":378,"_152":235,"_161":-5,"_154":27,"_160":27,"_98":383},"5404b3a0-f52b-11ef-99f0-569c3dd06744","respectableCoffeeParrotfish",[176,382],{"_148":177,"_99":178,"_104":385,"_151":137,"_249":386},["D",1740675182468],[387],{"_102":175,"_151":137,"_148":177,"_95":176,"_159":-5,"_157":158,"_99":180,"_150":-5,"_104":385,"_152":178,"_161":-5,"_154":117,"_160":27,"_98":388},[176],{"_148":115,"_99":216,"_104":390,"_151":137,"_249":391},["D",1740674060523],[392],{"_102":393,"_151":137,"_148":115,"_95":166,"_159":394,"_157":169,"_99":156,"_150":149,"_104":390,"_152":216,"_161":-5,"_154":27,"_160":27,"_98":395},"b1fb20aa-f528-11ef-ae42-569c3dd06744","import { parseProject } from \"https://esm.town/v/std/parseImportMeta@149-main/project\";\nimport { readFile, servePublicFile } from \"https://esm.town/v/stevekrouse/utils@187-main/serve-public/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getMessages, insertMessage } from \"./database/queries.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Bootstrap the initial messages data into index.html\n // To avoid an extra request and loading flash\n const initialMessages = await getMessages();\n\n // Get this project's URL, in a way that works across forks and branches\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n // Inject the data as a global variable inside a script tag\n const dataScript = ``;\n\n // Insert the script right before the closing tag\n html = html.replace(\"\", `${dataScript}`);\n\n return c.html(html);\n});\n\n// Serve all /frontend files under /public\napp.get(\"/public/**/*\", c => servePublicFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", c => servePublicFile(c.req.path, import.meta.url));\n\n// Provide an endpoint for the frontend to get messages as JSON\napp.get(\"/messages\", async (c) => {\n const messages = await getMessages();\n return c.json(messages);\n});\n\n// Provide an endpoint for the frontend to insert a new message\napp.post(\"/messages\", async (c) => {\n const { content } = await c.req.json();\n\n if (!content || content.trim() === \"\") {\n return c.json({ error: \"Message cannot be empty\" }, 400);\n }\n\n await insertMessage(content);\n\n return c.json({ success: true }, 201);\n});\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, c) => {\n throw err;\n});\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;",[147,166],{"_148":115,"_99":397,"_104":398,"_151":137,"_249":399},6,["D",1740674051418],[400],{"_102":401,"_151":137,"_148":115,"_95":166,"_159":402,"_157":169,"_99":180,"_150":149,"_104":398,"_152":397,"_161":-5,"_154":27,"_160":27,"_98":403},"ac8dec6a-f528-11ef-ad44-569c3dd06744","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[147,166],{"_148":115,"_99":121,"_104":405,"_151":137,"_249":406},["D",1740674046629],[407],{"_102":408,"_151":137,"_148":115,"_95":409,"_159":402,"_157":169,"_99":31,"_150":149,"_104":405,"_152":121,"_161":-5,"_154":27,"_160":27,"_98":410},"a9b2b160-f528-11ef-9e98-569c3dd06744","valuableEmeraldChipmunk",[147,409],{"_148":149,"_99":153,"_104":412,"_151":137,"_249":413},["D",1740674043956],[414],{"_102":146,"_151":137,"_148":149,"_95":147,"_159":-5,"_157":158,"_99":156,"_150":-5,"_104":412,"_152":153,"_161":-5,"_154":117,"_160":27,"_98":415},[147],{"_148":177,"_99":226,"_104":417,"_151":137,"_249":418},["D",1740674039775],[419],{"_102":420,"_151":137,"_148":177,"_95":421,"_159":-5,"_157":158,"_99":31,"_150":-5,"_104":417,"_152":226,"_161":-5,"_154":27,"_160":27,"_98":422},"a59cbea4-f528-11ef-ae42-569c3dd06744","wiseOrangeCephalopod",[421],{"_148":149,"_99":156,"_104":424,"_151":137,"_249":425},["D",1740674037306],[426],{"_102":427,"_151":137,"_148":149,"_95":176,"_159":-5,"_157":158,"_99":180,"_150":-5,"_104":424,"_152":156,"_161":-5,"_154":27,"_160":27,"_98":428},"a425c26e-f528-11ef-93d6-569c3dd06744",[176],{"_148":149,"_99":180,"_104":430,"_151":137,"_249":431},["D",1740674033310],[432],{"_102":433,"_151":137,"_148":149,"_95":434,"_159":-5,"_157":158,"_99":31,"_150":-5,"_104":430,"_152":180,"_161":-5,"_154":27,"_160":27,"_98":435},"a1c257bc-f528-11ef-8bc0-569c3dd06744","enthusiasticLavenderTarsier",[434],"page","hasNext","routes/_app","actionData","errors"]

History