Cloudflare

Switch to the Cloudflare Branch

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

# Clone the cloudflare branch of the MkSaaS template repository
git clone -b cloudflare 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

This will install all dependencies including the Wrangler CLI tool needed for Cloudflare Workers deployment.

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 up PostgreSQL Database

If you're using the default PostgreSQL database configuration, you'll need to set up a PostgreSQL database.

• For production, you can use the Hosted PostgreSQL Database, like Neon or Supabase.
• For local development, refer to the Database Guide for creating a local PostgreSQL instance.

Once you have your PostgreSQL database ready, note down the connection string in this format:

postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name

After the database is created, you need to initialize the database by following the Database Guide.

Configure Local Development Database

For local development, update the wrangler.jsonc file with your local PostgreSQL connection string:

{
  "hyperdrive": [
    {
      "binding": "HYPERDRIVE",
      "id": "YOUR_HYPERDRIVE_ID_HERE",
      "localConnectionString": "postgres://user:password@localhost:5432/your_local_database"
    }
  ]
}

Replace the localConnectionString with your actual local database connection string.

Configure Hyperdrive Binding

Hyperdrive accelerates database queries by pooling connections and caching requests. Create a Hyperdrive configuration for your production database:

npx wrangler hyperdrive create <NAME_OF_HYPERDRIVE_CONFIG> --connection-string="postgres://user:password@HOSTNAME_OR_IP_ADDRESS:PORT/database_name"

Replace the connection string with your actual PostgreSQL connection details. After successful creation, you'll receive a Hyperdrive ID that you can also view in your Cloudflare Dashboard.

Update the wrangler.jsonc file with your Hyperdrive ID:

{
  "hyperdrive": [
    {
      "binding": "HYPERDRIVE",
      "id": "YOUR_HYPERDRIVE_ID_HERE"
    }
  ]
}

Disable Hyperdrive Query Cache

1. Go to the Cloudflare Dashboard
2. Navigate to Storage & Databases → Hyperdrive
3. Click on the created Hyperdrive config, navigate to Settings
4. Click Disable Caching

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.

Set Wrangler configuration name

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

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

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(Workers) → 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 and DATABASE_URL environment variables

# 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