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";
4export const USERS = "USERS";
5export async function createTables() {
9const app = new Hono();
10
11// 🚀 Serve frontend React shell at "/"
12app.get("/", async (c) => {
13 let html = await readFile("/frontend/index.html", import.meta.url);
1// /frontend/index.tsx
2/** @jsxImportSource https://esm.sh/react@18.2.0 */
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./App.tsx";
5
1/** @jsxImportSource https://esm.sh/react */
2import { useEffect, useState } from "https://esm.sh/react@19.0.0";
3import { createRoot } from "https://esm.sh/react-dom@19.0.0/client";
4import { Promo } from "./scanner.http.tsx";
5
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
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 <script src="https://cdn.tailwindcss.com"></script>
8 <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
6
7The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
8
9[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5const NO_PHRASES = [
