T3-App templates - Cloudflare Workers & Pages

This is a collection of basic create-t3-app templates designed for compatibility with Cloudflare Workers & Pages. You can use these templates with the Cloudflare C3 CLI and pnpm as the package manager:

Note

Feel free to open an issue or PR if you have better templates

Live demo

Live demo at https://ct3a.exectx.run/ (cloudflare pages + next-on-pages)

• Generated using create-t3-app with the following options: tRPC, drizzle, no auth, tailwind, SQLite. Then modified to support D1
• D1 instance location: Eastern North America — enam

Templates

D1 template (pages) - next steps guide:

Important

After runing the command, follow the instructions below or in the link above to finish setting up your D1 template

pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/d1

Next steps... Instructions for finishing setting up your D1 database

Run the following command to create a D1 Database, then update the database_id in wrangler.toml. (Cloudflare's D1 guide)

pnpx wrangler d1 create <DATABASE-NAME>

1. Set Up Database and Run Migrations

Running drizzle-kit commands for remote databases requires valid cloudflare environment variables (guide)

Once you have updated your wrangler.toml with the correct database_id, follow the instructions below.

Using Wrangler for local database

pnpm db:generate
pnpm d1:migrate:local
pnpm dev # or pnpm preview

Using Wrangler for remote database

pnpm db:generate
pnpm d1:migrate:remote
pnpm dev # or pnpm preview

Using Drizzle-Kit for local database

Using Migrations

pnpm db:generate
pnpm db:migrate:local
pnpm dev # or pnpm preview

Pushing Schema Changes

pnpm db:push:local
pnpm dev # or pnpm preview

Using Drizzle-Kit for remote database requires Cloudflare environment variables

Using Migrations

pnpm db:generate
pnpm db:migrate
pnpm dev # or pnpm preview

Pushing Schema Changes

pnpm db:push
pnpm dev # or pnpm preview

2. Deployment

To deploy to Cloudflare, you can connect your application via cloudflare dashboard (GitHub integration) or run pnpm deploy. follow Cloudflare's Next.js guide.

3. Configure Cloudflare Environment Variables (Optional)

You can run migrations using wrangler d1 migrations ..., but if you want to use drizzle-kit instead, you need to configure your environment variables.

cp .dev.vars.example .dev.vars

You can find CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_DATABASE_ID, and CLOUDFLARE_TOKEN in the Cloudflare dashboard:

• To get CLOUDFLARE_ACCOUNT_ID, go to Workers & Pages -> Overview -> copy Account ID from the right sidebar.
• To get CLOUDFLARE_DATABASE_ID, open the D1 database you want to connect to and copy the Database ID.
• To get CLOUDFLARE_TOKEN, go to My Profile -> API Tokens and create a token with D1 edit permissions.

Now you can run Drizzle-Kit remote commands such as db:push, db:migrate, db:studio, etc.

D1 template (workers static assets & OpenNext) next steps guide

Cloudflare pages & workers compatibility matrix here.

pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/workers-d1

Turso template - next steps guide

pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/turso

Just tRPC

pnpm create cloudflare@latest --template=exectx/t3-cloudflare/templates/trpc

TODO Templates

• T3 + D1 (cf pages)
• T3 + TursoDB (cf pages)
• T3 + tRPC (only) (cf pages)
• T3 + D1 (cf workers)