Cloudflare (Using D1 Database)

Switch to the cloudflare-d1 Branch

Clone the cloudflare-d1 branch of the MkSaaS template repository, and push the code to your new GitHub repository:

# Clone the cloudflare-d1 branch of the MkSaaS template repository
git clone -b cloudflare-d1 https://github.com/MkSaaSHQ/mksaas-template.git <your-project-name>
cd <your-project-name>

# Add the upstream repository and fetch the latest changes
git remote add upstream https://github.com/MkSaaSHQ/mksaas-template.git
git fetch upstream

# Remove the origin repository and add your new GitHub repository
git remote remove origin
git remote add origin <your-repository-url>

# Rename the branch to main and push the changes to the origin repository
git branch -M main
git push -u origin main

Install Dependencies

Install all required dependencies including Wrangler CLI:

pnpm install

Install Wrangler CLI

Install the Wrangler CLI, and then run wrangler login to login to your Cloudflare account.

pnpm install -g wrangler

# Login to your Cloudflare account
wrangler login

Set Wrangler configuration name

Set the name in wrangler.jsonc file to your project name:

{
  "name": "your-project-name"
}

Create D1 Database

1. Go to the Cloudflare Dashboard
2. Navigate to Storage & Databases → D1 Databases
3. Click Create database
4. Enter a database name (e.g., mksaas-demo)
5. Select the database location (recommend choosing the region closest to your users)
6. Click Create to create the database

After creation, note down the Database ID, which you'll need for the next configuration step.

Configure D1 Database Binding

Add D1 database configuration to the wrangler.jsonc file:

{
  "name": "your-project-name",
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "YOUR_DATABASE_NAME_HERE",
      "database_id": "YOUR_DATABASE_ID_HERE"
    }
  ]
}

Replace database_name with your created database name, and replace database_id with the newly created database ID.

Configure Environment Variables

Set up your environment variables for both development and production:

1. For development: Copy the example files and configure them

   cp env.example .env
   cp dev.vars.example .dev.vars

2. Configure variables: Follow the Environment Setup Guide to set up all required environment variables in .env files, and leave .dev.vars as it is for now.

D1 database configuration example:

# For PostgreSQL(Supabase/Neon): Set DATABASE_URL and leave other D1 configuration empty
DATABASE_URL=""

# For Cloudflare D1: Leave DATABASE_URL empty and configure D1 bindings in wrangler.jsonc
CLOUDFLARE_ACCOUNT_ID="your_account_id_here"
CLOUDFLARE_DATABASE_ID="your_database_id_here"
CLOUDFLARE_API_TOKEN="your_api_token_here"

Initialize Database

After the database is created, you need to run database migrations to initialize the database structure:

pnpm db:generate
pnpm db:migrate

This command will create all necessary tables and structures according to your Drizzle ORM schema.

Generate types

After configuring .env and wrangler.jsonc files, generate Cloudflare-specific types:

pnpm run cf-typegen

This command will automatically generate the cloudflare-env.d.ts file containing type definitions for the Cloudflare Worker runtime environment.

Create a Cloudflare Worker Project

1. Go to the Cloudflare Dashboard
2. Navigate to Compute & AI → Workers and Pages → Create → Import a repository
3. Select your repository (use the main branch by default)
4. Configure the build settings:
   • Name: keep the name the same as the name in wrangler.jsonc file
   • Build command: Leave empty
   • Deploy command: pnpm run deploy
   • Root directory: Leave as default
   • Build Environment Variables: add NEXT_PUBLIC_BASE_URL variable, and set it to https://<your-project-name>.<account>.workers.dev or your custom domain

Configure Environment Variables

There are two ways to configure environment variables in Cloudflare Worker:

1. Configure the environment variables in Cloudflare Worker Dashboard

• Go to the Settings → Variables and Secrets
• Click + Add, and add all the environment variables in production environment
• Click Deploy to save the variables and trigger a build and deployment

2. Configure the environment variables with Wrangler CLI

Create a new .env.production file in your project root directory, and copy the environment variables in .env file to it:

# Copy the .env file to .env.production
cp .env .env.production

# Update the environment variables in .env.production
# For example, you need to update the NEXT_PUBLIC_BASE_URL environment variable
# Note: When using D1 database, DATABASE_URL should remain an empty string

# Set the environment variables in Cloudflare Worker with Wrangler CLI
# https://developers.cloudflare.com/workers/wrangler/commands/#secret-bulk
wrangler secret bulk .env.production

Deploy Your Application

You can deploy your application in two ways:

Option 1: Automatic Deployment

• Push your changes to the main branch (main branch is the default branch)
• Cloudflare will automatically trigger a build and deployment

Option 2: Manual Deployment

• Deploy directly from your local machine:

  pnpm run deploy

Set up custom domains

After successful deployment, your application will be available at auto-generated domain. You can:

• Set up custom domains, and Cloudflare will automatically create the DNS records for you
• Monitor your application in the Cloudflare Dashboard, like the Traffic and Logs