Search

This template is a classic client-side-only React app. 
This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
This 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).)
This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
This directory is where the React components are stored. They're pretty standard client-side React components.

This 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.
In 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. 
We *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.
This 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.

# React Hono Val Town Project Starter Template
The 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.
If 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.

This template is a classic client-side-only React app. 
This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
This 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).)
This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
This directory is where the React components are stored. They're pretty standard client-side React components.

## React
- [React Starter][]: Render React on the server and hydrate on the client
- [React Streaming Starter][]: Render React with a streaming response
- [React SPA Starter][]: Render React on the client-side only
- [React Router Starter][]: Render a React app with client-side routing using React Router
- [React Router SSR Starter][]: Render a React app with server- and client-side routing using React Router
- [React Router Data Mode Starter][]: Render a React app with server- and client-side routing using React Router in "data mode"
- [React Router Hono Starter][]: Render a React app with server- and client-side routing using React Router and Hono
- [Hono JSX Starter][]: Render Hono with JSX
- [Hono Client Starter][]: Render Hono with JSX on the server and hydrate on the client
- [Hono RPC Starter][]: Use Hono routes to create an RPC client
- [Hono RPC Zod Starter][]: Use Hono routes to create an RPC client with Zod validation
- [Hono CSS Starter][]: Use Hono CSS to style Hono apps with CSS-in-JS
- [Hono Client CSS Starter][]: Use Hono CSS to style Hono apps with CSS-in-JS and hydrate on the client
## Preact 
- [Preact Starter][]: Render Preact on the server
- [Preact Client Starter][]: Render Preact on the server and hydrate the app on the client
- [Vue Starter][]: Render Vue JSX on the server
- [Three.js Starter][]: Render Three.js on the client
- [p5 Starter][]: Render p5.js on the client
- [Custom JSX Runtime Starter][]: Render React (or other JSX implementations) with a custom JSX runtime
[react starter]: https://val.town/x/jxnblk/react-starter
[react streaming starter]: https://val.town/x/jxnblk/react-streaming-starter
[react spa starter]: https://val.town/x/jxnblk/react-spa-starter
[remark starter]: https://www.val.town/x/jxnblk/remark-starter
[svg png starter]: https://www.val.town/x/jxnblk/svg-png-starter
[preact starter]: https://val.town/x/jxnblk/preact-starter
[preact client starter]: https://val.town/x/jxnblk/preact-client-starter
[vue starter]: https://val.town/x/jxnblk/vue-starter
[p5 starter]: https://val.town/x/jxnblk/p5-starter
[hono client starter]: https://val.town/x/jxnblk/hono-client-starter
[react router starter]: https://val.town/x/jxnblk/react-router-starter
[react router ssr starter]: https://val.town/x/jxnblk/react-router-ssr-starter
[react router data mode starter]: https://val.town/x/jxnblk/react-router-data-mode-starter
[react router hono starter]: https://val.town/x/jxnblk/react-router-hono-starter
[custom jsx runtime starter]: https://val.town/x/jxnblk/custom-jsx-runtime-starter
[hono css starter]: https://www.val.town/x/jxnblk/hono-css-starter
[hono client css starter]: https://www.val.town/x/jxnblk/hono-client-css-starter
- [x] React Starter
- [x] React Streaming Starter
- [x] React SPA Starter
- [x] Remark Starter
- [x] Hono (JSX)
- [x] Hono client components
- [ ] Hono Routing
- [x] Preact
- [x] Preact w/ client hydration
- [x] Vuejs Starter

- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!
- [ ] Get React Router working on the client & move off localstorage for storing page state
- [ ] When it hits the max number of steps, detect that and give the user a button (or instructions on how) to get it to continue (neverstew mentioned this)
- [ ] opentownie as a pr bot
- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them
- [ ] do a browser use or screenshot thing to give it access to its own visual output
- [x] Refactor /backend/index.ts into multiple files
- [x] Format the JSON inside the tool-calls as pretty markdown
  - [x] Think as normal markdown
- [x] Show reasoning in a detail
- [x] Consider asking it to write the minimum code possible 
- [x] Add caching (post in the vercel ai discussion about how it's not working)

- [ ] Give it a tool to make an HTTP request to its own endpoint to test things!
- [ ] Get React Router working on the client & move off localstorage for storing page state
- [ ] The stop button might not actually stop it on the backend?
- [ ] opentownie as a pr bot
- [ ] give it the ability to see its own client-side and server-side logs by building a middleware that shoves them into a SQL light database date and then give it a tool to access them
- [ ] do a browser use or screenshot thing to give it access to its own visual output
- [x] Refactor /backend/index.ts into multiple files
- [x] Format the JSON inside the tool-calls as pretty markdown
  - [x] Think as normal markdown
- [x] Show reasoning in a detail
- [x] Consider asking it to write the minimum code possible 
- [x] Add caching (post in the vercel ai discussion about how it's not working)

import { createAuthClient } from "https://esm.sh/better-auth@1.6.9/react?deps=react@18.2.0,react-dom@18.2.0";
import { magicLinkClient } from "https://esm.sh/better-auth@1.6.9/client/plugins?deps=react@18.2.0,react-dom@18.2.0";
// Base URL is the same origin as the page, so we don't need to set it.
// Plugins must mirror the server-side plugins enabled in backend/auth.ts.
export const authClient = createAuthClient({
  plugins: [magicLinkClient()],
});
export const { useSession, signIn, signOut } = authClient;

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
- **Server-Side Rendering**: All pages are server-rendered when accessed directly
- **Client-Side Navigation**: After initial load, navigation happens client-side
- **Topic Management**: Create and view discussion topics
│   ├── index.html             # HTML template
│   └── index.tsx              # Client entry point
├── routes/
### Server-Side Rendering
The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
2. It runs the appropriate loaders/actions for the matched route
3. The page is rendered with the data and sent to the client
4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`
### Client-Side Navigation
After the initial page load, navigation happens entirely on the client:
1. React Router handles link clicks and form submissions
2. Data is fetched asynchronously using loaders and actions
- **Hono**: For server-side routing and handling
- **React Router 7**: For both server and client-side routing
- **SQLite**: For data persistence
The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
- **Server-Side Rendering**: All pages are server-rendered when accessed directly
- **Client-Side Navigation**: After initial load, navigation happens client-side
- **Topic Management**: Create and view discussion topics
│   ├── index.html             # HTML template
│   └── index.tsx              # Client entry point
├── routes/
### Server-Side Rendering
The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
2. It runs the appropriate loaders/actions for the matched route
3. The page is rendered with the data and sent to the client
4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`
### Client-Side Navigation
After the initial page load, navigation happens entirely on the client:
1. React Router handles link clicks and form submissions
2. Data is fetched asynchronously using loaders and actions
- **Hono**: For server-side routing and handling
- **React Router 7**: For both server and client-side routing
- **SQLite**: For data persistence
The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
- **Server-Side Rendering**: All pages are server-rendered when accessed directly
- **Client-Side Navigation**: After initial load, navigation happens client-side
- **Topic Management**: Create and view discussion topics
│   ├── index.html             # HTML template
│   └── index.tsx              # Client entry point
├── routes/
### Server-Side Rendering
The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
2. It runs the appropriate loaders/actions for the matched route
3. The page is rendered with the data and sent to the client
4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`
### Client-Side Navigation
After the initial page load, navigation happens entirely on the client:
1. React Router handles link clicks and form submissions
2. Data is fetched asynchronously using loaders and actions
- **Hono**: For server-side routing and handling
- **React Router 7**: For both server and client-side routing
- **SQLite**: For data persistence
The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
- **Server-Side Rendering**: All pages are server-rendered when accessed directly
- **Client-Side Navigation**: After initial load, navigation happens client-side
- **Topic Management**: Create and view discussion topics
│   ├── index.html           # HTML template
│   └── index.tsx            # Client entry point
├── routes/
### Server-Side Rendering
The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
2. It runs the appropriate loaders/actions for the matched route
3. The page is rendered with the data and sent to the client
4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`
### Client-Side Navigation
After the initial page load, navigation happens entirely on the client:
1. React Router handles link clicks and form submissions
2. Data is fetched asynchronously using loaders and actions
- **Hono**: For server-side routing and handling
- **React Router 7**: For both server and client-side routing
- **SQLite**: For data persistence
The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

React SSR and client-side hydration for Val Town
```tsx
/** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
function App() {
  const [count, setCount] = React.useState(0);
  return (
      <body>
        <h1>ReactStream</h1>
        <p>React SSR with client-side hydration in Val Town</p>
        <pre>{count}</pre>
[Live example](https://www.val.town/v/jxnblk/ReactStreamDemo)
ReactStream has a built-in middleware to handle request to `/robots.txt`
```tsx
import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
// ...
```tsx
/** @jsxImportSource https://esm.sh/react */
import { render } from "https://esm.town/v/jxnblk/ReactStream";
      <head>
        <title>ReactStream</title>
      </head>
React requires matching versions for SSR and hydration.
Import `React` from `https://esm.town/v/jxnblk/ReactStream` to ensure your component uses the same version as this library (currently react@18.3.1).
Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
Migrated from folder: _LEAVE_AS_IS/ReactStream

#  Client Side React Helper
```tsx
/** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
export default () =>
  react_http({
    component: App,
The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it imports. Replace any `npm:` with `https://esm.sh/` and everything should work great.
Migrated from folder: Archive/react_http

# SSR React Mini & SQLite Todo App
This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
## SSR React Mini Framework
This ["framework"](https://www.val.town/v/stevekrouse/ssr_react_mini) is currently 44 lines of code, so it's obviously not a true replacement for NextJS or Remix.
The trick is [client-side importing](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L30) the React component that you're [server rendering](https://www.val.town/v/stevekrouse/ssr_react_mini?v=53#L35-37). Val Town is uniquely suited for this trick because it both runs your code server-side and exposes vals as [modules](https://esm.town/v/stevekrouse/TodoApp) importable by the browser.
The tricky part is making sure that server-only code doesn't run on the client and vice-versa. For example, because this val colocates the server-side `loader` and `action` with the React component we have to be careful to do all server-only imports (ie sqlite) dynamically inside the [`loader`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L7) and [`action`](https://www.val.town/v/stevekrouse/TodoApp?v=246#L20), so they only run server-side.