Skip to main content

Deploy to Cloudflare Pages

Deploy your SvelteBolt application to Cloudflare Pages with edge computing and global performance in under 10 minutes.

Prerequisites​

  • SvelteBolt project ready locally
  • GitHub/GitLab account with your code pushed
  • Cloudflare account (free tier available)
  • Supabase project configured with database schema and auth enabled
  • Stripe account with API keys (for payments)

Step 1: Prepare SvelteKit for Cloudflare​

SvelteBolt uses adapter-auto by default, which automatically detects the deployment platform and installs the appropriate adapter. For Cloudflare Pages, this means @sveltejs/adapter-cloudflare will be installed automatically during the build process.

However, if you want to configure Cloudflare-specific options, you can explicitly install and configure the Cloudflare adapter:

import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      // routes: {
      //   include: ['/*'],
      //   exclude: ['<all>']
      // }
    }),
  },
};

export default config;

Install Cloudflare adapter (optional):

bun add -D @sveltejs/adapter-cloudflare
# or
npm install -D @sveltejs/adapter-cloudflare

Note: The respective adapter will be installed by default when you use adapter-auto, but adding it to your project allows you to specify Cloudflare-specific options like custom routing configuration.

Step 2: Connect Repository​

  1. Go to dash.cloudflare.com
  2. Navigate to Pages in the sidebar
  3. Click "Create a project"
  4. Choose "Connect to Git"
  5. Connect your Git provider (GitHub/GitLab)
  6. Select your SvelteBolt repository
  7. Click "Begin setup"

Step 3: Configure Build Settings​

Set up the build configuration:

Framework preset: SvelteKit Build command: bun run build (or npm run build) Build output directory: .svelte-kit/cloudflare Root directory: / (leave empty if project is in root)

Advanced settings:

  • Node.js version: 18 or 20
  • Environment variables: (add in next step)

Step 4: Environment Variables​

Add environment variables in Cloudflare Pages:

  1. In the setup page, scroll to "Environment variables"
  2. Add each variable for Production:
# Supabase (Required - Main Database)
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
SUPABASE_SERVICE_ROLE_SECRET=eyJhbGciOiJIUzI1NiIsInR5cCI6...

# Stripe (Required for payments)
PUBLIC_STRIPE_KEY=pk_live_51ABC123...
STRIPE_SECRET_KEY=sk_live_51ABC123...
STRIPE_WEBHOOK_SECRET=whsec_ABC123...

# Node.js compatibility
NODE_VERSION=18
  1. For Preview environment (optional):
    • Add same variables for staging/preview deployments
    • Can use test keys for non-production environment

Step 5: Deploy​

  1. Click "Save and Deploy"
  2. Wait 3-5 minutes for build to complete
  3. Your app will be live at https://your-project.pages.dev

Step 6: Update Stripe Webhooks​

Important: Update your Stripe webhook URL:

  1. Go to Stripe Dashboard → Developers → Webhooks
  2. Select your webhook endpoint
  3. Update the URL to: https://your-project.pages.dev/api/stripe/webhook
  4. Save changes

Step 7: Configure Supabase for Production​

Important: Add your Cloudflare domain to Supabase settings:

  1. Go to Supabase Dashboard → Authentication → URL Configuration
  2. Add Site URL: https://your-project.pages.dev
  3. Add Redirect URLs:
    • https://your-project.pages.dev/auth/callback
    • https://your-project.pages.dev/auth/confirm
  4. Save configuration

For custom domains:

  • Update Site URL to your custom domain
  • Add custom domain to redirect URLs
  • Update any hardcoded URLs in your app

Custom Domain (Optional)​

  1. In Cloudflare Pages dashboard, go to your project
  2. Click "Custom domains" tab
  3. Add your custom domain
  4. Configure DNS (automatic if domain is on Cloudflare)
  5. SSL automatically enabled
  6. Update Stripe webhook URL to use custom domain

Cloudflare Features​

Edge Computing​

  • Global distribution across 200+ data centers
  • Ultra-low latency for users worldwide
  • Edge functions for server-side logic

Preview Deployments​

  • Every pull request gets a unique preview URL
  • Test changes before going live
  • Share previews with team members

Analytics & Performance​

  • Web Analytics built-in (privacy-focused)
  • Core Web Vitals monitoring
  • Performance insights and optimization suggestions

Troubleshooting​

Common SvelteKit + Cloudflare Issues​

❌ "Module not found" errors:

// Add to vite.config.ts
export default {
  define: {
    global: "globalThis",
  },
};

❌ Build fails with adapter error:

# Ensure correct adapter in svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare';

❌ Functions timeout (1 minute limit):

  • Optimize database queries
  • Use Cloudflare Workers for longer processes
  • Consider async processing for heavy operations

❌ Runtime compatibility issues:

// Add to svelte.config.js
const config = {
  kit: {
    adapter: adapter({
      platformProxy: {
        configPath: "wrangler.toml",
        environment: undefined,
        experimentalJsonConfig: false,
        persist: false,
      },
    }),
  },
};

❌ Environment variables not working:

  • Check variables are set for correct environment (Production/Preview)
  • Redeploy after adding new variables
  • Verify names match exactly (case-sensitive)

❌ Supabase connection issues:

  • Add your Cloudflare domain to Supabase CORS settings
  • Check service role permissions
  • Verify URL format is correct
  • Ensure database schema is properly migrated
  • Check if Row Level Security (RLS) policies are correctly configured
  • Ensure Supabase project is not paused (free tier limitation)
  • Test Supabase connection with a simple query first
  • Check if auth providers are enabled in Supabase dashboard
  • Verify email templates are configured for auth flows

Performance Optimization​

Add wrangler.toml for advanced configuration:

name = "sveltebolt-app"
compatibility_date = "2023-10-30"

[env.production]
route = "https://yourdomain.com/*"

[env.preview]
route = "https://preview.yourdomain.com/*"

[[env.production.vars]]
ENVIRONMENT = "production"

[[env.preview.vars]]
ENVIRONMENT = "preview"

Optimize for Cloudflare:

  • Use Cloudflare Images for image optimization
  • Enable R2 storage for file uploads
  • Use Cloudflare KV for caching
  • Implement edge caching strategies

Working with Cloudflare Workers​

For advanced functionality, integrate Workers:

// workers/api.js
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    if (url.pathname.startsWith("/api/")) {
      // Handle API requests at the edge
      return new Response("Hello from Cloudflare Workers!");
    }

    // Forward to SvelteKit
    return env.ASSETS.fetch(request);
  },
};

Advanced Features​

R2 Storage​

For file uploads and storage:

// Upload to R2
export async function POST({ request, platform }) {
  const formData = await request.formData();
  const file = formData.get("file");

  await platform.env.BUCKET.put(`uploads/${file.name}`, file.stream());

  return json({ success: true });
}

Monitoring​

Check these after deployment:

✅ Site loads correctly at your Cloudflare URL
✅ Supabase database connection works (test with a simple query)
✅ Authentication works (login/signup with Supabase Auth)
✅ Database queries execute (check your app's main features)
✅ Stripe payments process successfully
✅ Webhooks receive events (check function logs)
✅ API routes respond correctly
✅ Global performance is optimal

Supabase-specific checks:

  • Test user registration and email verification
  • Verify Row Level Security policies work as expected
  • Check real-time subscriptions if your app uses them
  • Ensure file uploads work if using Supabase Storage

Monitor in Cloudflare dashboard:

  • Analytics tab for traffic and performance
  • Functions tab for Worker logs and errors
  • Security tab for threat monitoring
  • Speed tab for Core Web Vitals

Next Steps​

  • Set up environment secrets properly
  • Configure custom domain
  • Explore Cloudflare Workers for edge computing
  • Set up D1 database for edge data storage
  • Enable Web Analytics for insights