🚀 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

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

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

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:

Create a Cloudflare account and install Wrangler CLI.
Create a D1 database: bunx wrangler d1 create ${dbName}
Create a .dev.vars file in the project root with your Google OAuth credentials and NextAuth secret.
Run local migration: bunx wrangler d1 execute ${dbName} --local --file=migrations/0000_setup.sql
Run remote migration: bunx wrangler d1 execute ${dbName} --remote --file=migrations/0000_setup.sql
Start development server: bun run dev
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!

josescasanova/cloudflare-saas-stack