EasyStarter logoEasyStarter

Database

How the web client consumes data backed by Drizzle and D1

Database

The project uses Drizzle ORM + Cloudflare D1 as its database layer.

Create the D1 database

See official docs: D1 Getting started ยท Wrangler commands

Option 1: Cloudflare Dashboard

  1. Sign in to the Cloudflare Dashboard
  2. Go to Workers & Pages โ†’ D1
  3. Click Create database
  4. Enter a database name, for example easysaas-db
  5. Choose a location if needed
  6. Click Create

Once created, copy the database_id from the database details page.

Option 2: Wrangler CLI

pnpm wrangler d1 create your-d1-database-name

On success, Wrangler outputs a D1 binding snippet that contains the database_id.

Configure the D1 database ID

After obtaining your database_id, add it to the following two locations.

Environment variables:

CLOUDFLARE_ACCOUNT_ID=
CLOUDFLARE_API_TOKEN=
CLOUDFLARE_D1_DATABASE_ID=

For how to obtain CLOUDFLARE_ACCOUNT_ID and CLOUDFLARE_API_TOKEN, see Cloudflare Integration.

Set database_id in:

apps/server/.dev.vars
CLOUDFLARE_D1_DATABASE_ID=your-d1-database-id

and:

apps/server/.env.production
CLOUDFLARE_D1_DATABASE_ID=your-d1-database-id

Wrangler config:

"d1_databases": [
	{
		"binding": "DB",
		"database_name": "your-d1-database-name",
		"database_id": "your-d1-database-id"
	}
]

That means apps/server/wrangler.jsonc must use the same database_id.

Run the local database workflow

For local database development, use these three commands in this order:

pnpm db:generate
pnpm db:migrate:local
pnpm db:studio:local

pnpm db:generate

Generate migration files from apps/server/src/db/schema.

pnpm db:migrate:local

Apply the generated migrations to the local D1 database. This command already handles local D1 initialization.

pnpm db:studio:local

Open the local D1 visual UI so you can inspect tables and data.

Web client notes

  • Browser clients should never hold database credentials directly
  • Fetch data through type-safe API routes combined with query caching

On this page