Building Modern Web Applications with Cloudflare Pages and Edge Functions#

1
my-pages-app/
2
├── public/               # Static assets
3
├── src/                  # Source code
4
│   ├── components/       # React/Vue/Svelte components
5
│   ├── pages/           # Page components
6
│   └── styles/          # CSS/SCSS files
7
├── functions/           # Edge Functions (API routes)
8
│   ├── api/
9
│   │   ├── hello.js    # /api/hello endpoint
10
│   │   └── [[path]].js # Catch-all route
11
│   └── _middleware.js  # Global middleware
12
├── wrangler.toml        # Configuration
13
└── package.json

1
name = "my-pages-app"
2
compatibility_date = "2025-01-10"
3

4
[build]
5
command = "npm run build"
6
publish = "dist"
7

8
[build.environment]
9
NODE_VERSION = "18"
10

11
# Environment variables
12
[env.production.vars]
13
API_URL = "https://api.example.com"
14
ENVIRONMENT = "production"
15

16
[env.preview.vars]
17
API_URL = "https://staging-api.example.com"
18
ENVIRONMENT = "preview"
19

20
# KV Namespaces
21
[[env.production.kv_namespaces]]
22
binding = "CACHE"
23
id = "your-kv-namespace-id"
24

25
# D1 Database
26
[[env.production.d1_databases]]
27
binding = "DB"
28
database_name = "my-database"
29
database_id = "your-database-id"
30

31
# R2 Bucket
32
[[env.production.r2_buckets]]
33
binding = "STORAGE"
34
bucket_name = "my-bucket"
35

36
# Durable Objects
37
[[env.production.durable_objects.bindings]]
38
name = "WEBSOCKET"
39
class_name = "WebSocketDurableObject"

1
export async function onRequest(context) {
2
  // context contains:
3
  // - request: The incoming Request
4
  // - env: Environment bindings (KV, D1, etc.)
5
  // - params: URL parameters
6
  // - waitUntil: For background tasks
7
  // - next: For middleware chaining
8
  // - data: Data from middleware
9

10
  return new Response(JSON.stringify({
11
    message: 'Hello from the edge!'
12
  }), {
13
    headers: { 'Content-Type': 'application/json' }
14
  });
15
}
16

17
// Support specific HTTP methods
18
export async function onRequestPost(context) {
19
  const body = await context.request.json();
20
  return new Response(JSON.stringify({
21
    received: body
22
  }), {
23
    status: 201,
24
    headers: { 'Content-Type': 'application/json' }
25
  });
26
}
27

28
export async function onRequestGet({ request, env }) {
29
  const url = new URL(request.url);
30
  const name = url.searchParams.get('name') || 'World';
31

32
  return new Response(`Hello, ${name}!`);
33
}

1
export async function onRequest({ params, env }) {
2
  const userId = params.id;
3

4
  // Fetch from D1 database
5
  const user = await env.DB.prepare(
6
    'SELECT * FROM users WHERE id = ?'
7
  ).bind(userId).first();
8

9
  if (!user) {
10
    return new Response('User not found', { status: 404 });
11
  }
12

13
  return new Response(JSON.stringify(user), {
14
    headers: { 'Content-Type': 'application/json' }
15
  });
16
}

1
export async function onRequest({ request, params }) {
2
  // Catch all routes under /api/
3
  const path = params.path ? params.path.join('/') : '';
4

5
  // Custom routing logic
6
  if (path.startsWith('v2/')) {
7
    return handleV2Api(request, path);
8
  }
9

10
  return new Response('API endpoint not found', { status: 404 });
11
}
12

13
function handleV2Api(request, path) {
14
  // Handle v2 API routes
15
  return new Response(JSON.stringify({
16
    version: 'v2',
17
    path
18
  }), {
19
    headers: { 'Content-Type': 'application/json' }
20
  });
21
}

1
import jwt from '@tsndr/cloudflare-worker-jwt';
2

3
export async function onRequest(context) {
4
  const { request, env, next, data } = context;
5

6
  // Add CORS headers
7
  const corsHeaders = {
8
    'Access-Control-Allow-Origin': '*',
9
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
10
    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
11
  };
12

13
  // Handle OPTIONS requests
14
  if (request.method === 'OPTIONS') {
15
    return new Response(null, { headers: corsHeaders });
16
  }
17

18
  // Rate limiting
19
  const ip = request.headers.get('CF-Connecting-IP') || 'unknown';
20
  const rateLimitKey = `rate:${ip}`;
21
  const current = await env.CACHE.get(rateLimitKey);
22

23
  if (current && parseInt(current) > 100) {
24
    return new Response('Rate limit exceeded', {
25
      status: 429,
26
      headers: { ...corsHeaders, 'Retry-After': '60' }
27
    });
28
  }
29

30
  await env.CACHE.put(rateLimitKey, String((parseInt(current) || 0) + 1), {
31
    expirationTtl: 60
32
  });
33

34
  // Authentication check for protected routes
35
  if (request.url.includes('/api/admin')) {
36
    const token = request.headers.get('Authorization')?.replace('Bearer ', '');
37

38
    if (!token) {
39
      return new Response('Unauthorized', {
40
        status: 401,
41
        headers: corsHeaders
42
      });
43
    }
44

45
    try {
46
      const isValid = await jwt.verify(token, env.JWT_SECRET);
47
      if (!isValid) {
48
        return new Response('Invalid token', {
49
          status: 401,
50
          headers: corsHeaders
51
        });
52
      }
53

54
      const decoded = jwt.decode(token);
55
      data.user = decoded.payload;
56
    } catch (error) {
57
      return new Response('Invalid token', {
58
        status: 401,
59
        headers: corsHeaders
60
      });
61
    }
62
  }
63

64
  // Continue to the next middleware or route
65
  const response = await next();
66

67
  // Add CORS headers to response
68
  Object.keys(corsHeaders).forEach(key => {
69
    response.headers.set(key, corsHeaders[key]);
70
  });
71

72
  return response;
73
}

1
export async function onRequest({ request, env, next, data }) {
2
  // This middleware only applies to /api/admin/* routes
3

4
  // Check admin permissions
5
  if (!data.user || data.user.role !== 'admin') {
6
    return new Response('Forbidden', { status: 403 });
7
  }
8

9
  // Log admin action
10
  await env.DB.prepare(
11
    'INSERT INTO admin_logs (user_id, action, timestamp) VALUES (?, ?, ?)'
12
  ).bind(data.user.id, request.url, new Date().toISOString()).run();
13

14
  return next();
15
}

1
import bcrypt from 'bcryptjs';
2
import jwt from '@tsndr/cloudflare-worker-jwt';
3

4
export async function onRequestPost({ request, env }) {
5
  try {
6
    const { email, password } = await request.json();
7

8
    // Get user from database
9
    const user = await env.DB.prepare(
10
      'SELECT * FROM users WHERE email = ?'
11
    ).bind(email).first();
12

13
    if (!user) {
14
      return new Response('Invalid credentials', { status: 401 });
15
    }
16

17
    // Verify password
18
    const valid = await bcrypt.compare(password, user.password_hash);
19
    if (!valid) {
20
      return new Response('Invalid credentials', { status: 401 });
21
    }
22

23
    // Generate JWT
24
    const token = await jwt.sign({
25
      id: user.id,
26
      email: user.email,
27
      role: user.role,
28
      exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24) // 24 hours
29
    }, env.JWT_SECRET);
30

31
    // Set secure cookie
32
    const response = new Response(JSON.stringify({
33
      success: true,
34
      user: { id: user.id, email: user.email, role: user.role }
35
    }), {
36
      headers: { 'Content-Type': 'application/json' }
37
    });
38

39
    response.headers.append('Set-Cookie',
40
      `token=${token}; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=86400`
41
    );
42

43
    return response;
44
  } catch (error) {
45
    console.error('Login error:', error);
46
    return new Response('Internal server error', { status: 500 });
47
  }
48
}

1
/** @type {import('next').NextConfig} */
2
const nextConfig = {
3
  experimental: {
4
    runtime: 'edge',
5
  },
6
  images: {
7
    loader: 'custom',
8
    loaderFile: './imageLoader.js',
9
  },
10
};
11

12
module.exports = nextConfig;

1
export const config = {
2
  runtime: 'edge',
3
};
4

5
export default async function handler(request) {
6
  // This runs on Cloudflare's edge
7
  const { searchParams } = new URL(request.url);
8
  const id = searchParams.get('id');
9

10
  // Access Cloudflare bindings via process.env
11
  const data = await process.env.KV.get(`data:${id}`);
12

13
  return new Response(JSON.stringify({ data }), {
14
    headers: { 'Content-Type': 'application/json' },
15
  });
16
}

1
import { defineConfig } from 'vite';
2
import react from '@vitejs/plugin-react';
3
import { getPlatformProxy } from 'wrangler';
4

5
export default defineConfig(async () => {
6
  const { env } = await getPlatformProxy();
7

8
  return {
9
    plugins: [react()],
10
    define: {
11
      'process.env': env,
12
    },
13
    server: {
14
      proxy: {
15
        '/api': {
16
          target: 'http://localhost:8788',
17
          changeOrigin: true,
18
        },
19
      },
20
    },
21
  };
22
});

1
import { defineConfig } from 'astro/config';
2
import cloudflare from '@astrojs/cloudflare';
3

4
export default defineConfig({
5
  output: 'server',
6
  adapter: cloudflare({
7
    mode: 'directory',
8
    functionPerRoute: true,
9
  }),
10
  vite: {
11
    define: {
12
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
13
    },
14
  },
15
});

1
export async function GET({ params, locals }) {
2
  // Access Cloudflare bindings via locals.runtime.env
3
  const post = await locals.runtime.env.DB.prepare(
4
    'SELECT * FROM posts WHERE id = ?'
5
  ).bind(params.id).first();
6

7
  if (!post) {
8
    return new Response('Not found', { status: 404 });
9
  }
10

11
  return new Response(JSON.stringify(post), {
12
    headers: { 'Content-Type': 'application/json' },
13
  });
14
}

1
import { renderToString } from 'react-dom/server';
2
import App from '../src/App';
3

4
export async function onRequest({ request, env, params }) {
5
  const path = params.path ? `/${params.path.join('/')}` : '/';
6

7
  // Server-side render React app
8
  const html = renderToString(<App path={path} env={env} />);
9

10
  return new Response(`
11
    <!DOCTYPE html>
12
    <html>
13
      <head>
14
        <title>My SSR App</title>
15
        <link rel="stylesheet" href="/styles.css">
16
      </head>
17
      <body>
18
        <div id="root">${html}</div>
19
        <script>
20
          window.__INITIAL_STATE__ = ${JSON.stringify({ path })}
21
        </script>
22
        <script src="/bundle.js"></script>
23
      </body>
24
    </html>
25
  `, {
26
    headers: { 'Content-Type': 'text/html' },
27
  });
28
}

1
export class WebSocketDurableObject {
2
  constructor(state, env) {
3
    this.state = state;
4
    this.env = env;
5
    this.sessions = [];
6
  }
7

8
  async fetch(request) {
9
    const upgradeHeader = request.headers.get('Upgrade');
10

11
    if (!upgradeHeader || upgradeHeader !== 'websocket') {
12
      return new Response('Expected Upgrade: websocket', { status: 426 });
13
    }
14

15
    const [client, server] = Object.values(new WebSocketPair());
16

17
    this.handleSession(server);
18

19
    return new Response(null, {
20
      status: 101,
21
      webSocket: client,
22
    });
23
  }
24

25
  handleSession(websocket) {
26
    websocket.accept();
27
    this.sessions.push(websocket);
28

29
    websocket.addEventListener('message', async (event) => {
30
      const message = JSON.parse(event.data);
31

32
      // Broadcast to all connected clients
33
      this.broadcast(message);
34

35
      // Store message in database
36
      await this.env.DB.prepare(
37
        'INSERT INTO messages (content, timestamp) VALUES (?, ?)'
38
      ).bind(message.content, new Date().toISOString()).run();
39
    });
40

41
    websocket.addEventListener('close', () => {
42
      this.sessions = this.sessions.filter(s => s !== websocket);
43
    });
44
  }
45

46
  broadcast(message) {
47
    const data = JSON.stringify(message);
48
    this.sessions.forEach(session => {
49
      try {
50
        session.send(data);
51
      } catch (error) {
52
        // Remove dead sessions
53
        this.sessions = this.sessions.filter(s => s !== session);
54
      }
55
    });
56
  }
57
}
58

59
export async function onRequest({ request, env }) {
60
  const id = env.WEBSOCKET.idFromName('global-chat');
61
  const stub = env.WEBSOCKET.get(id);
62

63
  return stub.fetch(request);
64
}

1
export async function onRequest({ request, env, params }) {
2
  const path = params.path ? params.path.join('/') : '';
3
  const url = new URL(request.url);
4

5
  // Parse image transformation parameters
6
  const width = parseInt(url.searchParams.get('w') || '0');
7
  const height = parseInt(url.searchParams.get('h') || '0');
8
  const quality = parseInt(url.searchParams.get('q') || '85');
9
  const format = url.searchParams.get('f') || 'auto';
10

11
  // Check cache
12
  const cacheKey = `image:${path}:${width}x${height}:q${quality}:${format}`;
13
  const cached = await env.CACHE.get(cacheKey, { type: 'stream' });
14

15
  if (cached) {
16
    return new Response(cached, {
17
      headers: {
18
        'Content-Type': `image/${format === 'auto' ? 'webp' : format}`,
19
        'Cache-Control': 'public, max-age=31536000',
20
      },
21
    });
22
  }
23

24
  // Fetch original image
25
  const original = await env.STORAGE.get(path);
26
  if (!original) {
27
    return new Response('Image not found', { status: 404 });
28
  }
29

30
  // Apply transformations using Cloudflare Image Resizing
31
  const transformed = await fetch(request, {
32
    cf: {
33
      image: {
34
        width,
35
        height,
36
        quality,
37
        format,
38
        fit: 'cover',
39
      },
40
    },
41
  });
42

43
  const buffer = await transformed.arrayBuffer();
44

45
  // Cache transformed image
46
  await env.CACHE.put(cacheKey, buffer, {
47
    expirationTtl: 86400, // 24 hours
48
  });
49

50
  return new Response(buffer, {
51
    headers: {
52
      'Content-Type': transformed.headers.get('Content-Type'),
53
      'Cache-Control': 'public, max-age=31536000',
54
    },
55
  });
56
}

1
export async function onRequest({ request, env, next, waitUntil }) {
2
  const url = new URL(request.url);
3

4
  // Skip A/B testing for API routes
5
  if (url.pathname.startsWith('/api')) {
6
    return next();
7
  }
8

9
  // Get or create user ID
10
  const cookies = parseCookies(request.headers.get('Cookie'));
11
  let userId = cookies.userId;
12

13
  if (!userId) {
14
    userId = crypto.randomUUID();
15
  }
16

17
  // Determine variant
18
  const variant = await determineVariant(userId, env);
19

20
  // Log experiment exposure
21
  waitUntil(logExperiment(userId, variant, env));
22

23
  // Modify response based on variant
24
  const response = await next();
25

26
  // Inject variant data
27
  if (response.headers.get('Content-Type')?.includes('text/html')) {
28
    const html = await response.text();
29
    const modifiedHtml = html.replace(
30
      '</head>',
31
      `<script>window.__AB_VARIANT__ = '${variant}';</script></head>`
32
    );
33

34
    const newResponse = new Response(modifiedHtml, response);
35
    newResponse.headers.set('Set-Cookie',
36
      `userId=${userId}; Path=/; Max-Age=2592000; SameSite=Lax`
37
    );
38

39
    return newResponse;
40
  }
41

42
  return response;
43
}
44

45
async function determineVariant(userId, env) {
46
  // Check if user already has a variant
47
  const existing = await env.KV.get(`variant:${userId}`);
48
  if (existing) return existing;
49

50
  // Assign variant based on hash
51
  const hash = await crypto.subtle.digest(
52
    'SHA-256',
53
    new TextEncoder().encode(userId)
54
  );
55
  const hashArray = Array.from(new Uint8Array(hash));
56
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
57
  const variant = parseInt(hashHex.substring(0, 8), 16) % 100 < 50 ? 'A' : 'B';
58

59
  // Store variant assignment
60
  await env.KV.put(`variant:${userId}`, variant, {
61
    expirationTtl: 2592000, // 30 days
62
  });
63

64
  return variant;
65
}
66

67
async function logExperiment(userId, variant, env) {
68
  await env.DB.prepare(
69
    'INSERT INTO experiments (user_id, variant, timestamp) VALUES (?, ?, ?)'
70
  ).bind(userId, variant, new Date().toISOString()).run();
71
}