Skip to content

Cloudflare Pages Deployment

Overview

Novaqy Care Connect is deployed on Cloudflare Pages with edge workers for optimal global performance and low latency.

Prerequisites

  • Cloudflare account
  • Cloudflare Pages API token
  • Wrangler CLI installed

Initial Setup

1. Install Wrangler

npm install wrangler --save-dev

2. Authenticate

export CLOUDFLARE_API_TOKEN=your_api_token
export CLOUDFLARE_ACCOUNT_ID=your_account_id

3. Create Project

npx wrangler pages project create novaqy-staging --production-branch main

Deployment Process

Build Application

npm run build

This creates optimized static output in .vercel/output/static/

Deploy to Staging

npm run cf:deploy:staging

Equivalent to: 

npx wrangler pages deploy .vercel/output/static \
  --project-name novaqy-staging \
  --branch staging

Deploy to Production

npm run cf:deploy:production

Equivalent to: 

npx wrangler pages deploy .vercel/output/static \
  --project-name novaqy-production \
  --branch main

Environment Variables

Configure via CLI

# Set individual secret
npx wrangler pages secret put SUPABASE_SERVICE_ROLE_KEY \
  --project-name novaqy-staging

# Bulk import from .env.local
cat .env.local | grep -v "^#" | grep "=" | while IFS='=' read -r key value; do
  echo "Setting $key..."
  npx wrangler pages secret put "$key" \
    --project-name novaqy-staging <<< "$value"
done

Required Environment Variables

Supabase (Both Regions)

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
SUPABASE_PROJECT_ID

NEXT_PUBLIC_SUPABASE_US_URL
NEXT_PUBLIC_SUPABASE_US_ANON_KEY
SUPABASE_US_SERVICE_ROLE_KEY
SUPABASE_US_PROJECT_ID

Payment Gateway

NEXT_PUBLIC_RAZORPAY_KEY_ID
RAZORPAY_KEY_SECRET

Analytics

NEXT_PUBLIC_GA_MEASUREMENT_ID
NEXT_PUBLIC_GOOGLE_ADS_ID
NEXT_PUBLIC_FACEBOOK_PIXEL_ID

Integrations

NEXT_PUBLIC_SALESIQ_WIDGET_CODE
ZOHO_CLIENT_ID
ZOHO_CLIENT_SECRET
N8N_PAYMENT_WEBHOOK_URL
N8N_LEAD_WEBHOOK_URL

Custom Domains

Add Domain

npx wrangler pages domain add novaqy.com \
  --project-name novaqy-production

Add Subdomain

npx wrangler pages domain add app.novaqy.com \
  --project-name novaqy-production

Configure DNS

Add CNAME record: 

novaqy.com → novaqy-production.pages.dev

Deployment Environments

Staging

  • URL: https://staging.novaqy-staging.pages.dev
  • Branch: staging
  • Purpose: Testing before production
  • Auto-deploy: On push to staging branch

Production

  • URL: https://novaqy.com
  • Branch: main
  • Purpose: Live customer-facing site
  • Auto-deploy: On push to main branch

CI/CD Integration

GitHub Actions Workflow

Create .github/workflows/deploy-staging.yml:

name: Deploy to Staging

on:
  push:
    branches: [staging]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to Cloudflare Pages
        env:
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
        run: npm run cf:deploy:staging

Edge Functions

Compatibility Flags

Add to wrangler.toml: 

name = "novaqy-production"
compatibility_flags = ["nodejs_compat"]

[build]
command = "npm run build"

[env.production]
name = "novaqy-production"

[env.staging]
name = "novaqy-staging"

Node.js Compatibility

Enable in Cloudflare Dashboard: 1. Go to Pages project 2. Settings → Functions 3. Enable "nodejs_compat" compatibility flag

Performance Optimization

Edge Caching

Configure _headers file: 

/*
  Cache-Control: public, max-age=31536000, immutable

/_next/static/*
  Cache-Control: public, max-age=31536000, immutable

/api/*
  Cache-Control: no-store, no-cache, must-revalidate

Image Optimization

Use Cloudflare Images: 

const imageUrl = `https://imagedelivery.net/${accountHash}/${imageId}/public`

Monitoring

View Deployments

npx wrangler pages deployment list \
  --project-name novaqy-production

View Logs

npx wrangler pages deployment tail \
  --project-name novaqy-production

Analytics

Access via Cloudflare Dashboard: - Real-time traffic - Bandwidth usage - Request errors - Geographic distribution

Rollback Strategy

Rollback to Previous Deployment

  1. List deployments: 

    npx wrangler pages deployment list \
  --project-name novaqy-production

  2. Promote specific deployment: 

    npx wrangler pages deployment promote \
  <deployment-id> \
  --project-name novaqy-production

Git-based Rollback

git revert HEAD
git push origin main

This triggers auto-deployment of previous working commit.

Troubleshooting

Issue: 503 Service Unavailable

Cause: Deployment still propagating Solution: Wait 2-5 minutes for global edge deployment

Issue: Environment variables not working

Cause: Not set in Cloudflare Pages Solution: 

npx wrangler pages secret list --project-name novaqy-production
npx wrangler pages secret put MISSING_VAR --project-name novaqy-production

Issue: Build errors

Cause: Missing dependencies or incompatible Node version Solution: 

npm run build  # Test locally first
rm -rf .next node_modules
npm install
npm run build

Issue: Functions not working

Cause: Missing nodejs_compat flag Solution: Enable in Cloudflare Dashboard → Functions settings

Security Best Practices

  1. Use Secrets for Sensitive Data
  2. Never commit API keys to git

  3. Use wrangler secrets management

  4. Enable HTTPS Only

  5. Force HTTPS redirects in Cloudflare

  6. Configure HSTS headers

  7. Rate Limiting

  8. Configure Cloudflare rate limiting rules

  9. Protect API endpoints

  10. DDoS Protection

  11. Enable Cloudflare DDoS protection
  12. Configure firewall rules

Cost Optimization

Free Tier Limits

  • 500 builds per month
  • Unlimited requests
  • Unlimited bandwidth
  • 100 custom domains

Monitoring Usage

npx wrangler pages project view novaqy-production

Next Steps