9- The **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`.
10
11[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.
15```
16โโโ backend/
17โ โโโ database/
18โ โ โโโ queries.ts # SQLite database operations
19โ โโโ index.ts # Hono API server
20โโโ frontend/
54
551. Fork this project in Val Town
562. The app will automatically create its database table on first run
573. Access the app through your Val Town URL
1import { generateCode } from "./backend/generate-code";
2import { createTables } from "./database/migrations";
3import { createProject, getCode, getNextVersionNumber, insertVersion } from "./database/queries";
4
5async function servePublicFile(path: string): Promise<Response> {
30- [ ] add triggers to sidebar
31- [ ] add upload from SQL, CSV and JSON
32- [ ] add ability to connect to a non-val town Turso database
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.
8
9To use it on your own Val Town SQLite database, [fork it](https://www.val.town/v/stevekrouse/sqlite_admin/fork) to your account.
10
11It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).
9- The **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`.
10
11[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.
26 "Roboto Mono", "Roboto", "Rubik Vinyl"
27 ],
28 database: {
29 getKey: () => "kanbanTest",
30 getSchemaVersion: () => 7,
31 getTableName: () => {
32 const key = config.database.getKey();
33 const version = config.database.getSchemaVersion();
34 return `${key}_tasks_${version}`;
35 }
457export default async function server(request: Request): Promise<Response> {
458 const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
459 const tableName = config.database.getTableName();
460
461 await sqlite.execute(`
30- [ ] add triggers to sidebar
31- [ ] add upload from SQL, CSV and JSON
32- [ ] add ability to connect to a non-val town Turso database
33- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)
34- [x] make result tables scrollable
99 to a variable because variables lose all data every time you save a version. On Val Town there are
100 two ways to store data long term. They are blob and SQlite. Both of them have 10mb on the free plan and
101 1gb on pro. The difference is that blob storage is just key value while SQlite is a database. Since it
102 doesn't make sense to use SQlite's data unnecessarily and it's complex enough to be its own guide,
103 we're using blob storage.</p>
4
5* `index.ts` - this is the **entrypoint** for this whole project
6* `database/` - this contains the code for interfacing with the app's SQLite database table
7
8## Hono
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