Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[178,184,190],[178,184],{"_106":199,"_99":200,"_151":201,"_153":179,"_154":138,"_155":122,"_157":120,"_108":202,"_103":203,"_159":204,"_161":205,"_162":27,"_163":-5,"_164":206,"_102":207},"ffc398cc-2673-11f0-a4e6-569c3dd06744","index.html","e8c94cda-556c-4148-b44b-14b6c3892f92",["D",1746094010244],11,"file","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[178,200],{"_106":209,"_99":210,"_151":211,"_153":179,"_154":138,"_155":156,"_157":120,"_108":212,"_103":33,"_159":193,"_161":213,"_162":27,"_163":-5,"_164":214,"_102":215},"f89b77be-266d-11f0-b6f2-569c3dd06744","index.tsx","d4054740-5983-4fc5-88f8-9a5a23528e50",["D",1746091421190],"/** @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();",[],[178,210],[178],{"_106":218,"_99":219,"_151":220,"_153":-5,"_154":138,"_155":122,"_157":120,"_108":221,"_103":170,"_159":204,"_161":222,"_162":27,"_163":-5,"_164":223,"_102":224},"ffc39214-2673-11f0-a4e6-569c3dd06744","README.md","d86e9bef-fe4e-4c5b-8f58-ac0e6cf484dd",["D",1746094010244],"# 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.",[],[219],"files",[148,166,176,182,188,198,208,217],"counts",{"_229":33,"_230":156,"_231":33,"_232":33},"pulls","branches","forks","envVars","contents",[235,238,241],{"_106":149,"_99":150,"_151":152,"_153":-5,"_154":138,"_155":156,"_157":120,"_108":236,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":237},["D",1746091421190],[150],{"_106":177,"_99":178,"_151":179,"_153":-5,"_154":138,"_155":156,"_157":120,"_108":239,"_103":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_102":240},["D",1746091421190],[178],{"_106":218,"_99":219,"_151":220,"_153":-5,"_154":138,"_155":122,"_157":120,"_108":242,"_103":170,"_159":204,"_161":222,"_162":27,"_163":-5,"_102":243},["D",1746094010244],[219],"upstream",{"_106":246,"_99":100,"_114":247,"_115":-5,"_112":113,"_21":248},"96102714-f528-11ef-aa68-569c3dd06744","Starter template with client-side React & Hono server",{"_97":249,"_134":250},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ","screenshots",{"_253":254,"_255":256},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=39&url=https%3A%2F%2Fbradnoble--6ec25b24acec44478d44123ca28fadd4.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=39&url=https%3A%2F%2Fbradnoble--6ec25b24acec44478d44123ca28fadd4.web.val.run","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":260,"_264":265,"_496":33,"_497":120},{"_106":107,"_99":100,"_108":261,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":122,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":262,"_136":263},["D",1746091421190],{"_97":98,"_134":135},{"_103":122,"_99":43,"_106":138,"_139":107,"_140":141,"_142":122,"_143":113,"_144":145},"history",[266,293,301,309,318,327,335,343,351,359,367,375,384,391,398,407,414,422,429,436,444,459,466,473,481,489],{"_151":201,"_103":122,"_108":267,"_154":138,"_225":268},["D",1746094010244],[269,271,274,277,286,290],{"_106":199,"_154":138,"_151":201,"_99":200,"_161":205,"_159":204,"_103":203,"_153":179,"_108":267,"_155":122,"_163":-5,"_157":120,"_162":27,"_102":270},[178,200],{"_106":218,"_154":138,"_151":220,"_99":219,"_161":222,"_159":204,"_103":170,"_153":-5,"_108":272,"_155":122,"_163":-5,"_157":120,"_162":27,"_102":273},["D",1746094010244],[219],{"_106":189,"_154":138,"_151":191,"_99":190,"_161":194,"_159":193,"_103":94,"_153":185,"_108":275,"_155":122,"_163":-5,"_157":120,"_162":27,"_102":276},["D",1746094010244],[178,184,190],{"_106":278,"_154":138,"_151":279,"_99":280,"_161":281,"_159":193,"_103":282,"_153":283,"_108":284,"_155":122,"_163":-5,"_157":120,"_162":120,"_102":285},"ffc3907a-2673-11f0-a4e6-569c3dd06744","2cc9b2c4-2670-11f0-a95e-569c3dd06744","styles.css","/* Main styles */\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n}\n\nh1 {\n color: #2c3e50;\n border-bottom: 2px solid #3498db;\n padding-bottom: 10px;\n}\n\nh2 {\n color: #3498db;\n}\n\np {\n margin-bottom: 20px;\n}\n\nbutton {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n#root {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}",8,"b907e3d2-2670-11f0-bd29-569c3dd06744",["D",1746094010244],[178,113,280],{"_106":287,"_154":138,"_151":283,"_99":113,"_161":-5,"_159":160,"_103":156,"_153":179,"_108":288,"_155":122,"_163":-5,"_157":120,"_162":120,"_102":289},"ffc36bcc-2673-11f0-a4e6-569c3dd06744",["D",1746094010244],[178,113],{"_106":167,"_154":138,"_151":118,"_99":168,"_161":172,"_159":171,"_103":170,"_153":152,"_108":291,"_155":122,"_163":-5,"_157":120,"_162":27,"_102":292},["D",1746094010244],[150,168],{"_151":220,"_103":294,"_108":295,"_154":138,"_225":296},38,["D",1746093592825],[297],{"_106":298,"_154":138,"_151":220,"_99":219,"_161":299,"_159":204,"_103":94,"_153":-5,"_108":295,"_155":294,"_163":-5,"_157":27,"_162":27,"_102":300},"06f63d9e-2673-11f0-8967-569c3dd06744","# 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- **CSS Styling**: The CSS styles are inlined directly in the HTML for reliability. You can modify the styles in the `\n \n \n \n

\n \n \n \n",10,[178,200],{"_151":201,"_103":319,"_108":320,"_154":138,"_225":321},35,["D",1746093550323],[322],{"_106":323,"_154":138,"_151":201,"_99":200,"_161":324,"_159":204,"_103":325,"_153":179,"_108":320,"_155":319,"_163":-5,"_157":27,"_162":27,"_102":326},"eda0cef4-2672-11f0-b6ea-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",9,[178,200],{"_151":220,"_103":328,"_108":329,"_154":138,"_225":330},34,["D",1746093458872],[331],{"_106":332,"_154":138,"_151":220,"_99":219,"_161":333,"_159":204,"_103":156,"_153":-5,"_108":329,"_155":328,"_163":-5,"_157":27,"_162":27,"_102":334},"b71e6f12-2672-11f0-bcdb-569c3dd06744","# 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- **CSS Styling**: Custom styles are defined in `/frontend/public/styles.css` and are served via the `/public` route in the backend.\n\n## Project Structure\n\n```\n/\n├── backend/\n│ └── index.ts # Backend HTTP server (entrypoint)\n├── frontend/\n│ ├── components/\n│ │ └── App.tsx # Main React component\n│ ├── public/\n│ │ ├── styles.css # Custom CSS styles\n│ │ └── favicon.svg # Favicon\n│ ├── index.html # HTML template\n│ └── index.tsx # Client-side JS entrypoint\n└── README.md\n```\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.",[219],{"_151":191,"_103":336,"_108":337,"_154":138,"_225":338},33,["D",1746093447524],[339],{"_106":340,"_154":138,"_151":191,"_99":190,"_161":341,"_159":193,"_103":156,"_153":185,"_108":337,"_155":336,"_163":-5,"_157":27,"_162":27,"_102":342},"b05b6090-2672-11f0-baa0-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n \n return (\n

Val Town React + Hono Starter

This app now has custom CSS styles applied from the public/styles.css file.

\n \n

Interactive Counter

\n I've been clicked times\n

\n \n

Styling Information

\n The styles are being loaded from the /public/styles.css file, which is now properly\n served by the backend. You can modify the CSS file to customize the appearance of your app.\n

\n );\n}",[178,184,190],{"_151":279,"_103":344,"_108":345,"_154":138,"_225":346},32,["D",1746093437479],[347],{"_106":348,"_154":138,"_151":279,"_99":280,"_161":281,"_159":193,"_103":349,"_153":283,"_108":345,"_155":344,"_163":-5,"_157":27,"_162":27,"_102":350},"aa5e8c76-2672-11f0-8108-569c3dd06744",7,[178,113,280],{"_151":118,"_103":352,"_108":353,"_154":138,"_225":354},31,["D",1746093430365],[355],{"_106":356,"_154":138,"_151":118,"_99":168,"_161":357,"_159":171,"_103":156,"_153":152,"_108":353,"_155":352,"_163":-5,"_157":27,"_162":27,"_102":358},"a6212394-2672-11f0-b41a-569c3dd06744","import { serveFile } from \"https://esm.town/v/std/utils@85-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// Serve public files directly\napp.get(\"/public/**/*\", c => serveFile(`/frontend${c.req.path}`, import.meta.url));\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, 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;",[150,168],{"_151":201,"_103":360,"_108":361,"_154":138,"_225":362},30,["D",1746093081471],[363],{"_106":364,"_154":138,"_151":201,"_99":200,"_161":365,"_159":204,"_103":282,"_153":179,"_108":361,"_155":360,"_163":-5,"_157":27,"_162":27,"_102":366},"d62b2d9c-2671-11f0-8b01-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[178,200],{"_151":201,"_103":368,"_108":369,"_154":138,"_225":370},29,["D",1746093064002],[371],{"_106":372,"_154":138,"_151":201,"_99":200,"_161":373,"_159":204,"_103":349,"_153":179,"_108":369,"_155":368,"_163":-5,"_157":27,"_162":27,"_102":374},"cbc23a12-2671-11f0-824e-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[178,200],{"_151":279,"_103":376,"_108":377,"_154":138,"_225":378},28,["D",1746092606831],[379],{"_106":380,"_154":138,"_151":279,"_99":280,"_161":381,"_159":193,"_103":382,"_153":283,"_108":377,"_155":376,"_163":-5,"_157":27,"_162":27,"_102":383},"bb43526c-2670-11f0-add5-569c3dd06744","h1 {color: red}",6,[178,113,280],{"_151":283,"_103":385,"_108":386,"_154":138,"_225":387},27,["D",1746092603091],[388],{"_106":389,"_154":138,"_151":283,"_99":113,"_161":-5,"_159":160,"_103":33,"_153":179,"_108":386,"_155":385,"_163":-5,"_157":27,"_162":27,"_102":390},"b907e30a-2670-11f0-bd29-569c3dd06744",[178,113],{"_151":201,"_103":392,"_108":393,"_154":138,"_225":394},26,["D",1746092596011],[395],{"_106":396,"_154":138,"_151":201,"_99":200,"_161":365,"_159":204,"_103":382,"_153":179,"_108":393,"_155":392,"_163":-5,"_157":27,"_162":27,"_102":397},"b4d00b32-2670-11f0-8330-569c3dd06744",[178,200],{"_151":201,"_103":399,"_108":400,"_154":138,"_225":401},25,["D",1746092562567],[402],{"_106":403,"_154":138,"_151":201,"_99":200,"_161":404,"_159":204,"_103":405,"_153":179,"_108":400,"_155":399,"_163":-5,"_157":27,"_162":27,"_102":406},"a0e3f016-2670-11f0-bd29-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",5,[178,200],{"_151":279,"_103":408,"_108":409,"_154":138,"_225":410},24,["D",1746092549745],[411],{"_106":412,"_154":138,"_151":279,"_99":280,"_161":381,"_159":193,"_103":405,"_153":185,"_108":409,"_155":408,"_163":-5,"_157":27,"_162":27,"_102":413},"993d2292-2670-11f0-813b-569c3dd06744",[178,184,280],{"_151":279,"_103":415,"_108":416,"_154":138,"_225":417},23,["D",1746092490824],[418],{"_106":419,"_154":138,"_151":279,"_99":280,"_161":381,"_159":193,"_103":420,"_153":179,"_108":416,"_155":415,"_163":-5,"_157":27,"_162":27,"_102":421},"761d64e8-2670-11f0-813b-569c3dd06744",4,[178,280],{"_151":279,"_103":423,"_108":424,"_154":138,"_225":425},22,["D",1746092469094],[426],{"_106":427,"_154":138,"_151":279,"_99":280,"_161":381,"_159":193,"_103":170,"_153":179,"_108":424,"_155":423,"_163":-5,"_157":27,"_162":27,"_102":428},"692a0cdc-2670-11f0-a63c-569c3dd06744",[178,280],{"_151":201,"_103":430,"_108":431,"_154":138,"_225":432},21,["D",1746092420276],[433],{"_106":434,"_154":138,"_151":201,"_99":200,"_161":373,"_159":204,"_103":420,"_153":179,"_108":431,"_155":430,"_163":-5,"_157":27,"_162":27,"_102":435},"4c10e4e0-2670-11f0-a123-569c3dd06744",[178,200],{"_151":201,"_103":437,"_108":438,"_154":138,"_225":439},20,["D",1746092415846],[440],{"_106":441,"_154":138,"_151":201,"_99":200,"_161":442,"_159":204,"_103":170,"_153":179,"_108":438,"_155":437,"_163":-5,"_157":27,"_162":27,"_102":443},"496dab60-2670-11f0-b892-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[178,200],{"_151":445,"_103":446,"_108":447,"_154":138,"_225":448},"2da63ea2-266f-11f0-b22a-569c3dd06744",19,["D",1746092404387],[449,455],{"_106":450,"_154":138,"_151":445,"_99":451,"_161":452,"_159":193,"_103":382,"_153":453,"_108":447,"_155":446,"_163":-5,"_157":120,"_162":120,"_102":454},"42990884-2670-11f0-add5-569c3dd06744","style.css","/* styles.css */\n\nbody {\n background-color: red;\n margin: 0;\n padding: 0;\n font-family: Arial, sans-serif;\n}\n\n* {\n box-sizing: border-box;\n}","4d72511c-266f-11f0-be69-569c3dd06744",[113,451],{"_106":456,"_154":138,"_151":453,"_99":113,"_161":-5,"_159":160,"_103":382,"_153":-5,"_108":457,"_155":446,"_163":-5,"_157":120,"_162":120,"_102":458},"4298eaca-2670-11f0-add5-569c3dd06744",["D",1746092404387],[113],{"_151":279,"_103":460,"_108":461,"_154":138,"_225":462},18,["D",1746092385297],[463],{"_106":464,"_154":138,"_151":279,"_99":280,"_161":381,"_159":193,"_103":94,"_153":179,"_108":461,"_155":460,"_163":-5,"_157":27,"_162":27,"_102":465},"3737b1f2-2670-11f0-9cba-569c3dd06744",[178,280],{"_151":279,"_103":467,"_108":468,"_154":138,"_225":469},17,["D",1746092377386],[470],{"_106":471,"_154":138,"_151":279,"_99":280,"_161":70,"_159":193,"_103":156,"_153":179,"_108":468,"_155":467,"_163":-5,"_157":27,"_162":27,"_102":472},"3280e048-2670-11f0-9cba-569c3dd06744",[178,280],{"_151":279,"_103":474,"_108":475,"_154":138,"_225":476},16,["D",1746092367802],[477],{"_106":478,"_154":138,"_151":279,"_99":479,"_161":70,"_159":193,"_103":33,"_153":179,"_108":475,"_155":474,"_163":-5,"_157":27,"_162":27,"_102":480},"2cc9b210-2670-11f0-a95e-569c3dd06744","styles",[178,479],{"_151":201,"_103":482,"_108":483,"_154":138,"_225":484},15,["D",1746092306528],[485],{"_106":486,"_154":138,"_151":201,"_99":200,"_161":487,"_159":204,"_103":94,"_153":179,"_108":483,"_155":482,"_163":-5,"_157":27,"_162":27,"_102":488},"08445c42-2670-11f0-8d9e-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[178,200],{"_151":453,"_103":490,"_108":491,"_154":138,"_225":492},14,["D",1746092281568],[493],{"_106":494,"_154":138,"_151":453,"_99":113,"_161":-5,"_159":160,"_103":405,"_153":-5,"_108":491,"_155":490,"_163":-5,"_157":27,"_162":27,"_102":495},"f963d6d0-266f-11f0-82e4-569c3dd06744",[113],"page","hasNext","routes/_app","actionData","errors"]

History