\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}",[],[394,385],"frontend","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();",[],[394,396],"bd34648c-488d-11f0-b6cb-76b3cceeab13","index.html","fafbb8e7-6b0d-44de-8ee4-80172c0dbd39",["D",1749843405031],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[394,404],"00bf5b9a-488d-11f0-8815-76b3cceeab13","favicon.svg","269d4697-07e9-4d11-bb4f-828090903775",["D",1749843088792],"",[],[394,411],"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.",[],[394,105],"f06c8a7e-4896-11f0-8456-76b3cceeab13","queries.ts","34872dc0-4894-11f0-bbed-76b3cceeab13","74f9bc1e-4890-11f0-a41d-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}",[],[394,432,424],"lib","74f9bb74-4890-11f0-a41d-76b3cceeab13",22,["D",1749844572344],[329],[394,432],"04a074ee-4895-11f0-bf11-76b3cceeab13","MessageInput.tsx","f4204128-80e3-4618-88b0-b489ab57afe9","a08e3964-ce0f-4dd2-8e67-875aecd9695a",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}",[],[394,447,439],"components","1cd814d0-4896-11f0-a416-76b3cceeab13","App.tsx","a1a5af69-de9f-4e56-8c53-d162ce957720",85,["D",1749847001454],9,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\nimport { useMessages } from \"../lib/queries.ts\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const { data: messages = [], isLoading, error } = useMessages(initialMessages);\n\n if (isLoading && !initialMessages.length) {\n return (\n

Loading messages...

\n );\n }\n\n if (error) {\n return (\n

Failed to load messages

\n );\n }\n\n return (\n

💬 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}",[],[394,447,449],"00bf569a-488d-11f0-8815-76b3cceeab13",["D",1749843088792],[326,327],[394,447],"00bf6338-488d-11f0-8815-76b3cceeab13",["D",1749843088792],[325,328,330,331,332,333,334],[394],["D",1749847343069],[],[18,87],["D",1749843088792],[],[18,105],"dcd8fbba-4895-11f0-8456-76b3cceeab13","schema.ts","edce6564-488f-11f0-a955-76b3cceeab13",74,["D",1749846894093],"import { sqliteTable, text, integer } from \"npm:drizzle-orm/sqlite-core\";\n\n// Messages table\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\n// Type exports\nexport type Message = typeof messages.$inferSelect;",[],[18,99,472],"e9dac17c-4895-11f0-a416-76b3cceeab13","71c8db95-d720-4b95-86dd-0685be7d8d5a",76,["D",1749846915912],"import { desc } from \"npm:drizzle-orm\";\nimport { db, schema } from \"./db.ts\";\nimport { createTables } from \"./migrations.ts\";\nimport { MESSAGE_LIMIT } from \"../../shared/utils.ts\";\n\n// This will create the database table if it doesn't exist.\n// This will run every time the app starts up. You can\n// comment out this line for a modest (30ms) performance improvement\n// on cold starts. It's left in to ensure the database tables are\n// automatically set up correctly for users who fork this app.\nawait createTables();\n\nexport async function getMessages(limit = MESSAGE_LIMIT) {\n const messages = await db\n .select()\n .from(schema.messages)\n .orderBy(desc(schema.messages.timestamp))\n .limit(limit)\n .all();\n \n return messages;\n}\n\nexport async function insertMessage(content: string) {\n await db\n .insert(schema.messages)\n .values({\n content,\n timestamp: new Date().toISOString(),\n })\n .run();\n}",[],[18,99,424],"affe27e4-5279-11f0-b15a-f69ea79377d9","migrations.ts","cad95ec9-e6e8-46c6-9038-ed55f4a00f29",["D",1750934304558],"import { sql } from \"npm:drizzle-orm\";\nimport { db } from \"./db.ts\";\n\nexport async function createTables() {\n // Uncomment to reset database\n await db.run(sql`DROP TABLE IF EXISTS messages`);\n // Create messages table\n await db.run(sql`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}",[],[18,99,487],"14668a3a-4890-11f0-aefe-76b3cceeab13","db.ts","f552bd26-488f-11f0-92c5-76b3cceeab13",16,["D",1749844410312],"import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { drizzle } from \"npm:drizzle-orm/libsql\";\nimport * as schema from \"./schema.ts\";\n\n// Create Drizzle instance with Val Town's sqlite\nexport const db = drizzle(sqlite as any);\n\n// Export schema for convenience\nexport { schema };",[],[18,99,494],"00bf364c-488d-11f0-8815-76b3cceeab13","e13233a9-d024-42a2-b289-8fba357412b2",["D",1749843088792],"# 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.",[],[18,99,105],["D",1749843088792],[317,318,319,320,321],[18,99],["D",1749843088792],[316,322,323],[18],["D",1749843088792],{"_11":12,"_250":93},{"_11":12,"_246":-5,"_92":93,"_31":91,"_247":248,"_249":30},{"_51":234,"_13":16,"_45":48,"_235":201,"_236":82,"_237":238,"_239":205,"_240":241,"_242":243,"_244":14,"_245":12},"ctx",{"_64":-5,"_271":550,"_551":552,"_553":554,"_555":30,"_556":30,"_557":30,"_558":24,"_559":-5,"_560":-7,"_561":-7,"_562":26,"_563":30,"_564":30,"_565":-5,"_566":30,"_567":30,"_568":30,"_569":-5},"ENV",{"_521":522,"_523":524,"_525":16,"_526":527,"_528":529,"_530":531,"_532":533,"_534":535,"_536":537,"_538":539,"_540":541,"_542":543,"_544":545,"_546":547,"_548":549},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend