Skip to content

5. Create the Pages project

Now you'll connect your GitHub repo to Cloudflare Pages so Cloudflare builds and hosts the app, and redeploys automatically whenever you push code.

Create the project

  1. In the Cloudflare dashboard, go to Workers & Pages in the left sidebar.
  2. Click Create application → the Pages tab → Connect to Git.
  3. Authorize Cloudflare to access GitHub if asked, and pick the oncall-scheduler repository.
  4. Click Begin setup.

Build settings

Fill these in exactly:

Field Value
Project name oncall-scheduler (this becomes the temporary oncall-scheduler.pages.dev URL)
Production branch main
Framework preset None (or "Vite" if offered — None is safe)
Build command npm run build
Build output directory client/dist

Why these values

npm run build compiles the React app and the API. The finished website lands in client/dist, which matches pages_build_output_dir in wrangler.toml. Cloudflare automatically picks up the functions/ folder for the API and the D1 binding from wrangler.toml.

First deployment

  1. Click Save and Deploy.
  2. Cloudflare clones the repo, runs npm install and npm run build, and publishes. Watch the build log; it takes a few minutes.
  3. When it's done you'll get a URL like https://oncall-scheduler.pages.dev.

It won't fully work yet — that's expected

At this point the site loads but the database has no tables and sign-in isn't configured. You'll fix those on the next pages:

Confirm the D1 binding is attached

Cloudflare usually reads the D1 binding from wrangler.toml automatically. Confirm it:

  1. Open your Pages project → Settings → Bindings (older dashboards: Functions → D1 database bindings).
  2. You should see a binding named DB pointing at oncall_db.
  3. If it's missing, click Add binding, set Variable name = DB, D1 database = oncall_db, and save. Make sure it's set for Production (and Preview if you use it).

Environment variables