💬 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}",[],[220,227,234],{"_104":242,"_96":243,"_143":244,"_145":228,"_146":134,"_147":245,"_149":118,"_106":246,"_101":247,"_152":183,"_154":248,"_155":26,"_156":249,"_99":250},"34abf3c8-f2fc-11ef-a6a5-569c3dd06744","MessageInput.tsx","5056705e-f2f6-11ef-9d1d-569c3dd06744",87,["D",1740435050106],7,"/** @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}",[],[220,227,243],[220,227],{"_104":253,"_96":167,"_143":254,"_145":221,"_146":134,"_147":255,"_149":118,"_106":256,"_101":247,"_152":172,"_154":257,"_155":26,"_156":258,"_99":259},"76a88448-f39d-11ef-94f2-569c3dd06744","291f68ac-f39a-11ef-af83-569c3dd06744",214,["D",1740504309787],"# 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.",[],[220,167],{"_104":261,"_96":262,"_143":263,"_145":221,"_146":134,"_147":264,"_149":118,"_106":265,"_101":266,"_152":172,"_154":267,"_155":26,"_156":268,"_99":269},"d7f55e56-f2f8-11ef-9d58-569c3dd06744","favicon.svg","28592b82-f2f6-11ef-b93c-569c3dd06744",55,["D",1740433606067],4,"",[],[220,262],{"_104":271,"_96":272,"_143":273,"_145":221,"_146":134,"_147":274,"_149":118,"_106":275,"_101":182,"_152":172,"_154":276,"_155":26,"_156":277,"_99":278},"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",[],[220,272],{"_104":280,"_96":281,"_143":282,"_145":221,"_146":134,"_147":283,"_149":118,"_106":284,"_101":182,"_152":183,"_154":285,"_155":26,"_156":286,"_99":287},"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();",[],[220,281],{"_104":289,"_96":290,"_143":291,"_145":221,"_146":134,"_147":292,"_149":118,"_106":293,"_101":294,"_152":172,"_154":295,"_155":26,"_156":296,"_99":297},"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}",[],[220,290],[220],{"_104":300,"_96":301,"_143":302,"_145":-5,"_146":134,"_147":303,"_149":118,"_106":304,"_101":151,"_152":153,"_154":-5,"_155":26,"_156":305,"_99":324},"3f9503a4-f2f9-11ef-95c3-569c3dd06744","shared","3ce3cdd4-f2f9-11ef-9369-569c3dd06744",59,["D",1740433779920],[306,315],{"_104":307,"_96":167,"_143":308,"_145":302,"_146":134,"_147":309,"_149":118,"_106":310,"_101":311,"_152":172,"_154":312,"_155":26,"_156":313,"_99":314},"da0828d0-f399-11ef-881b-569c3dd06744","9718f9d2-f38f-11ef-a585-569c3dd06744",199,["D",1740502758520],5,"# 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.",[],[301,167],{"_104":316,"_96":317,"_143":318,"_145":302,"_146":134,"_147":319,"_149":118,"_106":320,"_101":247,"_152":183,"_154":321,"_155":26,"_156":322,"_99":323},"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;",[],[301,317],[301],{"_104":326,"_96":167,"_143":327,"_145":-5,"_146":134,"_147":328,"_149":118,"_106":329,"_101":330,"_152":172,"_154":331,"_155":26,"_156":332,"_99":333},"2896a9e0-f39f-11ef-8888-569c3dd06744","4346a22c-f2f5-11ef-891c-569c3dd06744",217,["D",1740505037800],13,"# 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.",[],[167],"files",[140,158,165,176,187,198,207,218,225,232,241,252,260,270,279,288,299,306,315,325],"counts",{"_338":32,"_339":294,"_340":171,"_341":32},"pulls","branches","forks","envVars","contents",[],{"_104":199,"_96":167,"_143":200,"_145":144,"_146":134,"_147":201,"_149":118,"_106":345,"_101":203,"_152":172,"_154":204,"_155":26,"_99":346},["D",1740753931220],[142,167],"upstream","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_94":95,"_96":97,"_98":42,"_99":100,"_102":350,"_172":354,"_357":358,"_444":445},{"_104":105,"_96":97,"_106":351,"_108":-5,"_109":110,"_111":112,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":26,"_20":352,"_131":353},["D",1740432065884],{"_94":95,"_129":130},{"_101":133,"_96":42,"_104":134,"_135":105,"_136":-5,"_137":-5},{"_104":199,"_96":167,"_143":200,"_145":144,"_146":134,"_147":201,"_149":118,"_106":355,"_101":203,"_152":172,"_154":204,"_155":26,"_99":356},["D",1740753931220],[142,167],"history",[359,361,367,373,378,383,389,394,400,405,410,415,420,425,430,435,439],{"_104":199,"_143":200,"_96":167,"_152":172,"_154":204,"_145":144,"_146":134,"_101":203,"_147":201,"_155":26,"_106":360,"_149":118},["D",1740753931220],{"_104":362,"_143":200,"_96":167,"_152":172,"_154":363,"_145":144,"_146":134,"_101":364,"_147":365,"_155":26,"_106":366,"_149":26},"4c41e714-f39b-11ef-af57-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. \n\nWe *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",15,210,["D",1740503379657],{"_104":368,"_143":200,"_96":167,"_152":172,"_154":369,"_145":144,"_146":134,"_101":370,"_147":371,"_155":26,"_106":372,"_149":26},"46b0633e-f39b-11ef-bbbf-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. \n\nWe *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",14,209,["D",1740503370314],{"_104":374,"_143":200,"_96":167,"_152":172,"_154":375,"_145":144,"_146":134,"_101":330,"_147":376,"_155":26,"_106":377,"_149":26},"db3a2c18-f398-11ef-ad3d-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.tsx` file which mounts our client-side react component. (Browsers ignore file extensions, which is great, because all these files will be returned as transpiled JS with the JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",196,["D",1740502331025],{"_104":379,"_143":200,"_96":167,"_152":172,"_154":380,"_145":144,"_146":134,"_101":182,"_147":381,"_155":26,"_106":382,"_149":26},"d793acb0-f398-11ef-8a5c-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.tsx` file which mounts our client-side react component. (Browsers ignore file extensions, which is great, because all these files will be returned as transpiled JS with the JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",195,["D",1740502324904],{"_104":384,"_143":200,"_96":167,"_152":172,"_154":385,"_145":144,"_146":134,"_101":386,"_147":387,"_155":26,"_106":388,"_149":26},"cd3ddf74-f398-11ef-88a8-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.tsx` file which mounts our client-side react component. (Browsers ignore file extensions, which is great, because all these files will be returned as transpiled JS with the JS content type by [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",11,194,["D",1740502307566],{"_104":390,"_143":200,"_96":167,"_152":172,"_154":391,"_145":144,"_146":134,"_101":222,"_147":392,"_155":26,"_106":393,"_149":26},"c8b7bf10-f398-11ef-8dbc-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### index.html\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.tsx` file which mounts our client-side react component. (Browsers ignore file extensions, which is great, because all these files will be returned as transpiled JS with the JS content type by [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",193,["D",1740502299974],{"_104":395,"_143":200,"_96":167,"_152":172,"_154":396,"_145":144,"_146":134,"_101":397,"_147":398,"_155":26,"_106":399,"_149":26},"bd78a3da-f398-11ef-9ab9-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and assigns content-types based on the file's extension.\n\n### index.html\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.tsx` file which mounts our client-side react component. (Browsers ignore file extensions, which is great, because all these files will be returned as transpiled JS with the JS content type by [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",9,192,["D",1740502281105],{"_104":401,"_143":200,"_96":167,"_152":172,"_154":402,"_145":144,"_146":134,"_101":148,"_147":403,"_155":26,"_106":404,"_149":26},"0a0155e4-f38f-11ef-b95e-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and attempts to handle content-types and various `.tsx` vs `.js` confusions.\n\n### index.html\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.js` file which mounts our client-side react component. (You may note that no `index.js` file exists in this project. Instead we wrote an `index.tsx` file and `@stevekrouse/utils/serve-public` handles retrieving it as a `.js` file.)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. This routes are called from the React app to refresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off this default behavior by re-throwing errors, because we think most of the time you'll want to see the full stack trace instead of merely \"Internal Server Error\". You can customize how you want errors to appear.",187,["D",1740498114541],{"_104":406,"_143":200,"_96":167,"_152":172,"_154":407,"_145":144,"_146":134,"_101":247,"_147":408,"_155":26,"_106":409,"_149":26},"a9c0108a-f38e-11ef-abaf-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and attempts to handle content-types and various `.tsx` vs `.js` confusions.\n\n### index.html\n\nThe most complicated part of this backend API is serving index.html. In this app (like most apps) we serve it at the root, ie `GET /`. This html file in turn imports the core `index.js` file which mounts our client-side react component. (You may note that no `index.js` file exists in this project. Instead we wrote an `index.tsx` file and `@stevekrouse/utils/serve-public` handles retrieving it as a `.js` file.)\n\nWhat also makes serving `index.html` complicated is that we *bootstrap* it with some data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data. This is a common pattern for client-side rendered apps.\n\n### Binary assets\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/).",186,["D",1740497953051],{"_104":411,"_143":200,"_96":167,"_152":172,"_154":412,"_145":144,"_146":134,"_101":171,"_147":413,"_155":26,"_106":414,"_149":26},"3bee1d00-f38d-11ef-9409-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a API framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.\n\nIn a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. \n\nHowever in Val Town you need to handle this yourself, and it can be suprisingly difficult to read and serve files in a Val Town Project. This template uses helper functions from [@stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md), which handle reading project files in a way that will work across branches and forks, automatically transpiles typescript to javascript, and attempts to handle content-types and various `.tsx` vs `.js` confusions.\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/).",177,["D",1740497339310],{"_104":416,"_143":200,"_96":167,"_152":172,"_154":417,"_145":144,"_146":134,"_101":311,"_147":418,"_155":26,"_106":419,"_149":26},"840f59d8-f38c-11ef-8506-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a server application framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis HTML server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG. As 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/).",176,["D",1740497030816],{"_104":421,"_143":200,"_96":167,"_152":172,"_154":422,"_145":144,"_146":134,"_101":266,"_147":423,"_155":26,"_106":424,"_149":26},"103ada0a-f38c-11ef-b9d9-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) has the a server application framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nTODO",175,["D",1740496836496],{"_104":426,"_143":200,"_96":167,"_152":172,"_154":427,"_145":144,"_146":134,"_101":294,"_147":428,"_155":26,"_106":429,"_149":26},"c378fee2-f389-11ef-b61f-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n### Hono\n\nThis app uses [Hono](https://hono.dev/) has the a server application framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.",155,["D",1740495848726],{"_104":431,"_143":200,"_96":167,"_152":172,"_154":432,"_145":144,"_146":134,"_101":91,"_147":433,"_155":26,"_106":434,"_149":26},"bbbfbb3c-f389-11ef-87b0-569c3dd06744","# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n* `index.ts` - this is the **entrypoint** for this whole project\n* `database/` - this contains the code for interfacing with the app's SQLite database table\n\n### Hono\n\nThis app uses [Hono](https://hono.dev/) has the a server application framework. You can think of Hono as a replacement for [ExpressJS](https://expressjs.com/) that works in serverless environments like Val Town or Cloudflare Workers. If you come from Python or Ruby, Hono is also a lot like [Flask](https://github.com/pallets/flask) or [Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n### SQLite\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/). In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. This \"migration\" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.",154,["D",1740495835768],{"_104":436,"_143":200,"_96":167,"_152":172,"_154":67,"_145":144,"_146":134,"_101":151,"_147":437,"_155":26,"_106":438,"_149":26},"4a41c36a-f389-11ef-a0d7-569c3dd06744",152,["D",1740495645357],{"_104":440,"_143":200,"_96":441,"_152":172,"_154":67,"_145":144,"_146":134,"_101":32,"_147":442,"_155":26,"_106":443,"_149":26},"4698332a-f389-11ef-9c27-569c3dd06744","sincereMoccasinRat",151,["D",1740495639218],"versions",[446,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463],{"_172":359,"_447":361},"previous",{"_172":361,"_447":367},{"_172":367,"_447":373},{"_172":373,"_447":378},{"_172":378,"_447":383},{"_172":383,"_447":389},{"_172":389,"_447":394},{"_172":394,"_447":400},{"_172":400,"_447":405},{"_172":405,"_447":410},{"_172":410,"_447":415},{"_172":415,"_447":420},{"_172":420,"_447":425},{"_172":425,"_447":430},{"_172":430,"_447":435},{"_172":435,"_447":439},{"_172":439,"_447":-5},"routes/_app","actionData","errors"]

History for README.md