💬 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}",[],[224,232,239],{"_103":248,"_95":249,"_156":250,"_158":233,"_159":141,"_160":251,"_162":118,"_105":252,"_100":185,"_165":197,"_167":253,"_168":22,"_169":-5,"_170":254,"_98":255},"34abf3c8-f2fc-11ef-a6a5-569c3dd06744","MessageInput.tsx","5056705e-f2f6-11ef-9d1d-569c3dd06744",87,["D",1740435050106],"/** @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}",[],[224,232,249],[224,232],{"_103":258,"_95":181,"_156":259,"_158":225,"_159":141,"_160":140,"_162":118,"_105":260,"_100":261,"_165":186,"_167":262,"_168":22,"_169":-5,"_170":263,"_98":264},"6cffa980-7a0c-11f0-948e-0224a6c84d84","291f68ac-f39a-11ef-af83-569c3dd06744",["D",1755285423526],11,"# Frontend\n\nThis template is a classic client-side-only React app.\n\n## `index.html`\n\nThe **entrypoint** for the frontend is\n[`/frontend/index.html`](/frontend/index.html). This is the HTML page that is\nreturned at the root from [`../index.ts`](../index.ts).\n\nThis HTML file imports `/frontend/style.css` from [`/public/style.css`] and\n`/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/`\nis mapped to `/public` by `/backend/index.ts`. This is just a convention. You\ncould import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React\napp.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is\nthe **entrypoint** for all frontend JavaScript, including all the React. It is\nnot a problem that it imports a file with a `.tsx` extension becaues browsers\nignore file extensions. They only pay attention to content-types, which is\ngreat, because all these files will be returned as transpiled JS with the\nappropriate JS content type by\n[std/utils](https://www.val.town/x/std/utils/code) functions.\n\n## [`index.tsx`](./index.tsx)\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React\napp from `/frontend/components/App.tsx` and mounts it on\n`

`.\n\nIt also looks for _bootstrapped_ JSON data at `window.__INITIAL_DATA`, and\npasses that only to the ``.\n\n## [`favicon.svg`](./favicon.svg)\n\nAs of this writing Val Town only supports text files, which is why the favicon\nis an SVG and not an .ico or any other binary image format. If you need binary\nfile 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\nclient-side React components.",[],[224,181],{"_103":266,"_95":267,"_156":268,"_158":225,"_159":141,"_160":269,"_162":118,"_105":270,"_100":271,"_165":186,"_167":272,"_168":22,"_169":-5,"_170":273,"_98":274},"d7f55e56-f2f8-11ef-9d58-569c3dd06744","favicon.svg","28592b82-f2f6-11ef-b93c-569c3dd06744",55,["D",1740433606067],4,"",[],[224,267],{"_103":276,"_95":277,"_156":278,"_158":225,"_159":141,"_160":279,"_162":118,"_105":280,"_100":196,"_165":186,"_167":281,"_168":22,"_169":-5,"_170":282,"_98":283},"d659e4d4-f85e-11ef-9bf4-569c3dd06744","index.html","fa727010-f2f6-11ef-8454-569c3dd06744",221,["D",1741027167849],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[224,277],{"_103":285,"_95":286,"_156":287,"_158":225,"_159":141,"_160":288,"_162":118,"_105":289,"_100":196,"_165":197,"_167":290,"_168":22,"_169":-5,"_170":291,"_98":292},"2407e006-f39a-11ef-b44e-569c3dd06744","index.tsx","1f08cb6e-f2f6-11ef-911c-569c3dd06744",201,["D",1740502882672],"/** @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();",[],[224,286],{"_103":294,"_95":295,"_156":296,"_158":225,"_159":141,"_160":297,"_162":118,"_105":298,"_100":299,"_165":186,"_167":300,"_168":22,"_169":-5,"_170":301,"_98":302},"a905a9ae-f2fb-11ef-8e47-569c3dd06744","style.css","2f0a17f2-f2f6-11ef-8e90-569c3dd06744",78,["D",1740434815814],3,"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}",[],[224,295],[224],{"_103":305,"_95":306,"_156":307,"_158":-5,"_159":141,"_160":308,"_162":118,"_105":309,"_100":164,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":310,"_98":328},"3f9503a4-f2f9-11ef-95c3-569c3dd06744","shared","3ce3cdd4-f2f9-11ef-9369-569c3dd06744",59,["D",1740433779920],[311,319],{"_103":312,"_95":181,"_156":313,"_158":307,"_159":141,"_160":314,"_162":118,"_105":315,"_100":121,"_165":186,"_167":316,"_168":22,"_169":-5,"_170":317,"_98":318},"da0828d0-f399-11ef-881b-569c3dd06744","9718f9d2-f38f-11ef-a585-569c3dd06744",199,["D",1740502758520],"# 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.",[],[306,181],{"_103":320,"_95":321,"_156":322,"_158":307,"_159":141,"_160":323,"_162":118,"_105":324,"_100":185,"_165":197,"_167":325,"_168":22,"_169":-5,"_170":326,"_98":327},"aa31c0bc-f385-11ef-b5a8-569c3dd06744","utils.ts","422343a6-f2f9-11ef-981f-569c3dd06744",123,["D",1740494088329],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[306,321],[306],{"_103":330,"_95":181,"_156":331,"_158":-5,"_159":141,"_160":332,"_162":118,"_105":333,"_100":334,"_165":186,"_167":335,"_168":22,"_169":-5,"_170":336,"_98":337},"b0be0b68-7a0b-11f0-917e-0224a6c84d84","4346a22c-f2f5-11ef-891c-569c3dd06744",235,["D",1755285107685],18,"# 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\nitself is a simple persistent message board.\n\nThe entrypoint of this app is [`index.ts`](./index.ts), which is the Hono HTTP\nserver, which serves the HTML, CSS, and JS, which run client-side.\n\nThis app is broken up into three folders, corresponding to where the code in\nthose 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\nYou can click into each of those folders to view their respective READMEs.",[],[181],{"_103":339,"_95":340,"_156":116,"_158":-5,"_159":141,"_160":341,"_162":118,"_105":342,"_100":343,"_165":344,"_167":345,"_168":22,"_169":-5,"_170":346,"_98":347},"93d9ae76-7a0b-11f0-8619-0224a6c84d84","index.ts",234,["D",1755285059213],57,"http","import {\n parseVal,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { getMessages, insertMessage } from \"./backend/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\");\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 = parseVal(import.meta.url);\n const thisProjectURL = projectVal.links.self.val;\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(\n \"/public/**/*\",\n (c) => serveFile(c.req.path.replace(\"/public\", \"/frontend\")),\n);\n\n// Serve all /shared files under /shared\napp.get(\"/shared/**/*\", (c) => serveFile(c.req.path));\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) => 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;",[],[340],"files",[153,172,179,190,201,212,222,230,237,247,257,265,275,284,293,304,311,319,329,338],"counts",{"_352":32,"_353":299,"_354":234,"_355":32},"pulls","branches","forks","envVars","contents",[],{"_103":180,"_95":181,"_156":182,"_158":175,"_159":141,"_160":183,"_162":118,"_105":359,"_100":185,"_165":186,"_167":187,"_168":22,"_169":-5,"_98":360},["D",1755285199794],[155,174,181],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":369,"_186":374,"_377":378,"_416":417,"_427":-7,"_428":32,"_429":22},{"_103":104,"_95":96,"_105":370,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":371,"_135":372,"_138":373,"_150":22},["D",1740432065884],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_103":141,"_142":104,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},{"_103":180,"_95":181,"_156":182,"_158":175,"_159":141,"_160":183,"_162":118,"_105":375,"_100":185,"_165":186,"_167":187,"_168":22,"_169":-5,"_98":376},["D",1755285199794],[155,174,181],"history",[379,381,387,392,397,402,407,411],{"_103":180,"_159":141,"_156":182,"_95":181,"_167":187,"_165":186,"_100":185,"_158":175,"_105":380,"_160":183,"_169":-5},["D",1755285199794],{"_103":382,"_159":141,"_156":182,"_95":181,"_167":383,"_165":186,"_100":384,"_158":175,"_105":385,"_160":386,"_169":-5},"9d2baa0e-f38a-11ef-be82-569c3dd06744","# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.\n\nThe queries file exports functions to get and write data. It relies on shared types and data imported from the `/shared` directory.",6,["D",1740496213962],166,{"_103":388,"_159":141,"_156":182,"_95":181,"_167":389,"_165":186,"_100":121,"_158":175,"_105":390,"_160":391,"_169":-5},"97c005ec-f38a-11ef-aa30-569c3dd06744","# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.\n\nThe queries file exports functions to get and write data. It relies on shared types imports from the `/shared` directory.",["D",1740496204867],165,{"_103":393,"_159":141,"_156":182,"_95":181,"_167":394,"_165":186,"_100":271,"_158":175,"_105":395,"_160":396,"_169":-5},"8f1e010a-f38a-11ef-bd82-569c3dd06744","# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also be reasonable for that to happen in index.ts, or as is said above, for that line to be commented out, and only run when actual changes are made to your database schema.\n\nThe queries file exports functions to get and write data.",["D",1740496190382],164,{"_103":398,"_159":141,"_156":182,"_95":181,"_167":399,"_165":186,"_100":299,"_158":175,"_105":400,"_160":401,"_169":-5},"6209b70e-f38a-11ef-93d7-569c3dd06744","# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to other databases. Often it's easier to create new tables with the schema you want, and then copy the data over. Happily LLMs are quite good at those sort of database operations, but please reach out in the [Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries",["D",1740496114754],163,{"_103":403,"_159":141,"_156":182,"_95":181,"_167":404,"_165":186,"_100":228,"_158":175,"_105":405,"_160":406,"_169":-5},"33c69632-f38a-11ef-adaf-569c3dd06744","# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage data. Every Val Town account comes with a free SQLite database, hosted on [Turso](https://turso.tech/). This folder is broken up into two files:\n\n* `migrations.ts` - code to set up the database tables the app needs\n* `queries.ts` - functions to run queries against those tables, which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. \n\nThis \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.",["D",1740496037136],162,{"_103":408,"_159":141,"_156":182,"_95":181,"_167":72,"_165":186,"_100":164,"_158":175,"_105":409,"_160":410,"_169":-5},"f931abc4-f389-11ef-b7c3-569c3dd06744",["D",1740495938849],161,{"_103":412,"_159":141,"_156":182,"_95":413,"_167":72,"_165":186,"_100":32,"_158":175,"_105":414,"_160":415,"_169":-5},"f669cf20-f389-11ef-91df-569c3dd06744","healthyOrangeWhitefish",["D",1740495934193],160,"versions",[418,420,421,422,423,424,425,426],{"_186":379,"_419":381},"previous",{"_186":381,"_419":387},{"_186":387,"_419":392},{"_186":392,"_419":397},{"_186":397,"_419":402},{"_186":402,"_419":407},{"_186":407,"_419":411},{"_186":411,"_419":-5},"versionNumber","page","hasNext","actionData","errors"]

History for README.md