🚀 Full-Stack Cloudflare SaaS Kit with Remix

Build and deploy scalable products on Cloudflare with ease.

An opinionated, batteries-included starter kit for quickly building and deploying SaaS products on Cloudflare using Remix. This template provides everything you need for a modern, secure web application.

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

• Remix for full-stack development
• TailwindCSS for styling
• Drizzle ORM for database access
• Better-Auth for authentication
• Cloudflare D1 for serverless databases
• Cloudflare Workers for hosting
• ShadcnUI as the component library

Getting Started

1. Make sure you have Wrangler installed and are logged in with wrangler login

2. Clone and install dependencies:

   git clone <your-repo>
   cd <your-repo>
   npm install
   npm run setup

3. Run the development server:

   npm run dev

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

Cloudflare Integration

The template includes several scripts for Cloudflare Workers integration:

• build: Build the application for Workers using Remix
• preview: Locally preview your Workers application using Wrangler
• deploy: Deploy your Workers application using Wrangler
• typegen: Generate typescript types for Cloudflare env

Note: While the dev script is optimal for local development, you should preview your Workers application periodically to ensure it works properly in the Workers 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

Quick explanation of D1 setup:

• D1 is a serverless database that follows SQLite convention
• Within Cloudflare Workers, you can directly query D1 with client api exposed by bindings (eg. env.DB)
• You can also query D1 via rest api
• Locally, Wrangler auto-generates sqlite files at .wrangler/state/v3/d1 after npm run dev
• Local dev environment interacts with local D1 session

To manage your database:

1. Create a new migration:

   npm run db:generate

2. Apply migrations to local D1:

   npm run db:push

3. Apply migrations to production D1:

   npm run db:deploy

The template uses Drizzle ORM to manage database schema and migrations:

• Schema is defined in app/db/schema.ts
• Migrations are stored in drizzle directory
• Configuration is in drizzle.config.ts