🚀 Full-Stack Cloudflare SaaS Kit

Build and deploy scalable products on Cloudflare with ease.

An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare. This is a Next.js project bootstrapped with c3.

This is the same stack used to build Supermemory.ai which is open source at git.new/memory

Supermemory now has 20k+ users and it runs on $5/month. safe to say, it's very effective.

The stack includes:

• Next.js for frontend
• TailwindCSS for styling
• Drizzle ORM for database access
• NextAuth for authentication
• Cloudflare D1 for serverless databases
• Cloudflare Pages for hosting
• ShadcnUI as the component library

Getting Started

1. Make sure that you have Wrangler installed. And also that you have logged in with wrangler login (You'll need a Cloudflare account)

2. Clone the repository and install dependencies:

   git clone https://github.com/Dhravya/cloudflare-saas-stack
   cd cloudflare-saas-stack
   npm i -g bun
   bun install
   bun run setup

3. Run the development server:

   bun run dev

Open http://localhost:3000 with your browser to see the result.

Cloudflare Integration

Besides the dev script, c3 has added extra scripts for Cloudflare Pages integration:

• pages:build: Build the application for Pages using @cloudflare/next-on-pages CLI
• preview: Locally preview your Pages application using Wrangler CLI
• deploy: Deploy your Pages application using Wrangler CLI

Note: While the dev script is optimal for local development, you should preview your Pages application periodically to ensure it works properly in the Pages environment.

Bindings

Cloudflare Bindings allow you to interact with Cloudflare Platform resources. You can use bindings during development, local preview, and in the deployed application.

For detailed instructions on setting up bindings, refer to the Cloudflare documentation.

Database Migrations

To apply database migrations:

• For development: bun run migrate:dev
• For production: bun run migrate:prd

Cloudflare R2 Bucket CORS / File Upload

Don't forget to add the CORS policy to the R2 bucket. The CORS policy should look like this:

[
  {
    "AllowedOrigins": [
      "http://localhost:3000",
      "https://your-domain.com"
    ],
    "AllowedMethods": [
      "GET",
      "PUT"
    ],
    "AllowedHeaders": [
      "Content-Type"
    ],
    "ExposeHeaders": [
      "ETag"
    ]
  }
]

You can now even set up object upload.

Manual Setup

If you prefer manual setup:

1. Create a Cloudflare account and install Wrangler CLI.
2. Create a D1 database: bunx wrangler d1 create ${dbName}
3. Create a .dev.vars file in the project root with your Google OAuth credentials and NextAuth secret.
4. Run local migration: bunx wrangler d1 execute ${dbName} --local --file=migrations/0000_setup.sql
5. Run remote migration: bunx wrangler d1 execute ${dbName} --remote --file=migrations/0000_setup.sql
6. Start development server: bun run dev
7. Deploy: bun run deploy

The Beauty of This Stack

• Fully scalable and composable
• No environment variables needed (use env.DB, env.KV, env.Queue, env.AI, etc.)
• Powerful tools like Wrangler for database management and migrations
• Cost-effective scaling (e.g., $5/month for multiple high-traffic projects)

Just change your Cloudflare account ID in the project settings, and you're good to go!