CloudFlare Integration

Learn how to deploy and integrate your ASSQ stack with CloudFlare's edge computing platform for maximum performance and global reach.

CloudFlare Services

Note: To use these features, you'll need to configure your wrangler.toml file with the appropriate bindings.

D1 Database

Cloudflare's serverless SQL database, perfect for relational data.

// In your API route
export async function GET({ locals }) {
  const { DB } = locals.runtime.env;
  const result = await DB.prepare(
    "SELECT * FROM users WHERE id = ?"
  ).bind(userId).first();
  return new Response(JSON.stringify(result));
}

KV Storage

Key-value storage for caching and session data.

// In your API route
export async function GET({ locals }) {
  const { KV } = locals.runtime.env;
  const value = await KV.get("myKey");
  await KV.put("myKey", "myValue", {
    expirationTtl: 60 * 60 * 24
  });
  return new Response(value);
}

Durable Objects

Stateful serverless computing for real-time applications.

// Define in your worker
export class Counter {
  constructor(state, env) {
    this.state = state;
  }
  
  async fetch(request) {
    const count = await this.state
      .storage.get("count") || 0;
    return new Response(count);
  }
}

R2 Storage

Object storage for files and media, S3-compatible.

// In your API route
export async function POST({ locals, request }) {
  const { R2 } = locals.runtime.env;
  const file = await request.arrayBuffer();
  await R2.put("file.pdf", file);
  return new Response("Uploaded!");
}

🔥 CloudFlare D1 Database - Live Demo (HTMX)

Interactive demonstration of D1 database connectivity using HTMX. Data is fetched and updated in real-time from our CloudFlare D1 database.

Loading D1 data...

API Endpoints: /api/test (CRUD) | /api/test-table (HTMX table) - Powered by HTMX for seamless interactivity

Success!

Setting Up Bindings

Add these bindings to your wrangler.toml:

name = "my-astro-app"
compatibility_date = "2024-01-01"

# D1 Database
[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-database-id"

# KV Namespace
[[kv_namespaces]]
binding = "KV"
id = "your-kv-namespace-id"

# Durable Objects
[[durable_objects.bindings]]
name = "COUNTER"
class_name = "Counter"

# R2 Bucket
[[r2_buckets]]
binding = "R2"
bucket_name = "my-bucket"

API Routes

Create API endpoints in src/pages/api/:

// src/pages/api/users.json.ts
export async function GET({ locals }) {
  const { DB } = locals.runtime.env;
  
  const { results } = await DB.prepare(
    "SELECT * FROM users LIMIT 10"
  ).all();
  
  return new Response(
    JSON.stringify({ users: results }),
    {
      headers: {
        "Content-Type": "application/json"
      }
    }
  );
}

Ready to Deploy?

Get started with CloudFlare integration and deploy your ASSQ stack to the edge.

CloudFlare Pages Documentation