Skip to content

Development Workflow

Common Commands

Start Development Server

Terminal window
pnpm run dev

This starts the Vite dev server with hot reloading. Your app will be available at the port shown in the terminal (usually http://localhost:3001).

Type Checking

Terminal window
pnpm run types:check

Run this frequently to catch type errors early.

Formatting

Terminal window
# Check formatting
pnpm run format:check


# Fix formatting
pnpm run format:write

Database Operations

  1. Create a migration

    Change your schema in src/db/schema.ts, then run:

    Terminal window
    pnpm run db:generate

  2. Run migrations

    bash pnpm run db:migrate:local

  3. View database data

    bash pnpm run db:studio:local

Cloudflare Types

If you change Cloudflare resources in your wrangler.jsonc (add a KV namespace, change D1 binding name, etc.):

Terminal window
pnpm run cf-typegen

This regenerates the worker-configuration.d.ts file so TypeScript knows about your bindings.

Project Structure

src/
├── client/           # Client-only code
│   ├── components/   # React components
│   ├── hooks/        # Custom hooks
│   └── tanstack-db/  # TanStack DB collections
├── db/               # Database
│   └── schema.ts     # Drizzle schema
├── embedded-sdk/     # Gateway integration
│   ├── client/       # Client SDK
│   └── server/       # Server SDK
├── routes/           # TanStack Router routes
├── server/           # Server-side code
│   ├── repositories/ # Data access layer
│   └── services/     # Business logic
├── serverFunctions/  # TanStack server functions
└── app.tsx           # App entry point

Tips

  • Keep client code in /client - Helps avoid accidentally importing server code on the client
  • Use server functions for all data mutations - Don’t call repositories directly from components
  • Run types:check before committing - Catches errors that hot reload might miss