Skip to content

T3 app cloudflare - (Next.js App Router + Cloudflare Pages + Cloudflare D1 + Drizzle)

Notifications You must be signed in to change notification settings

van14U/t3-cloudflare

Repository files navigation

Cloudflare setup

For dev mode you need to:

  1. Create a D1 Database, Cloudflare's guide

    pnpx wrangler d1 create <DATABASE-NAME>
  2. Configure environment variables:

    cp .dev.vars.example .dev.vars
  3. Configure wrangler.toml.example to wrangler.toml and replace the database_id with the one you created in the first step.

    cp wrangler.toml.example wrangler.toml
  4. After installing dependencies generate migration files

    pnpm db:generate

    and run migrations or push the changes

    # locally
    pnpm db:migrate:local
    # or run on a production db
    # `pnpm db:migrate` which needs CLOUDFLARE_* env vars
    # or `pnpm d1:migrate:remote` which uses wrangler

    (Optional) For faster development and prototyping, you can push the changes

    # locally
    pnpm db:push:local
    # remotely (needs CLOUDFLARE_* env vars)
    pnpm db:push
  5. Run nextjs

    You can run the dev server

    pnpm dev

    Or run a local production build

    pnpm preview
  6. (OPTIONAL) Run proxy bindings (previously needed for HMR):

    pnpm bindings
  7. To deploy to Cloudflare, follow cloudflare's Next.js guide

Don't forget to set the environment variables in the Cloudflare dashboard and to run migrations on the production database.

Drizzle Studio

To access the local sqlite D1 database you need to run the following command. You don't need any cloudflare environment variables for this.

pnpm db:studio:local

To access the remote D1 database you need to run the following command. It needs valid CLOUDFLARE_* environment variables:

  • You can find accountId, databaseId and token in Cloudflare dashboard
  • To get accountId go to Workers & Pages -> Overview -> copy Account ID from the right sidebar
  • To get databaseId open D1 database you want to connect to and copy Database ID
  • To get token go to My profile -> API Tokens and create token with D1 edit permissions

Now you can run drizzle studio

pnpm db:studio

Create T3 App

This is a T3 Stack project bootstrapped with create-t3-app.

What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.

Learn More

To learn more about the T3 Stack, take a look at the following resources:

You can check out the create-t3-app GitHub repository — your feedback and contributions are welcome!

How do I deploy this?

Follow our deployment guides for Vercel, Netlify and Docker for more information.