SvelteKit on Cloudflare

Deploy a SvelteKit application to Cloudflare with KV and R2 storage

SvelteKit on Cloudflare Example

This example demonstrates deploying a SvelteKit application to Cloudflare with KV Namespace and R2 Bucket bindings.

Features

• SvelteKit: Modern Svelte meta-framework
• KV Namespace: Key-value storage for auth/sessions
• R2 Bucket: Object storage
• Environment Bindings: Secrets and configuration
• Type Safety: Full TypeScript types for platform

Project Setup

Key Features Explained

Multiple Bindings

SvelteKit has access to multiple Cloudflare resources:

bindings: {
  AUTH_STORE: authStore,
  STORAGE: storage,
  ALCHEMY_TEST_VALUE: alchemy.secret("Hello from Alchemy!"),
}

Platform Access

Access bindings through the platform object:

export const load: PageServerLoad = async ({ platform }) => {
  const env = platform?.env;
  // Use env.AUTH_STORE, env.STORAGE, etc.
};

KV for Sessions

Use KV Namespace for session storage:

await env.AUTH_STORE.put('session-id', JSON.stringify(sessionData));
const session = await env.AUTH_STORE.get('session-id');

R2 for File Storage

Use R2 Bucket for file uploads:

const buffer = await file.arrayBuffer();
await env.STORAGE.put(file.name, buffer);

Advanced Usage

Authentication with KV

// Store session
export const login: RequestHandler = async ({ request, platform, cookies }) => {
  const env = platform?.env;
  const formData = await request.formData();
  
  const sessionId = crypto.randomUUID();
  await env.AUTH_STORE.put(`session:${sessionId}`, JSON.stringify({
    userId: '123',
    email: formData.get('email'),
    createdAt: Date.now(),
  }), {
    expirationTtl: 86400, // 24 hours
  });
  
  cookies.set('session', sessionId, { path: '/' });
  return json({ success: true });
};

// Retrieve session
export const load: PageServerLoad = async ({ platform, cookies }) => {
  const sessionId = cookies.get('session');
  if (!sessionId) return { user: null };
  
  const session = await platform?.env.AUTH_STORE.get(`session:${sessionId}`);
  return { user: session ? JSON.parse(session) : null };
};

Source Code

View the complete source code: examples/cloudflare-sveltekit