Skip to content

Conversation

@sfsfco
Copy link

@sfsfco sfsfco commented Dec 9, 2025

PR Description

What?

Adds a new template with-cloudflare-website that combines the full-featured Website template with Cloudflare D1 (SQLite) database and R2 object storage infrastructure.

Why?

Currently, Payload offers:

  • website template - Full-featured website/blog template with MongoDB
  • with-cloudflare-d1 template - Basic Cloudflare D1/R2 setup with minimal collections

Users who want to deploy a production-ready website on Cloudflare's edge network had to manually merge these two templates. This new template provides an out-of-the-box solution for deploying the complete website template on Cloudflare Workers.

Use cases:

  • Personal or enterprise-grade websites, blogs, or portfolios on Cloudflare
  • Content publishing platforms with edge-first performance
  • Global distribution with zero cold starts via Cloudflare's network

How?

Created a new template based on website with the following modifications:

Database & Storage:

  • Replaced MongoDB adapter with @payloadcms/db-d1-sqlite (Cloudflare D1)
  • Added @payloadcms/storage-r2 plugin for media storage
  • Generated initial migration file for all collections (pages, posts, categories, forms, media, users, header, footer)

Cloudflare Configuration:

  • Added wrangler.jsonc with D1 and R2 bindings
  • Added cloudflare-env.d.ts for TypeScript bindings
  • Added open-next.config.ts for OpenNext/Cloudflare integration
  • Converted next.config.js to next.config.ts for better TypeScript support

Payload Config Changes:

  • Uses sqliteD1Adapter with push: true for development (auto schema sync)
  • Uses getCloudflareContext for runtime bindings
  • R2 storage configured for media collection

Media Collection:

  • Disabled crop and focalPoint features (sharp not available on Workers)

Dynamic Rendering:

  • Added export const dynamic = 'force-dynamic' to all pages/layouts
  • Removed generateStaticParams from pages (static generation not supported without env vars at build time)

Scripts:

  • deploy - Full deployment (database + app)
  • deploy:database - Apply migrations to remote D1
  • deploy:app - Build and deploy to Cloudflare Workers
  • migrate:create / migrate:fresh - Migration utilities
  • preview - Local preview with Cloudflare bindings

Documentation:

  • Comprehensive README with setup instructions for D1/R2
  • Database migration documentation
  • Deployment guide
    templates/with-cloudflare-website/
    ├── wrangler.jsonc # Cloudflare Workers config
    ├── cloudflare-env.d.ts # TypeScript bindings
    ├── open-next.config.ts # OpenNext config
    ├── next.config.ts # Next.js config
    ├── src/
    │ ├── payload.config.ts # D1 + R2 adapters
    │ ├── collections/
    │ │ └── Media.ts # Disabled sharp features
    │ └── migrations/
    │ ├── index.ts
    │ └── 20251208_*.ts # Initial migration
    └── ... # All website template files

Collections Included

All collections from the website template:

  • Pages - Layout builder with blocks (CTA, Content, Media, Archive, Form)
  • Posts - Blog posts with rich text and SEO
  • Categories - Nested categories for posts
  • Media - R2-backed uploads
  • Users - Authentication
  • Forms - Form builder plugin
  • Header/Footer - Global navigation

Dependencies

  • @payloadcms/db-d1-sqlite - D1 database adapter
  • @payloadcms/storage-r2 - R2 storage plugin
  • @opennextjs/cloudflare - OpenNext for Cloudflare Workers
  • wrangler - Cloudflare CLI

Testing

  • Deployed and tested on Cloudflare Workers
  • Verified database migrations create all tables
  • Tested media uploads to R2
  • Verified admin panel and frontend rendering

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant