Cloudflare Deployment

Deploy your SaaS to Cloudflare Pages with zero configuration. Get global edge deployment, automatic builds, and seamless Git integration.

The boilerplate supports zero-configuration deployment to Cloudflare Pages. Cloudflare automatically detects your Nuxt configuration and deploys your application to its global edge network.

What's Included

The Cloudflare deployment setup provides:

  • Edge function deployment
  • Global CDN
  • Automatic HTTPS and SSL
  • Git integration with automatic builds
  • Preview deployments for all branches
  • Environment variable management

Note: The boilerplate includes example configurations for using SST.dev to easily add Cloudflare D1, R2, Queues, and other services to your application.

Deployment Steps

Git Integration

  1. Push your code to a Git provider: 
    git add .
git commit -m "Ready for deployment"
git push origin main
  2. Connect your repository in Cloudflare Pages
  3. Cloudflare will automatically detect Nuxt and configure the build settings

Direct Upload

Alternatively, you can deploy directly using Wrangler:

  1. Build your project:
    pnpx nuxi build --preset=cloudflare_pages
  2. Deploy using Wrangler:
    pnpx wrangler pages deploy dist/

Environment Configuration

Set your environment variables in the Cloudflare dashboard:

DATABASE_URL=postgresql://...
# Add other environment variables from .env

Route Configuration

To match Cloudflare's route handling, update your nuxt.config.ts:

export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    }
  }
})

Key Features

  1. Edge Network: Global low-latency deployment
  2. Zero Configuration: Automatic platform detection
  3. Preview Deployments: Every deployment gets a unique URL
  4. Git Integration: Automatic builds and deployments

Best Practices

  1. Use preview deployments for testing changes
  2. Configure branch protection rules
  3. Use Cloudflare's environment variable UI for secrets

Need Help?