💬 Message Board

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",[],[232,238,244],{"_102":251,"_95":252,"_148":253,"_150":239,"_151":134,"_152":153,"_154":116,"_104":254,"_99":31,"_156":175,"_158":255,"_159":27,"_160":-5,"_161":256,"_98":257},"891f176c-f614-11ef-9f4c-569c3dd06744","MessageInput.tsx","5411bdd0-c791-4f28-8d1c-bc76898f2786",["D",1740775353147],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const response = await fetch(\"/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content: message }),\n });\n\n if (response.ok) {\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Message submission failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a message...\"\n />\n \n \n );\n}",[],[232,238,252],[232,238],{"_102":260,"_95":188,"_148":261,"_150":233,"_151":134,"_152":153,"_154":116,"_104":262,"_99":31,"_156":191,"_158":263,"_159":27,"_160":-5,"_161":264,"_98":265},"891f19b0-f614-11ef-9f4c-569c3dd06744","39ab1377-e4f7-4b7e-b7ca-efb54b230212",["D",1740775353147],"# Frontend\n\nThis template is a classic client-side-only React app. \n\n## `index.html`\n\nThe **entrypoint** for the frontend is `/frontend/index.html`. This is the HTML page that is returned at the root from `/backend/index.ts`.\n\nThis HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React app.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\n## `index.tsx`\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `

`.\n\nIt also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the ``.\n\n## `favicon.svg`\n\nAs of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory is where the React components are stored. They're pretty standard client-side React components.",[],[232,188],{"_102":267,"_95":268,"_148":269,"_150":233,"_151":134,"_152":153,"_154":116,"_104":270,"_99":31,"_156":191,"_158":271,"_159":27,"_160":-5,"_161":272,"_98":273},"891f1b5e-f614-11ef-9f4c-569c3dd06744","favicon.svg","a434902e-b876-4003-9d23-778c8ac7e883",["D",1740775353147],"",[],[232,268],{"_102":275,"_95":276,"_148":277,"_150":233,"_151":134,"_152":278,"_154":116,"_104":279,"_99":153,"_156":191,"_158":280,"_159":27,"_160":-5,"_161":281,"_98":282},"5ae95df2-06c8-11f0-a46a-569c3dd06744","index.html","597ac904-bebb-433f-b728-2c19219feffd",6,["D",1742611803684],"\n\n \n AlwaysHere\n \n \n

\n \n \n \n",[],[232,276],{"_102":284,"_95":285,"_148":286,"_150":233,"_151":134,"_152":287,"_154":116,"_104":288,"_99":153,"_156":175,"_158":289,"_159":27,"_160":-5,"_161":290,"_98":291},"533afaa2-06c8-11f0-98d4-569c3dd06744","index.tsx","8a9386d2-eaab-41d7-b779-9223a97cf1d0",5,["D",1742611790796],"// /frontend/index.tsx\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (root) createRoot(root).render();",[],[232,285],{"_102":293,"_95":294,"_148":295,"_150":233,"_151":134,"_152":153,"_154":116,"_104":296,"_99":31,"_156":191,"_158":297,"_159":27,"_160":-5,"_161":298,"_98":299},"891f1e6a-f614-11ef-9f4c-569c3dd06744","style.css","c335c576-d034-4c11-9183-d2e596a7c44e",["D",1740775353147],"body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.message-board {\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n}\n\n.message-input {\n display: flex;\n margin-top: 20px;\n}\n\n.message-input input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n margin-right: 10px;\n}\n\n.message-input button {\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.message-list {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.message-item {\n background-color: #f9f9f9;\n border-radius: 4px;\n padding: 10px;\n margin-bottom: 10px;\n}\n\n.message-item p {\n margin: 0 0 5px 0;\n}\n\n.message-item small {\n color: #888;\n font-size: 0.7em;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n}",[],[232,294],[232],{"_102":302,"_95":303,"_148":304,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":305,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_161":306,"_98":322},"891f2284-f614-11ef-9f4c-569c3dd06744","shared","aa8dc2e4-8dd7-4a22-899a-f26483f62594",["D",1740775353147],[307,314],{"_102":308,"_95":188,"_148":309,"_150":304,"_151":134,"_152":153,"_154":116,"_104":310,"_99":31,"_156":191,"_158":311,"_159":27,"_160":-5,"_161":312,"_98":313},"891f20d6-f614-11ef-9f4c-569c3dd06744","f4a79e0f-32ae-482f-a428-af5f908db74a",["D",1740775353147],"# Shared\n\nIt's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:\n\n![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)\n\nFor example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support \"web-standards\", but there are definitely edge cases to look out for.",[],[303,188],{"_102":315,"_95":316,"_148":317,"_150":304,"_151":134,"_152":153,"_154":116,"_104":318,"_99":31,"_156":175,"_158":319,"_159":27,"_160":-5,"_161":320,"_98":321},"891f21b2-f614-11ef-9f4c-569c3dd06744","utils.ts","5890ca0f-4723-41ad-aa0a-9a79fd04d77d",["D",1740775353147],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[303,316],[303],{"_102":324,"_95":188,"_148":325,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":326,"_99":31,"_156":191,"_158":327,"_159":27,"_160":-5,"_161":328,"_98":329},"891f234c-f614-11ef-9f4c-569c3dd06744","2876d69e-7423-477a-ba9a-2a815915d1ea",["D",1740775353147],"# React Hono Val Town Project Starter Template\n\nThis is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.\n\nThis app is broken up into three folders, corresponding to where the code in those folders run:\n\n- `backend/` - runs on Val Town serverless infrastructure in Deno\n- `frontend/` - runs in the user's browser\n- `shared/` - runs in both the frontend and backend\n\nThe entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.\n\nYou can click into each of those folders to view their respective READMEs.\n\n## Getting started\n\n1. Click `Fork` on the top-right to run this Project on your account.\n2. Go to `/backend/index.ts` and click on the ... menu on the HTTP Preview and click **Pin to Home**. (We will soon do this for you automatically.)\n3. Customize the project for your own use-case!\n\n## Contributing\n\nThis template is actively accepting pull requests, particularly for bugs, but also for anything that can be done more idiomatically.\n\nIf you'd like to make a template with other technologies choices (ie no Hono or no React), please create a new template and we can link to it from this one as another way to go. Eventually, we'd like to be many templates that show how to use Projects. The next one I'm personally excited about making is a fullstack React Router 7 one. [This one](https://www.val.town/x/just_be/reactRouter7) is a good start, but I'd like to rebuild the message board app from this template in that format.",[],[188],"files",[145,163,169,180,186,195,203,212,219,230,236,242,250,259,266,274,283,292,301,307,314,323],"counts",{"_334":31,"_335":153,"_336":31,"_337":31},"pulls","branches","forks","envVars","contents",[340,343,346,349],{"_102":146,"_95":147,"_148":149,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":341,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":342},["D",1740775353147],[147],{"_102":231,"_95":232,"_148":233,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":344,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":345},["D",1740775353147],[232],{"_102":302,"_95":303,"_148":304,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":347,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":348},["D",1740775353147],[303],{"_102":324,"_95":188,"_148":325,"_150":-5,"_151":134,"_152":153,"_154":116,"_104":350,"_99":31,"_156":191,"_158":327,"_159":27,"_160":-5,"_98":351},["D",1740775353147],[188],"upstream",{"_102":354,"_95":96,"_110":355,"_111":-5,"_108":109,"_21":356},"41ef0130-f2f5-11ef-891c-569c3dd06744","Example with client-side React & Hono server",{"_93":357,"_129":358},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":363,"_367":368,"_499":31,"_500":27},{"_102":103,"_95":96,"_104":364,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":-5,"_118":31,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":27,"_21":365,"_131":366},["D",1740775353147],{"_93":94,"_129":130},{"_99":133,"_95":41,"_102":134,"_135":103,"_136":137,"_138":139,"_140":109,"_141":142},"history",[369,374,379,384,391,396,401,406,414,422,429],{"_148":198,"_99":133,"_104":370,"_151":134,"_330":371},["D",1742612003415],[372],{"_102":196,"_151":134,"_148":198,"_95":197,"_158":200,"_156":175,"_99":153,"_150":183,"_104":370,"_152":133,"_160":-5,"_154":116,"_159":27,"_98":373},[147,182,197],{"_148":172,"_99":173,"_104":375,"_151":134,"_330":376},["D",1742611882022],[377],{"_102":170,"_151":134,"_148":172,"_95":171,"_158":176,"_156":175,"_99":153,"_150":165,"_104":375,"_152":173,"_160":-5,"_154":116,"_159":27,"_98":378},[147,7,171],{"_148":114,"_99":222,"_104":380,"_151":134,"_330":381},["D",1742611866665],[382],{"_102":220,"_151":134,"_148":114,"_95":221,"_158":226,"_156":225,"_99":224,"_150":149,"_104":380,"_152":222,"_160":-5,"_154":116,"_159":27,"_98":383},[147,221],{"_148":172,"_99":385,"_104":386,"_151":134,"_330":387},8,["D",1742611831195],[388],{"_102":389,"_151":134,"_148":172,"_95":171,"_158":68,"_156":175,"_99":31,"_150":165,"_104":386,"_152":385,"_160":-5,"_154":27,"_159":27,"_98":390},"6b4eb412-06c8-11f0-9a5f-569c3dd06744",[147,7,171],{"_148":165,"_99":166,"_104":392,"_151":134,"_330":393},["D",1742611821543],[394],{"_102":164,"_151":134,"_148":165,"_95":7,"_158":-5,"_156":157,"_99":31,"_150":149,"_104":392,"_152":166,"_160":-5,"_154":116,"_159":27,"_98":395},[147,7],{"_148":277,"_99":278,"_104":397,"_151":134,"_330":398},["D",1742611803684],[399],{"_102":275,"_151":134,"_148":277,"_95":276,"_158":280,"_156":191,"_99":153,"_150":233,"_104":397,"_152":278,"_160":-5,"_154":116,"_159":27,"_98":400},[232,276],{"_148":286,"_99":287,"_104":402,"_151":134,"_330":403},["D",1742611790796],[404],{"_102":284,"_151":134,"_148":286,"_95":285,"_158":289,"_156":175,"_99":153,"_150":233,"_104":402,"_152":287,"_160":-5,"_154":116,"_159":27,"_98":405},[232,285],{"_148":114,"_99":224,"_104":407,"_151":134,"_330":408},["D",1742611761747],[409],{"_102":410,"_151":134,"_148":114,"_95":221,"_158":411,"_156":225,"_99":412,"_150":149,"_104":407,"_152":224,"_160":-5,"_154":27,"_159":27,"_98":413},"41ea4aa0-06c8-11f0-b667-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\";\n\n// Import your API routes\nimport googleOAuth from \"./auth/googleOAuth.ts\";\n// Later: import userApi from \"./api/user.ts\"; etc.\n\nconst app = new Hono();\n\n// 🚀 Serve frontend React shell at \"/\"\napp.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Optional: inject dynamic config into HTML (like project URL)\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n const bootstrapScript = ``;\n\n html = html.replace(\"\", `${bootstrapScript}`);\n\n return c.html(html);\n});\n\n// 📦 Serve frontend files (JSX, assets, etc.)\napp.get(\"/public/**/*\", (c) => servePublicFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n// 🛠️ Serve shared modules (e.g. from /shared)\napp.get(\"/shared/**/*\", (c) => servePublicFile(c.req.path, import.meta.url));\n\n// 🔐 Google OAuth\napp.route(\"/auth/google\", googleOAuth);\n\n// 🧰 Error handling\napp.onError((err, c) => {\n console.error(\"Unhandled error:\", err);\n return c.text(\"Internal Server Error\", 500);\n});\n\nexport default app.fetch;",3,[147,221],{"_148":114,"_99":412,"_104":415,"_151":134,"_330":416},["D",1742611650763],[417],{"_102":418,"_151":134,"_148":114,"_95":221,"_158":419,"_156":225,"_99":420,"_150":149,"_104":415,"_152":412,"_160":-5,"_154":27,"_159":27,"_98":421},"ffcbc23e-06c7-11f0-aaec-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono@3.10.1\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { 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\";\n\nconst app = new Hono();\n\n// React App Component\nfunction App() {\n const [user, setUser] = useState(null);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n // Load the Google Sign-In API\n const script = document.createElement(\"script\");\n script.src = \"https://accounts.google.com/gsi/client\";\n script.async = true;\n script.defer = true;\n document.body.appendChild(script);\n\n script.onload = initializeGoogleSignIn;\n\n return () => {\n document.body.removeChild(script);\n };\n }, []);\n\n const initializeGoogleSignIn = () => {\n window.google.accounts.id.initialize({\n client_id: \"YOUR_GOOGLE_CLIENT_ID\", // Replace with your actual Google Client ID\n callback: handleCredentialResponse,\n });\n window.google.accounts.id.renderButton(\n document.getElementById(\"googleSignInDiv\"),\n { theme: \"outline\", size: \"large\" },\n );\n };\n\n const handleCredentialResponse = async (response) => {\n try {\n const result = await fetch(\"/auth/google\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ credential: response.credential }),\n });\n const data = await result.json();\n if (data.user) {\n setUser(data.user);\n } else {\n setError(\"Failed to authenticate with Google\");\n }\n } catch (err) {\n console.error(\"Error during Google authentication:\", err);\n setError(\"An error occurred during authentication\");\n }\n };\n\n return (\n

Sign Up

\n {error &&

{error}

}\n {user\n ? (\n

Welcome, {user.name}!

Email: {user.email}

\n )\n :

}\n

\n View source\n

\n );\n}\n\n// Client-side rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Server-side code\nexport default async function server(req: Request): Promise {\n const projectVal = parseProject(import.meta.url);\n const thisProjectURL = projectVal.links.self.project;\n\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject the project URL as a global variable\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\n app.get(\"/public/**/*\", c => servePublicFile(c.req.path.replace(\"/public\", \"/frontend\"), import.meta.url));\n\n // Serve all /shared files under /shared\n app.get(\"/shared/**/*\", c => servePublicFile(c.req.path, import.meta.url));\n\n // Handle Google authentication\n app.post(\"/auth/google\", async (c) => {\n try {\n const { credential } = await c.req.json();\n // Here you would verify the Google token and extract user information\n // For demonstration purposes, we're just returning a mock user\n // In a real application, you'd use the Google API to verify the token\n return c.json({\n user: {\n name: \"John Doe\",\n email: \"johndoe@example.com\",\n },\n });\n } catch (error) {\n console.error(\"Error during Google authentication:\", error);\n return c.json({ error: \"Authentication failed\" }, 400);\n }\n });\n\n // Unwrap and rethrow Hono errors as the original error\n app.onError((err, c) => {\n throw err;\n });\n\n // Handle the request\n return app.fetch(req);\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n }\n h1 {\n color: #333;\n }\n #googleSignInDiv {\n margin-top: 20px;\n }\n`;",2,[147,221],{"_148":114,"_99":420,"_104":423,"_151":134,"_330":424},["D",1742611640597],[425],{"_102":426,"_151":134,"_148":114,"_95":221,"_158":427,"_156":225,"_99":153,"_150":149,"_104":423,"_152":420,"_160":-5,"_154":27,"_159":27,"_98":428},"f9b47238-06c7-11f0-b9a5-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();\nhttps:\n// varun1352-fitbrownswan.web.val.run\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,221],{"_148":198,"_99":153,"_104":430,"_151":134,"_330":431},["D",1740775353147],[432,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,486,491,496],{"_102":433,"_151":134,"_148":198,"_95":197,"_158":434,"_156":175,"_99":31,"_150":183,"_104":430,"_152":153,"_160":-5,"_154":27,"_159":27,"_98":435},"891e0a52-f614-11ef-9f4c-569c3dd06744","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const tableName = \"reactHonoStarter_messages\";\n\nexport async function createTables() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS ${tableName} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n /* Add any other tables or migrations you want here\n\n However, you should know that SQLite has much more limited\n support for altering existing tables as compared to other databases.\n Often it's easier to create new tables with the schema you want, and then\n copy the data over. */\n ]);\n}",[147,182,197],{"_102":204,"_151":134,"_148":206,"_95":205,"_158":208,"_156":175,"_99":31,"_150":183,"_104":437,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":438},["D",1740775353147],[147,182,205],{"_102":324,"_151":134,"_148":325,"_95":188,"_158":327,"_156":191,"_99":31,"_150":-5,"_104":440,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":441},["D",1740775353147],[188],{"_102":260,"_151":134,"_148":261,"_95":188,"_158":263,"_156":191,"_99":31,"_150":233,"_104":443,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":444},["D",1740775353147],[232,188],{"_102":213,"_151":134,"_148":214,"_95":188,"_158":216,"_156":191,"_99":31,"_150":149,"_104":446,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":447},["D",1740775353147],[147,188],{"_102":187,"_151":134,"_148":189,"_95":188,"_158":192,"_156":191,"_99":31,"_150":183,"_104":449,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":450},["D",1740775353147],[147,182,188],{"_102":308,"_151":134,"_148":309,"_95":188,"_158":311,"_156":191,"_99":31,"_150":304,"_104":452,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":453},["D",1740775353147],[303,188],{"_102":302,"_151":134,"_148":304,"_95":303,"_158":-5,"_156":157,"_99":31,"_150":-5,"_104":455,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":456},["D",1740775353147],[303],{"_102":293,"_151":134,"_148":295,"_95":294,"_158":297,"_156":191,"_99":31,"_150":233,"_104":458,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":459},["D",1740775353147],[232,294],{"_102":243,"_151":134,"_148":245,"_95":244,"_158":247,"_156":175,"_99":31,"_150":239,"_104":461,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":462},["D",1740775353147],[232,238,244],{"_102":315,"_151":134,"_148":317,"_95":316,"_158":319,"_156":175,"_99":31,"_150":304,"_104":464,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":465},["D",1740775353147],[303,316],{"_102":146,"_151":134,"_148":149,"_95":147,"_158":-5,"_156":157,"_99":31,"_150":-5,"_104":467,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":468},["D",1740775353147],[147],{"_102":237,"_151":134,"_148":239,"_95":238,"_158":-5,"_156":157,"_99":31,"_150":233,"_104":470,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":471},["D",1740775353147],[232,238],{"_102":181,"_151":134,"_148":183,"_95":182,"_158":-5,"_156":157,"_99":31,"_150":149,"_104":473,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":474},["D",1740775353147],[147,182],{"_102":267,"_151":134,"_148":269,"_95":268,"_158":271,"_156":191,"_99":31,"_150":233,"_104":476,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":477},["D",1740775353147],[232,268],{"_102":231,"_151":134,"_148":233,"_95":232,"_158":-5,"_156":157,"_99":31,"_150":-5,"_104":479,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":480},["D",1740775353147],[232],{"_102":482,"_151":134,"_148":277,"_95":276,"_158":483,"_156":191,"_99":31,"_150":233,"_104":484,"_152":153,"_160":-5,"_154":27,"_159":27,"_98":485},"891f1c80-f614-11ef-9f4c-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n",["D",1740775353147],[232,276],{"_102":487,"_151":134,"_148":114,"_95":221,"_158":488,"_156":225,"_99":31,"_150":149,"_104":489,"_152":153,"_160":-5,"_154":27,"_159":27,"_98":490},"891f1104-f614-11ef-9f4c-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;",["D",1740775353147],[147,221],{"_102":492,"_151":134,"_148":286,"_95":285,"_158":493,"_156":175,"_99":31,"_150":233,"_104":494,"_152":153,"_160":-5,"_154":27,"_159":27,"_98":495},"891f1d7a-f614-11ef-9f4c-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\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n initialMessages?: Message[];\n thisProjectURL?: string;\n };\n }\n}\n\ncreateRoot(root).render();",["D",1740775353147],[232,285],{"_102":251,"_151":134,"_148":253,"_95":252,"_158":255,"_156":175,"_99":31,"_150":239,"_104":497,"_152":153,"_160":-5,"_154":116,"_159":27,"_98":498},["D",1740775353147],[232,238,252],"page","hasNext","routes/_app","actionData","errors"]

History