Cloudflare SaaS Stack

この紹介文は現在英語版のみです。

Build and deploy scalable products on Cloudflare with ease.

Note: This is the same stack used to build Supermemory.ai which is open source at git.new/memory. Supermemory now has 20k+ users and runs on $5/month, proving its effectiveness.

Overview

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

Tech Stack

• Frontend: Next.js
• Styling: TailwindCSS
• Database: Drizzle ORM + Cloudflare D1
• Authentication: NextAuth
• Hosting: Cloudflare Pages
• UI Components: ShadcnUI

Quick Start

Prerequisites

1. Install Wrangler
2. Log in to Cloudflare: wrangler login

Installation

# Clone the repository
git clone https://github.com/Dhravya/cloudflare-saas-stack
cd cloudflare-saas-stack

# Install dependencies
npm i -g bun
bun install
bun run setup

Development

# Start development server
bun run dev

Visit http://localhost:3000 to see your application.

Cloudflare Integration

The project includes several scripts for Cloudflare Pages integration:

• pages:build: Build for Pages using @cloudflare/next-on-pages
• preview: Local preview using Wrangler
• deploy: Deploy to Pages using Wrangler
• cf-typegen: Generate TypeScript types for Cloudflare env

Tip: While dev is optimal for local development, regularly preview your Pages application to ensure compatibility.

Database Setup

D1 Overview

• Serverless SQLite-compatible database
• Accessible via:
  • Client API (through bindings)
  • REST API
• Local development uses SQLite files at .wrangler/state/v3/d1

Database Commands

# Generate migrations
bun run db:generate

# Apply migrations
bun run db:migrate:dev    # Development
bun run db:migrate:prd    # Production

# Database inspection
bun run db:studio:dev     # Local database
bun run db:studio:prod    # Remote database

R2 Bucket Configuration

CORS Policy

Add this CORS policy to your R2 bucket:

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

Manual Setup Guide

1. Initial Setup

   • Create Cloudflare account
   • Install Wrangler CLI

2. Database Creation

   bunx wrangler d1 create ${dbName}

3. Environment Configuration Create .dev.vars with:

   • AUTH_SECRET (generate with openssl rand -base64 32 or bunx auth secret)
   • AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET
     • Set up OAuth consent screen
     • Create credentials
     • Add authorized origins and redirect URIs

4. Database Migration

   # Generate migrations
   bun run db:generate
   
   # Local migration
   bun run db:migrate:dev
   
   # Remote migration
   bun run db:migrate:prod

5. Deployment

   bun run dev     # Development
   bun run deploy  # Production

Benefits

• Scalability: Fully scalable and composable architecture
• Simplicity: No environment variables needed (use env.DB, env.KV, etc.)
• Powerful Tools: Wrangler for database management and migrations
• Cost-Effective: Efficient scaling (e.g., $5/month for high-traffic projects)

Tip: Just update your Cloudflare account ID in project settings to get started!