\n Hello, World!\n

Built on Val Town

\n\n \n {count === null ? \"Loading…\" : `Clicks: ${count}`}\n \n {error ? (\n

{error}

\n ) : (\n

Saved in SQLite · shared by everyone

\n )}\n\n

\n How this app works\n

\n Two files: a Hono server that talks to SQLite, and a React client that renders the UI.\n Val Town runs the server per request and transpiles the frontend on the fly—no build step.\n

\n\n

\n Request flow (click button)\n

\n \n \n \n \n \n \n \n

\n The page also loads the current total with GET /api/clicks\n on mount, so everyone sees the same global counter.\n

\n\n

\n Files & pieces\n

main.tsx

Hono routes for / and APIs
std/sqlite persist clicks
serveFile for /frontend/*
hotReload on export

frontend/App.tsx

React UI + Twind styles
Fetched on each page load
Transpiled TSX → JS
Only talks over fetch()

\n\n

\n Stack map\n

{`┌────────────── browser ──────────────┐\n│  Twind CSS   React App.tsx          │\n│       │ fetch JSON                  │\n└───────┼─────────────────────────────┘\n        ▼\n┌────────────── server ───────────────┐\n│  hotReload → Hono (main.tsx)        │\n│    /           HTML shell           │\n│    /frontend/* serveFile (TSX→JS)   │\n│    /api/clicks SQLite get/increment │\n│    /source     redirect to val      │\n└───────────────┬─────────────────────┘\n                ▼\n         ┌─────────────┐\n         │ SQLite row  │\n         │ clicks: N   │\n         └─────────────┘`}

\n\n

\n \n view source\n \n

\n Hello, World!\n

Built on Val Town

\n {count === null ? \"Loading…\" : `Clicks: ${count}`}\n \n {error ? (\n

{error}

\n ) : (\n

Saved in SQLite · shared by everyone

\n )}\n\n

\n How this app works\n

\n Two files: a Hono server that talks to SQLite, and a React client that renders the UI.\n Val Town runs the server per request and transpiles the frontend on the fly—no build step.\n

\n\n

\n Request flow (click button)\n

\n \n \n \n \n \n \n \n

\n The page also loads the current total with GET /api/clicks\n on mount, so everyone sees the same global counter.\n

\n\n

\n Files & pieces\n

main.tsx

Hono routes for / and APIs
std/sqlite persist clicks
serveFile for /frontend/*
hotReload on export

frontend/App.tsx

React UI + Twind styles
Fetched on each page load
Transpiled TSX → JS
Only talks over fetch()

\n\n

\n Stack map\n

{`┌────────────── browser ──────────────┐\n│  Twind CSS   React App.tsx          │\n│       │ fetch JSON                  │\n└───────┼─────────────────────────────┘\n        ▼\n┌────────────── server ───────────────┐\n│  hotReload → Hono (main.tsx)        │\n│    /           HTML shell           │\n│    /frontend/* serveFile (TSX→JS)   │\n│    /api/clicks SQLite get/increment │\n│    /source     redirect to val      │\n└───────────────┬─────────────────────┘\n                ▼\n         ┌─────────────┐\n         │ SQLite row  │\n         │ clicks: N   │\n         └─────────────┘`}

\n\n

\n \n view source\n \n

Diff · v13