Val Town Code SearchReturn to Val Town

12## Serving assets to the frontend
13
14This 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.
15
16In 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. 
26## CRUD API Routes
27
28This 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`. These routes are called from the React app to refresh and update data.
29
30## Errors

8## Migrations
9
10In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. 
11
12This "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.

1import { useQuery, useMutation, useQueryClient } from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
2import { type Message } from "../../shared/utils.ts";
3

1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client";
3import React, { useEffect, useState } from "https://esm.sh/react@19";
4import { createRouter, createRootRoute, createRoute, RouterProvider, useSearch, useNavigate } from "https://esm.sh/@tanstack/react-router@1.62.1?deps=react@19,react-dom@19";
5import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "https://esm.sh/@tanstack/react-query@5.17.0?deps=react@19,react-dom@19";
6
7interface WeatherData {
325  };
326
327  const handleLocationSubmit = async (e: React.FormEvent) => {
328    e.preventDefault();
329    if (!customLocation.trim()) return;

11- **Runtime**: Deno (Val Town platform)
12- **Backend**: Hono web framework
13- **Frontend**: React 19 with TypeScript
14- **Routing**: TanStack Router for URL state management
15- **Styling**: CSS with responsive grid layouts
23├── frontend/
24│   ├── index.html        # Main HTML page
25│   ├── index.tsx         # React app with weather dashboard UI
26│   └── style.css         # Mobile-optimized styles with responsive grid
27├── deno.json            # Deno configuration
45
46### Frontend (frontend/index.tsx)
47- **React 18.2.0** with TypeScript interfaces
48- **Responsive grid layout**: 6 → 8 → 12 → 24 columns based on screen size
49- **Key features**:
117### Val Town Specific
118- Use `https://esm.sh` for all imports to ensure browser/server compatibility
119- Pin React dependencies to version 19
120- Always include `/** @jsxImportSource https://esm.sh/react@19 */` at top of React files
121- Use environment variables with `Deno.env.get()` for secrets (never bake into code)
122

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "react";
3import { isProdBranch } from "../../shared/is-prod-branch.ts";
4

1# React + TanStack + Hono Val Town Project
2
3Full-stack message board built for Val Town.
11
12### Frontend
13- React 19
14- TanStack Router (code-first routing)
15- TanStack Query (server state management)
31│   ├── database/     # Drizzle schema, migrations, and queries
32│   └── index.ts      # Main Hono application
33├── frontend/         # React app running in browser
34│   ├── components/   # React components
35│   ├── lib/          # Utilities and hooks
36│   └── router.tsx    # TanStack Router configuration
40## API Endpoints
41
42- `GET /` - Serves the React application with initial data
43- `GET /api/messages` - Fetch all messages (JSON)
44- `POST /api/messages` - Create a new message

1import { useQuery, useMutation, useQueryClient } from "https://esm.sh/@tanstack/react-query@^5.0.0?deps=react@19";
2import { type Message } from "../../shared/utils.ts";
3

1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client?deps=react@19";
3import { type Message } from "../shared/utils.ts";
4import { RouterApp } from "./router.tsx";

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { type Message, MESSAGE_LIMIT } from "../../shared/utils.ts";
4import { MessageInput } from "./MessageInput.tsx";