Val Town Code SearchReturn to Val Town

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.

1# Frontend
2
3This template is a classic client-side-only React app. 
4
5## `index.html`
9This 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.
10
11This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
12
13This 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).)
14
15## `index.tsx`
16
17This 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>`.
18
19It also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the `<App />`.
25## `components/`
26
27This directory is where the React components are stored. They're pretty standard client-side React components.

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 { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
2
3export const tableName = "reactHonoStarter_messages";
4
5export async function createTables() {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import type { Message } from "../shared/types.ts";
4
5export function MessageInput({ onSubmit }: { onSubmit: () => void }) {
6  const [message, setMessage] = React.useState("");
7
8  const handleSubmit = async (e: React.FormEvent) => {
9    e.preventDefault();
10    if (!message.trim()) return;

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { type Message } from "../shared/utils.ts";
4import { App } from "./components/App.tsx";

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { type Message, MESSAGE_LIMIT } from "../../shared/utils.ts";
4import { MessageInput } from "./MessageInput.tsx";
7  { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },
8) {
9  const [messages, setMessages] = React.useState(initialMessages);
10
11  const fetchMessages = async () => {

5## Overview
6
7The application uses **Deno** as the test runner with **React Testing Library** for component testing. Tests are written in TypeScript and follow modern testing practices with proper mocking and isolation.
8
9## Quick Start
28
29- **Test Runner**: Deno Test
30- **Component Testing**: React Testing Library
31- **Assertions**: Deno Standard Library Assert
32- **Mocking**: Custom utilities + built-in Deno mocks
50
51```typescript
52/** @jsxImportSource https://esm.sh/react@18.2.0 */
53import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
54import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
55import React from "https://esm.sh/react@18.2.0";
56import { createMockMessage } from "../utils/test-helpers.ts";
57import ComponentToTest from "../../frontend/components/ComponentToTest.tsx";
363### Common Issues
364
3651. **Import Errors**: Ensure React version pinning in imports
3662. **Component Not Rendering**: Check required props
3673. **Async Issues**: Use proper async/await patterns
431
432```typescript
433/** @jsxImportSource https://esm.sh/react@18.2.0 */
434import { assertEquals, assertExists } from "https://deno.land/std@0.208.0/assert/mod.ts";
435import { render, cleanup } from "https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0";
436import React from "https://esm.sh/react@18.2.0";
437import { createMockMessage } from "../utils/test-helpers.ts";
438import NewComponent from "../../frontend/components/NewComponent.tsx";
454
455- [Deno Testing Documentation](https://deno.land/manual/testing)
456- [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)
457- [Deno Standard Library Assert](https://deno.land/std/assert)
458- [ESM.sh for React Dependencies](https://esm.sh/)
459
460## Contributing