Next-Cloudflare-Turbo Logo Mark@nct

Getting started

Installation and setup with Next-Cloudflare-Turbo

Open in Github

Prerequisites

Quick start

Get up and running with Next-Cloudflare-Turbo locally.

Installation & Local Setup

Clone and install

git clone https://github.com/cording12/next-cloudflare-turbo.git

From the project directory, run:

npm install

Authenticate with Cloudflare

npx wrangler login

This opens your browser to authorise Wrangler with your Cloudflare account.

If you already had a Cloudflare Account before starting, ensure the account you use has all the correct API permissions (read/write for D1, R2, KV, Durable Objects etc.). New accounts should work out-the-box and require nothing further.

Validation (optional)

Run npx wrangler whoami to confirm authentication worked.

npx wrangler whoami

Run database setup script

npm run setup:db

This creates the D1 database, runs migrations, and adds seed data.

If you have any issues running this script, see Manual setup

Running the project locally

The following commands should be run from the project root to fully leverage the power of the Turbo monorepo.

The turbo.json at the project root contains the configuration for the monorepo. This means that all dependencies of a task are automatically run (and cached where configured).

Run locally

npm install turbo run dev

Run in preview

The final step is to test the Next.js application works in the context of a Cloudflare Worker.

npm run preview

If you only want to preview one application (instead of both), you can alternatively run npm run preview:app or npm run preview:docs

Deployment

After you have finished the initial setup, and tested it works using npm run preview, you need to apply migrations and seed the remote database before deploying to Cloudflare.

This is done for you locally when you use the npm run setup:db script. For a more detailed understanding, see Manual setup

Apply remote database migrations

apps/app
npm run db:migrate:prod

Seed the remote database

apps/app
npm run db:seed:prod

Deploy the application to Cloudflare

apps/app
npm run deploy:app

After successfully deploying your application, the CLI will give you your domain to visit the live Worker. For Next-Cloudflare-Turbo, this is a custom domain, but for you it will be a worker.dev URL.

✨ Success! Uploaded 6 files (41 already uploaded) (2.82 sec)

Total Upload: 10751.33 KiB / gzip: 2066.24 KiB
Worker Startup Time: 27 ms
Your Worker has access to the following bindings:
Binding                                                Resource
env.DB (test-new-db)                                   D1 Database
env.WORKER_SELF_REFERENCE (next-cloudflare-turbo)      Worker
env.ASSETS                                             Assets

Uploaded next-cloudflare-turbo (19.65 sec)
Deployed next-cloudflare-turbo triggers (6.08 sec)
  app.cording.dev (custom domain) 
Current Version ID: e185c6e3-b32b-4d38-879c-872c119819a2

FAQ

Next steps

App

Deep-dive into the app and understand its construction.

Cloudflare dashboard

Walkthrough the Cloudflare dashboard and see how everything works.

How is this guide?

Last updated on

Architecture

Breaking down the repo's architecture

Manual setup

Manually setting up D1, applying migrations, and seeding your database