Cloudflare Workers SaaS Template

Live Demo

Github Repo

This is a SaaS template for Cloudflare Workers. It uses the OpenNext framework to build a SaaS application.

Have a look at the project plan to get an overview of the project.

Tip

This template is brought to you by 👉 StartupStudio.dev 👈 - where we help businesses automate operations and boost productivity through custom AI implementations. Just like this open-source project demonstrates technical excellence, we deliver:

Process automation with LLM-powered workflows
AI strategy consulting for sustainable scaling
Custom SaaS development using cutting-edge stacks

Hundrets of developers already trust our codebase - Just Imagine what we could build for your business.

Supported Features:

🔐 Authentication with Lucia Auth
- 📧 Email/Password Sign In
- 📝 Email/Password Sign Up
- 🔑 WebAuthn/Passkey Authentication
- 🌐 Google OAuth/SSO Integration
- 🔄 Forgot Password Flow
- 🔒 Change Password
- ✉️ Email Verification
- 🗝️ Session Management with Cloudflare KV
- 🤖 Turnstile Captcha Integration
- ⚡ Rate Limiting for Auth Endpoints
- 🛡️ Protected Routes and Layouts
- 📋 Session Listing and Management
- 🔒 Anti-Disposable Email Protection
💾 Database with Drizzle and Cloudflare D1
- 🏗️ Type-safe Database Operations
- 🔄 Automatic Migration Generation
- 💻 SQLite for Local Development
- ⚡ Efficient Data Fetching
📨 Email Service with React Email and Resend or Brevo
- 🎨 Beautiful Email Templates
- 👀 Email Preview Mode
- 🔧 Local Email Development Server
- 📬 Transactional Emails
- ✉️ Email Verification Flow
🚀 Deployment with Github Actions
- ⚙️ Automatic Deployments
- 🔐 Environment Variables Management
- 📦 Database Migrations
- 🔄 Comprehensive CI/CD Pipeline
🎨 Modern UI
- 🎨 Tailwind CSS
- 🧩 Shadcn UI Components
- 🌓 Dark/Light Mode
- 📱 Responsive Design
- ⚡ Loading States and Animations
- 🔔 Toast Notifications
- ⚙️ Settings Dashboard
- 🏠 Landing Page
- ✨ Beautiful Email Templates
- 👤 Profile Settings Page
✨ Validations with Zod and React Hook Form
- 🛡️ Type-safe Form Validations
- 🔒 Server-side Validations
- 🔍 Client-side Validations
- 🧹 Input Sanitization
👨‍💻 Developer Experience
- 📘 TypeScript Support
- 🔍 ESLint Configuration
- ✨ Prettier Configuration
- 🔐 Type-safe Environment Variables
- 🏗️ Cloudflare Types Generation
- 🤖 AI-powered Development with Cursor
- 📚 Comprehensive Documentation
- 📐 Project Structure Best Practices
⚡ Edge Computing
- 🌍 Global Deployment with Cloudflare Workers
- 🚀 Zero Cold Starts
- 💨 Edge Caching
- ⚛️ React Server Components
- 🖥️ Server-side Rendering
- 💾 Edge Database with D1
- 🗄️ Session Storage with KV

Planned features (TODO):

Running it locally

pnpm install
Copy .dev.vars.example to .dev.vars and fill in the values.
Copy .env.example to .env and fill in the values.
pnpm db:migrate:dev - Creates a local SQLite database and applies migrations
pnpm dev
Open http://localhost:3000

Changes to wrangler.json

After making a change to wrangler.json, you need to run pnpm cf-typegen to generate the new types.

Things to change and customize before deploying to production

Go to src/constants.ts and update it with your project details
Update the documentation in ./cursor-docs with your project details so that Cursor AI can give you better suggestions
Update the footer in src/components/footer.tsx with your project details and links
Optional: Update the color palette in src/app/globals.css
Update the metadata in src/app/layout.tsx with your project details

Deploying to Cloudflare with Github Actions

Create D1 and KV namespaces
Set either RESEND_API_KEY or SENDGRID_API_KEY as a secret in your Cloudflare Worker depending on which email service you want to use.
Create a Turnstile catcha in your Cloudflare account, and set the NEXT_PUBLIC_TURNSTILE_SITE_KEY as a Github Actions variable.
Set TURNSTILE_SECRET_KEY as a secret in your Cloudflare Worker.
Update the wrangler.json file with the new database and KV namespaces and env variables. If you change the D1 database name, you also need to update the db:migrate:dev script in the package.json file.
Go to https://dash.cloudflare.com/profile/api-tokens and click on "Use template" next to "Edit Cloudflare Workers". On the next, page add the following permissions in addition to the ones from the template:
- Account:AI Gateway:Edit
- Account:Workers AI:Edit
- Account:Queues:Edit
- Account:Vectorize:Edit
- Account:D1:Edit
- Account:Cloudflare Images:Edit
- Account:Workers KV Storage:Edit
- Zone:Cache Purge:Purge
Add the API token to the Github repository secrets as CLOUDFLARE_API_TOKEN
Add the Cloudflare account id to the Github repository variables as CLOUDFLARE_ACCOUNT_ID
Optional: If you want clear the CDN cache on deploy, add CLOUDFLARE_ZONE_ID to the Github repository variables for the zone id of your domain. This is the zone id of your domain, not the account id.
Add the database name to the Github repository variables as DATABASE_ID. This should match the database name in the wrangler.json file.
Push to the main branch

Email templates

If you want to preview and edit the email templates you can:

pnpm email:dev
Open http://localhost:3001
Edit the email templates in the src/react-email folder
For inspiration you can checkout https://react.email/templates

How to upgrade this template

Since this template is based on the OpenNext framework we need to make sure that we are following the changes they are making and update this template accordingly.

To see the changes clone https://github.com/cloudflare/workers-sdk and then do git diff f9fd9df...main -- packages/create-cloudflare/templates-experimental/next/ you will see the changes that we need to make to this template.

LubomirGeorgiev/cloudflare-workers-nextjs-saas-template