dhravya/cloudflare-saas-stack

Quickly make and deploy full-stack apps with database, auth, styling, storage etc. figured out for you.

🚀 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 the same stack I used to build Supermemory.ai which is open source at git.new/memory

The stack includes:

• Turborepo for monorepo management
• Next.js for frontend
• TailwindCSS for styling
• Drizzle ORM for database access
• NextAuth for authentication
• Cloudflare D1 for serverless databases
• Cloudflare Pages for hosting
• Biome for formatting and linting
• ShadcnUI as the component library

... while still being minimal and composable.

Getting started

To use, simply clone this repo by running the following commands:

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. Run the following commands:

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

That's it. You're ready to go! Next time, you can just run bun run dev and start developing.

When you're ready to deploy, run bun run deploy to deploy to Cloudflare.

If it fails, get your account id using these steps and set the CLOUDFLARE_ACCOUNT_ID environment variable to your account id. See this issue for details.

Manual setup

An automatic setup script is provided, but you can also manually set up the following:

1. Create a Cloudflare account and install the Wrangler CLI.
2. Create a D1 database under "Workers and Pages" in the Cloudflare dashboard, or run ``bunx wrangler d1 create ${dbName}`
3. Create a .dev.vars file in apps/web with the following content (Get these from google developer console):

GOOGLE_CLIENT_ID=${your-google-client-id}
GOOGLE_CLIENT_SECRET=${your-google-client-secret}
NEXTAUTH_SECRET=${your-secret}

4. In apps/web, run this command to make migrations to setup auth with database: bunx wrangler d1 execute ${dbName} --local --file=migrations/0000_setup.sql. This creates a local version of the database and creates the appropriate tables.
5. Run remote migration for the production database - same command but replace --local with --remote: bunx wrangler d1 execute ${dbName} --remote --file=migrations/0000_setup.sql
6. Bun bun run dev to start the development server.
7. Run bun run deploy to deploy to Cloudflare.

The beauty of this stack

It's fully scalable and composable. Want to add a backend hono worker, or a python backend? sure! Just put it in the monorepo and deploy.

there's no environment variables. want to use database? just env.DB. Want a Key-value instance? env.KV. want a queue? env.Queue.

want AI? env. AI

tools are incredible. there's wrangler - you can use wrangler to create/delete databases run migrations and all sorts.

Getting a lot of traffic? me too. I pay $5/month, for all of my projects hosted at the same time. (see https://supermemory.ai, https://md.dhr.wtf and more)

cloudflare-saas-stack's Issues

Where to create new pages?

It's been awhile since I've used NextJS, please forgive me if this is a dumb question:

Where do I add new routes?

If I e.g. want to create e.g. localhost:3000/hello where should that go?

I've tried:

/apps/web/hello.tsx
/apps/web/app/hello.tsx
/apps/web/app/pages/hello.tsx
/apps/web/pages/hello.tsx

The Next docs seem to diverge from this project structure
https://nextjs.org/docs/app/building-your-application/routing

stuck in creating a new project when deploy

It's stuck when creating a new project when deploying.

web:deploy: ▲  Route (app)                              Size     First Load JS
web:deploy: ▲  ┌ ƒ /                                    1.62 kB        88.8 kB
web:deploy: ▲  ├ ○ /_not-found                          873 B            88 kB
web:deploy: ▲  ├ ƒ /api/[...nextauth]                   0 B                0 B
web:deploy: ▲  ├ ƒ /api/hello                           0 B                0 B
web:deploy: ▲  ├ ƒ /api/upload_image                    0 B                0 B
web:deploy: ▲  └ ○ /upload                              58.1 kB         145 kB
web:deploy: ▲  + First Load JS shared by all            87.2 kB
web:deploy: ▲  ├ chunks/1dd3208c-51bcef33bceef2af.js  53.6 kB
web:deploy: ▲  ├ chunks/874-8ef378c567c69127.js       31.6 kB
web:deploy: ▲  └ other shared chunks (total)          1.97 kB
web:deploy: ▲  ○  (Static)   prerendered as static content
web:deploy: ▲  ƒ  (Dynamic)  server-rendered on demand
web:deploy: ▲  Traced Next.js server files in: 16.534ms
web:deploy: ▲  Created all serverless functions in: 13.26ms
web:deploy: ▲  Collected static files (public/, static/, .next/static): 3.402ms
web:deploy: ▲  Build Completed in .vercel/output [11s]
web:deploy: ⚡️ Completed `bunx vercel build`.
web:deploy:
web:deploy: ⚡️ Build Summary (@cloudflare/next-on-pages v1.12.1)
web:deploy: ⚡️
web:deploy: ⚡️ Edge Function Routes (4)
web:deploy: ⚡️   ┌ /
web:deploy: ⚡️   ├ /api/[...nextauth]
web:deploy: ⚡️   ├ /api/hello
web:deploy: ⚡️   └ /api/upload_image
web:deploy: ⚡️
web:deploy: ⚡️ Prerendered Routes (3)
web:deploy: ⚡️   ┌ /favicon.ico
web:deploy: ⚡️   ├ /upload
web:deploy: ⚡️   └ /upload.rsc
web:deploy: ⚡️
web:deploy: ⚡️ Other Static Assets (36)
web:deploy: ⚡️   ┌ /_app.rsc.json
web:deploy: ⚡️   ├ /_document.rsc.json
web:deploy: ⚡️   ├ /_error.rsc.json
web:deploy: ⚡️   ├ /404.html
web:deploy: ⚡️   └ ... 32 more
web:deploy:
web:deploy: ⚡️ Build log saved to '.vercel/output/static/_worker.js/nop-build-log.json'
web:deploy: ⚡️ Generated '.vercel/output/static/_worker.js/index.js'.
web:deploy: ⚡️ Build completed in 0.61s
web:deploy: The project you specified does not exist: "cloudflare-saas-starter". Would you like to create it?
web:deploy: ❯ Create a new project

Error while developing

Hi, @Dhravya Thanks for you excellent works!
Everything is all right only while I runned in development mode with bun run dev, and then i visited the home page click Login in google and there is nothing happens , and I found there is a error in the console.

OS: macos
Node: v20.12.0
Browser: both chrome and firefox are latest version

Missing Opensource license

Please add a permissive license so that we can use this repo as a jumping off point for startup ideas. e.g. NextJS uses MIT License: https://github.com/vercel/next.js/blob/canary/license.md

Issue: Dependency Conflict in Cloudflare Deployment

Hello!

The next-auth package version 5.0.0-beta.19 requires next@14 or higher, but our project is using [email protected]. This causes a dependency conflict during the Cloudflare Pages deployment, resulting in a failed build. Is there a conflict between versions of Cloudfare and Next?

Thanks!

Randomly stopping google input

I ran the setup on ubuntu, then suddenly the setup scripts stops when asking for google ID promt. I can't understand who though.

Issue: `@repo` related packages not found when running `bun install`

Steps to reproduce

I ran the following commands in order:

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

And then I found the issue in the bun install steps:

What I have tried so far

• Run npm install turbo --global to install Turborepo globally
• Run npm install turbo --save-dev to install Turborepo locally

I am new to Turborepo so not sure if this has to do with Turborepo or this project. I hope it might be useful to some people who stumbled upon this so I submitted the issue here. Thank you for your hard work!

A bit about my setup: Macbook M1 on Sonoma 14.5 with iTerm.

unable to run drizzle kit commands

This might be user error on my part, but i am not able to run drizzle-kit commands like push or studio. For example, when i run
bunx drizzle-kit studio
drizzle.config.json doesn't exist

Feels like i am doing something wrong, but not sure what.

Error after first deploy

After a first deploy i still get an error. I'm not too familiar with this env so I'm not sure where to check.

Everything logs ok in real time logs too:

Any idea why ?

Elaborate on environmental variables?

Thanks for the stack! Love it.

I have some questions regarding the environmental variables.

• I see the setup script create .dev.vars for you. Why is it not .env file that many other next.js project use?
• How do I set them up for production?
• I'm also confused by this:

there's no environment variables. want to use database? just env.DB. Want a Key-value instance? env.KV. want a queue? env.Queue.

Does that mean we should use different files for different env vars? Like OpenAI key should be in a file called env.AI?

deploy failed

Everything worked fine util I run bun run deploy, would you please help me?

bun run deploy
$ turbo deploy
• Packages in scope: @repo/eslint-config, @repo/shared-types, @repo/tailwind-config, @repo/typescript-config, @repo/ui, web
• Running deploy in 6 packages
• Remote caching disabled
web:deploy: cache miss, executing 3e73eb0ca86ae74c
web:deploy: $ bun pages:build && wrangler pages deploy
web:deploy: $ bunx @cloudflare/next-on-pages
web:deploy: ⚡️ @cloudflare/next-on-pages CLI v.1.12.1
web:deploy: ⚡️ Detected Package Manager: bun (1.1.20)
web:deploy: ⚡️ Preparing project...
web:deploy: ⚡️ Project is ready
web:deploy: ⚡️ Building project...
web:deploy: ▲  (node:36041) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
web:deploy: ▲  (Use `node --trace-deprecation ...` to show where the warning was created)
web:deploy: ▲  (node:36041) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
web:deploy: ▲  Vercel CLI 34.4.0
web:deploy: ▲  Detected `bun.lockb` generated by [email protected]
web:deploy: ▲  Warning: Bun is used as a package manager at build time only, not at runtime with Functions
web:deploy: ▲  WARNING: You should not upload the `.next` directory.
web:deploy: ▲  Installing dependencies...
web:deploy: ▲  bun install v1.1.20 (ae194892)
web:deploy: ▲
web:deploy: ▲  Checked 1179 installs across 1167 packages (no changes) [625.00ms]
web:deploy: ▲  Detected Next.js version: 14.2.5
web:deploy: ▲  Running "bun run build"
web:deploy: ▲  $ next build
web:deploy: ▲  Attention: Next.js now collects completely anonymous telemetry regarding usage.
web:deploy: ▲  This information is used to shape Next.js' roadmap and prioritize features.
web:deploy: ▲  You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
web:deploy: ▲  https://nextjs.org/telemetry
web:deploy: ▲  ▲ Next.js 14.2.5
web:deploy: ▲
web:deploy: ▲  Creating an optimized production build ...
web:deploy: ▲  (node:36239) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
web:deploy: ▲  (Use `node --trace-deprecation ...` to show where the warning was created)
web:deploy: ▲  Failed to compile.
web:deploy: ▲  ../../packages/ui/hooks/use-controllable-state.ts
web:deploy: ▲  Module not found: Can't resolve '@repo/ui/hooks/use-callback-ref.js'
web:deploy: ▲
web:deploy: ▲  https://nextjs.org/docs/messages/module-not-found
web:deploy: ▲
web:deploy: ▲  Import trace for requested module:
web:deploy: ▲  ./app/upload/file-uploader.tsx
web:deploy: ▲  ./app/upload/page.tsx
web:deploy: ▲
web:deploy: ▲  > Build failed because of webpack errors
web:deploy: ▲  error: script "build" exited with code 1
web:deploy: ▲  Error: Command "bun run build" exited with 1
web:deploy:
web:deploy: ⚡️ The Vercel build (`bunx vercel build`) command failed. For more details see the Vercel logs above.
web:deploy: ⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
web:deploy:
web:deploy: error: script "pages:build" exited with code 1
web:deploy: error: script "deploy" exited with code 1
web:deploy: ERROR: command finished with error: command (/Users/javayhu/workspace/github/cloudflare-saas-stack/apps/web) /Users/javayhu/.nvm/versions/node/v22.2.0/bin/bun run deploy exited (1)
web#deploy: command (/Users/javayhu/workspace/github/cloudflare-saas-stack/apps/web) /Users/javayhu/.nvm/versions/node/v22.2.0/bin/bun run deploy exited (1)

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    7.697s
Failed:    web#deploy

 ERROR  run failed: command  exited (1)
error: script "deploy" exited with code 1

error while setup

While running > bun run setup
gives below error

Issue: D1 not storing authenticates users, empty.

I ran all the commands mentioned :

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

On localHost, i am able to properly login, using google, and it properly displays how many users are in the DB:

But when I try to check my D1 database in my Cloudflare account, its empty:

I have tried running this command : bun run deploy

it properly hosts my site on a random domain...

I have added that domain to my Google Cloud Console, but when i try to authenticate on the deployed domain, i get the following error:

What step am i missing?

how to upload an image?

How can I upload an image?

I already set env vars in dev.vars file and CORS policy in R2 settings, but failed to upload an image.

Tailwind CSS

You repeated the Tailwind CSS 2 times at README.

Deploy to Cloudflare

Amazing work, man! Very good template.

Do you have your Cloudflare deployment working in Pages with GitHub integration?

I tried deploying it using the root directory like apps/web, but it always failed on install.

Then I saw that there is a script in apps/web (pages:build) for this. I created a new script in the root directory that pointed to turborepo to make it run.

The deployment works fine, but it appears to be missing the D1 database or have something wrong with DrizzleAdapter, perhaps because I'm now running in the root directory and it doesn't identify wrangler.toml? Have you ever seen something like this?

PS: If we make this work, I would love to help buid a guide/documentation to deploy this monorepo on Cloudflare

Error using D1+Auth.js in CF Starter - [auth][details] TypeError: immutable

Something strange happened where the auth with dropbox worked the first time, and then stopped working.

Changes

Below are the only changes made after bootstrapping using bun setup

// apps/web/app/server/auth.ts
providers: [
  {
    id: 'dropbox',
    name: 'Dropbox',
    type: 'oidc',
    clientId: process.env.AUTH_DROPBOX_ID,
    clientSecret: process.env.AUTH_DROPBOX_SECRET,
    allowDangerousEmailAccountLinking: true,
    issuer: 'https://www.dropbox.com',
    wellKnown: 'https://www.dropbox.com/.well-known/openid-configuration',
    authorization: {
      url: 'https://www.dropbox.com/oauth2/authorize',
      params: {
        scope: 'openid profile email account_info.read files.content.read', //files.metadata.read
        token_access_type: 'offline',
        response_type: 'code', // OICD
      },
    },
    // Dropbox always provides a verified email: https://developers.dropbox.com/oidc-guide
    token: {
      url: 'https://api.dropboxapi.com/oauth2/token',
    },
    profile(profile) {
      return {
        ...profile,
        name: profile.given_name,
      };
    },
  },
],

// apps/web/app/page.tsx
await signIn('dropbox'); // Switch from await signIn('google');

Trace

web:dev:  ⨯ Error [TypeError]: immutable
web:dev:     at _Headers.delete (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/compiled/edge-runtime/index.js:1:657096)
web:dev:     at <unknown> (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/web/sandbox/sandbox.js:117:47)
web:dev:     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
web:dev:     at async runWithTaggedErrors (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/web/sandbox/sandbox.js:107:9)
web:dev:     at async DevServer.runEdgeFunction (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/next-server.js:1201:24)
web:dev:     at async NextNodeServer.handleCatchallRenderRequest (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/next-server.js:248:37)
web:dev:     at async DevServer.handleRequestImpl (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/base-server.js:816:17)
web:dev:     at async (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/dev/next-dev-server.js:339:20)
web:dev:     at async Span.traceAsyncFn (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/trace/trace.js:154:20)
web:dev:     at async DevServer.handleRequest (file:///Users/someone/Projects/dropbox-cms/node_modules/next/dist/server/dev/next-dev-server.js:336:24)

Related conversation:

nextauthjs/next-auth#9966

Bun?

Thoughts on using Bun instead of npm?

https://bun.sh/

Cannot read properties of undefined reading "default" error on Windows when running project locally

I followed your steps regarding how to run the project, but i keep getting this error

low cost deployment

Sorry wasn't supposed to create an issue - my bad 😅 closing it

Some SAAS functionality is missing (e.g. Payments/Stripe, Organization/Multi Tenancy)

First of all,

Great job on this + releasing this to the public for free - very kind of you.
The features above (maybe more), but at minimum, a way to collect payments would make this more complete SAAS kit. I'm guessing PR's are welcome?

Again, great job. I'll be slowly migrating most of my projects to Cloudflare thanks to a few of your posts on twitter.

Cheers!

Few clarifications

1. Clone repo is not same as running given commands?
2. Wrangler needs to be installed within cloduflare-saas-stack directory?