💬 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}",[],[244,250,256],{"_105":265,"_98":266,"_154":267,"_156":251,"_157":137,"_158":268,"_160":161,"_107":269,"_102":200,"_163":191,"_165":270,"_166":25,"_167":-5,"_168":271,"_101":272},"04a074ee-4895-11f0-bf11-76b3cceeab13","MessageInput.tsx","f4204128-80e3-4618-88b0-b489ab57afe9",66,["D",1749846531331],"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { usePostMessage } from \"../lib/queries.ts\";\n\nexport function MessageInput() {\n const [message, setMessage] = React.useState(\"\");\n const postMessage = usePostMessage();\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n await postMessage.mutateAsync(message);\n setMessage(\"\");\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 className=\"flex-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n \n );\n}",[],[244,250,266],[244,250],{"_105":275,"_98":276,"_154":277,"_156":245,"_157":137,"_158":278,"_160":161,"_107":279,"_102":29,"_163":164,"_165":-5,"_166":25,"_167":-5,"_168":280,"_101":289},"74f9bb74-4890-11f0-a41d-76b3cceeab13","lib","74f9bc1e-4890-11f0-a41d-76b3cceeab13",22,["D",1749844572344],[281],{"_105":282,"_98":206,"_154":283,"_156":277,"_157":137,"_158":284,"_160":161,"_107":285,"_102":200,"_163":191,"_165":286,"_166":25,"_167":-5,"_168":287,"_101":288},"f06c8a7e-4896-11f0-8456-76b3cceeab13","34872dc0-4894-11f0-bbed-76b3cceeab13",92,["D",1749847356433],"import { useQuery, useMutation, useQueryClient } from \"https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19\";\nimport { type Message } from \"../../shared/utils.ts\";\n\n// Fetch messages query\nexport function useMessages(initialData?: Message[]) {\n return useQuery({\n queryKey: [\"messages\"],\n queryFn: async () => {\n const response = await fetch(\"/api/messages\");\n if (!response.ok) {\n throw new Error(\"Failed to fetch messages\");\n }\n const data = await response.json();\n return data.reverse() as Message[];\n },\n initialData,\n staleTime: 30 * 1000, // 30 seconds\n });\n}\n\n// Post message mutation\nexport function usePostMessage() {\n const queryClient = useQueryClient();\n \n return useMutation({\n mutationFn: async (content: string) => {\n const response = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content }),\n });\n \n if (!response.ok) {\n throw new Error(\"Failed to post message\");\n }\n \n return response.json();\n },\n onSuccess: () => {\n // Invalidate and refetch messages\n queryClient.invalidateQueries({ queryKey: [\"messages\"] });\n },\n });\n}",[],[244,276,206],[244,276],{"_105":291,"_98":178,"_154":292,"_156":245,"_157":137,"_158":159,"_160":161,"_107":293,"_102":29,"_163":181,"_165":294,"_166":25,"_167":-5,"_168":295,"_101":296},"00bf5992-488d-11f0-8815-76b3cceeab13","0d80abf5-81dc-4f00-8cdb-801bb4f30d9c",["D",1749843088792],"# 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.",[],[244,178],{"_105":298,"_98":299,"_154":300,"_156":245,"_157":137,"_158":159,"_160":161,"_107":301,"_102":29,"_163":181,"_165":302,"_166":25,"_167":-5,"_168":303,"_101":304},"00bf5b9a-488d-11f0-8815-76b3cceeab13","favicon.svg","269d4697-07e9-4d11-bb4f-828090903775",["D",1749843088792],"",[],[244,299],{"_105":306,"_98":307,"_154":308,"_156":245,"_157":137,"_158":309,"_160":161,"_107":310,"_102":311,"_163":181,"_165":312,"_166":25,"_167":-5,"_168":313,"_101":314},"bd34648c-488d-11f0-b6cb-76b3cceeab13","index.html","fafbb8e7-6b0d-44de-8ee4-80172c0dbd39",8,["D",1749843405031],3,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[244,307],{"_105":316,"_98":317,"_154":318,"_156":245,"_157":137,"_158":319,"_160":161,"_107":320,"_102":200,"_163":191,"_165":321,"_166":25,"_167":-5,"_168":322,"_101":323},"27a89196-4896-11f0-90bb-76b3cceeab13","index.tsx","9776f79c-2e7c-4640-af2e-85d18ddd7af9",87,["D",1749847019606],"/** @jsxImportSource https://esm.sh/react@19 */\nimport { createRoot } from \"https://esm.sh/react-dom@19/client?deps=react@19\";\nimport { type Message } from \"../shared/utils.ts\";\nimport { RouterApp } from \"./router.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();",[],[244,317],{"_105":325,"_98":326,"_154":327,"_156":245,"_157":137,"_158":328,"_160":161,"_107":329,"_102":330,"_163":191,"_165":331,"_166":25,"_167":-5,"_168":332,"_101":333},"133b35f6-4896-11f0-a9d5-76b3cceeab13","router.tsx","ed120fa0-4893-11f0-ba02-76b3cceeab13",83,["D",1749846985333],18,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport {\n RootRoute,\n Route,\n Outlet,\n createRouter,\n RouterProvider,\n} from \"https://esm.sh/@tanstack/react-router@^1.121.0?deps=react@19\";\nimport {\n QueryClient,\n QueryClientProvider,\n} from \"https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19\";\nimport { App } from \"./components/App.tsx\";\n\n// Create a query client\nconst queryClient = new QueryClient({\n defaultOptions: {\n queries: {\n staleTime: 60 * 1000, // 1 minute\n refetchOnWindowFocus: false,\n },\n },\n});\n\n// Root route with layout\nconst rootRoute = new RootRoute({\n component: () => {\n return (\n

\n \n

\n );\n },\n});\n\n// Home route - the message board\nconst homeRoute = new Route({\n getParentRoute: () => rootRoute,\n path: \"/\",\n component: () => {\n // Get initial data from window if available\n const initialData = window.__INITIAL_DATA__ || {};\n \n return ;\n },\n});\n\n// Create the route tree\nconst routeTree = rootRoute.addChildren([homeRoute]);\n\n// Create the router\nexport const router = createRouter({ \n routeTree,\n defaultPreload: \"intent\",\n});\n\n// Register the router for TypeScript\ndeclare module \"@tanstack/react-router\" {\n interface Register {\n router: typeof router;\n }\n}\n\n// Export the RouterProvider component with QueryClient\nexport function RouterApp() {\n return (\n \n \n \n );\n}",[],[244,326],[244],{"_105":336,"_98":337,"_154":338,"_156":-5,"_157":137,"_158":159,"_160":161,"_107":339,"_102":29,"_163":164,"_165":-5,"_166":25,"_167":-5,"_168":340,"_101":356},"00bf67ca-488d-11f0-8815-76b3cceeab13","shared","34c1963a-864e-4e0a-8c91-ebc25957268c",["D",1749843088792],[341,348],{"_105":342,"_98":178,"_154":343,"_156":338,"_157":137,"_158":159,"_160":161,"_107":344,"_102":29,"_163":181,"_165":345,"_166":25,"_167":-5,"_168":346,"_101":347},"00bf64fa-488d-11f0-8815-76b3cceeab13","75b5b13f-9093-45d4-a868-e766db29c30b",["D",1749843088792],"# 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.",[],[337,178],{"_105":349,"_98":350,"_154":351,"_156":338,"_157":137,"_158":159,"_160":161,"_107":352,"_102":29,"_163":191,"_165":353,"_166":25,"_167":-5,"_168":354,"_101":355},"00bf6676-488d-11f0-8815-76b3cceeab13","utils.ts","c5806529-a593-4f6f-9f09-ace8e5da887f",["D",1749843088792],"export interface Message {\n content: string;\n}\n\nexport const MESSAGE_LIMIT = 5;",[],[337,350],[337],{"_105":358,"_98":359,"_154":360,"_156":-5,"_157":137,"_158":210,"_160":161,"_107":361,"_102":29,"_163":181,"_165":362,"_166":25,"_167":-5,"_168":363,"_101":364},"5aebb79e-488d-11f0-ab14-76b3cceeab13",".vtignore","5aebb8a2-488d-11f0-ab14-76b3cceeab13",["D",1749843240140],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[359],{"_105":366,"_98":178,"_154":367,"_156":-5,"_157":137,"_158":368,"_160":161,"_107":369,"_102":370,"_163":181,"_165":371,"_166":25,"_167":-5,"_168":372,"_101":373},"f509955e-4896-11f0-86f7-76b3cceeab13","907a0a47-fa94-45c6-91bf-50a92ed1739f",93,["D",1749847364162],4,"# React + TanStack + Hono Val Town Project\n\nFull-stack message board built for Val Town.\n\n## Tech Stack\n\n### Backend\n- Hono web framework\n- Drizzle ORM with SQLite\n- Deno runtime\n\n### Frontend\n- React 19\n- TanStack Router (code-first routing)\n- TanStack Query (server state management)\n- Tailwind CSS\n- TypeScript\n\n## Features\n\n- Message board with persistent storage\n- Client-side routing\n- Optimistic updates\n- Server-side data injection\n- Type-safe database operations\n\n## Project Structure\n\n```\n├── backend/ # Hono server running on Val Town\n│ ├── database/ # Drizzle schema, migrations, and queries\n│ └── index.ts # Main Hono application\n├── frontend/ # React app running in browser\n│ ├── components/ # React components\n│ ├── lib/ # Utilities and hooks\n│ └── router.tsx # TanStack Router configuration\n└── shared/ # Code shared between frontend and backend\n```\n\n## API Endpoints\n\n- `GET /` - Serves the React application with initial data\n- `GET /api/messages` - Fetch all messages (JSON)\n- `POST /api/messages` - Create a new message\n- `GET /public/**` - Static assets (CSS, JS, etc.)\n- `/*` - All other routes handled by TanStack Router\n\n## Val Town Constraints\n\n- Read-only filesystem after deployment\n- ESM imports via esm.sh for npm packages\n- Code-first routing (no file-based routing)\n\n## Implementation\n\n### Router\n```tsx\nconst homeRoute = new Route({\n getParentRoute: () => rootRoute,\n path: \"/\",\n component: () => \n});\n```\n\n### Query\n```tsx\nexport function usePostMessage() {\n return useMutation({\n mutationFn: (content: string) => postMessage(content),\n onSuccess: () => {\n queryClient.invalidateQueries({ queryKey: [\"messages\"] });\n },\n });\n}\n```\n\n### Schema\n```tsx\nexport const messages = sqliteTable(\"messages\", {\n id: integer(\"id\").primaryKey({ autoIncrement: true }),\n content: text(\"content\").notNull(),\n timestamp: text(\"timestamp\").notNull().default(new Date().toISOString()),\n});\n```",[],[178],{"_105":375,"_98":376,"_154":377,"_156":-5,"_157":137,"_158":311,"_160":161,"_107":378,"_102":29,"_163":181,"_165":379,"_166":25,"_167":-5,"_168":380,"_101":381},"5af79988-488d-11f0-8b31-76b3cceeab13","deno.json","5af79a28-488d-11f0-8b31-76b3cceeab13",["D",1749843240140],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[376],"files",[151,170,176,185,195,204,214,224,231,242,248,254,264,274,281,290,297,305,315,324,335,341,348,357,365,374],"counts",{"_386":29,"_387":159,"_388":311,"_389":29},"pulls","branches","forks","envVars","contents",[392,395,398,401,404,407],{"_105":152,"_98":153,"_154":155,"_156":-5,"_157":137,"_158":159,"_160":161,"_107":393,"_102":29,"_163":164,"_165":-5,"_166":25,"_167":-5,"_101":394},["D",1749843088792],[153],{"_105":243,"_98":244,"_154":245,"_156":-5,"_157":137,"_158":159,"_160":161,"_107":396,"_102":29,"_163":164,"_165":-5,"_166":25,"_167":-5,"_101":397},["D",1749843088792],[244],{"_105":336,"_98":337,"_154":338,"_156":-5,"_157":137,"_158":159,"_160":161,"_107":399,"_102":29,"_163":164,"_165":-5,"_166":25,"_167":-5,"_101":400},["D",1749843088792],[337],{"_105":358,"_98":359,"_154":360,"_156":-5,"_157":137,"_158":210,"_160":161,"_107":402,"_102":29,"_163":181,"_165":362,"_166":25,"_167":-5,"_101":403},["D",1749843240140],[359],{"_105":366,"_98":178,"_154":367,"_156":-5,"_157":137,"_158":368,"_160":161,"_107":405,"_102":370,"_163":181,"_165":371,"_166":25,"_167":-5,"_101":406},["D",1749847364162],[178],{"_105":375,"_98":376,"_154":377,"_156":-5,"_157":137,"_158":311,"_160":161,"_107":408,"_102":29,"_163":181,"_165":379,"_166":25,"_167":-5,"_101":409},["D",1749843240140],[376],"upstreamProject",{"_105":412,"_98":413,"_113":414,"_114":-5,"_111":112,"_19":415},"41ef0130-f2f5-11ef-891c-569c3dd06744","reactHonoExample","Example with client-side React & Hono server",{"_96":416,"_132":417},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_105":140,"_107":420,"_421":422,"_98":40,"_138":412,"_102":142,"_139":-5,"_141":-5,"_423":424,"_109":-5,"_148":25,"_111":112,"_147":416,"_14":425,"_146":413},["D",1740432065884],"updatedAt",["D",1746204517166],"lockfileKey","1746204517590-esm.town_v_stevekrouse_reactHonoExample@228-main","e81e7335-6d4c-4764-a902-d0962bbfa9f7","emptyEnvVars","isNew","routes/_app.x.$handle.$name.environment-variables",{"_96":97,"_98":99,"_103":430,"_389":434},{"_105":106,"_98":99,"_107":431,"_109":-5,"_110":25,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":-5,"_117":25,"_118":-5,"_119":120,"_14":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_19":432,"_134":433,"_148":25},["D",1749843088792],{"_96":97,"_132":133},{"_102":136,"_98":40,"_105":137,"_138":106,"_139":140,"_141":142,"_143":112,"_144":145,"_146":99,"_147":97},[],"routes/_app","actionData","errors"]

Environment variables