Add a Cloudflare database and server code

Let’s do this

1. 1
   In Cloudflare

   Create a free database

   In Cloudflare, open Storage & databases, then D1 SQL Database and Create Database. Name it little-garden-live. Create little-garden-preview separately for testing. Stay on the free plan. D1 currently allows 500 MB per free database and 5 GB total, with daily read and write limits.

   Cloudflare D1: getting started (opens a new tab)
2. 2
   In your AI helper

   Ask the AI to prepare one tiny feature

   Use the prompt below. Ask for a tips table with an ID and a tip, plus two sample rows. The AI should save the table setup as a numbered migration, which is a record of a database structure change. Have it explain the SQL before it is run.

   Cloudflare D1: database migrations (opens a new tab)
3. 3
   In your AI helper

   Add server code to the existing Pages project

   For this course’s Vite + Pages route, ask for a GET /api/tips endpoint in functions/api/tips.ts at the project root, outside dist. It should read through a binding named DB and return only public tips. A binding is the named connection from server code to the database. Do not add public edit or delete endpoints.

   Cloudflare Pages: D1 bindings (opens a new tab)
4. 4
   In your AI helper

   Test with a local database first

   Have the AI install and configure Cloudflare’s free Wrangler tool for this project. It should apply the migration to local D1, build the Vite site, then start a Pages preview that includes functions and the DB binding. A plain npm run dev preview does not run Pages Functions by itself. Ask for one project command to repeat this safely.

   Cloudflare Pages: local function development (opens a new tab)
5. 5
   In your AI helper

   Set up the hosted copies deliberately

   Once local tests pass, have the AI identify the live and preview databases and apply the same reviewed migration to each intended remote database. “Local” and “remote” are different stores; local sample rows do not appear online by themselves. Keep the two sample tips public and non-personal.

6. 6
   In Cloudflare

   Connect each Pages environment and redeploy

   Open the Pages project, then Settings, Bindings, Add and D1 database. Name the binding DB. For Production select little-garden-live; for Preview select little-garden-preview. If the project uses a Wrangler configuration file as the source of these settings, have the AI update that consistently. Commit and push the checked code, then redeploy so the binding takes effect.

   Cloudflare Pages: D1 bindings (opens a new tab)
7. 7
   In your browser

   Prove the live page reads the database

   Open the published page and /api/tips. In the live D1 dashboard, use the Console with a reviewed SQL statement from the AI to change a sample tip. Refresh the public page and check it changes without rebuilding the site. The dashboard login protects your editing; the reading endpoint is intentionally public.