SvelteKit Adapter Cloudflare

The SvelteKit Adapter Cloudflare enables deployment of SvelteKit applications to Cloudflare's edge computing infrastructure. It supports both Cloudflare Workers with static assets and Cloudflare Pages with Workers integration, handling the complex build process to transform SvelteKit applications into formats compatible with Cloudflare's serverless environment.

Package Information

• Package Name: @sveltejs/adapter-cloudflare
• Package Type: npm
• Language: JavaScript/TypeScript
• Installation: npm install @sveltejs/adapter-cloudflare

Core Imports

import adapter from "@sveltejs/adapter-cloudflare";

For TypeScript projects with type support:

import adapter, { AdapterOptions, RoutesJSONSpec } from "@sveltejs/adapter-cloudflare";

Basic Usage

// svelte.config.js
import adapter from "@sveltejs/adapter-cloudflare";

export default {
  kit: {
    adapter: adapter({
      config: 'wrangler.toml',
      fallback: 'plaintext',
      routes: {
        include: ['/*'],
        exclude: ['<all>']
      }
    })
  }
};

Architecture

The adapter is built around several key components:

• Adapter Factory: Main function that creates a SvelteKit adapter with Cloudflare-specific build logic
• Build Process: Transforms SvelteKit apps into Cloudflare-compatible formats with proper routing and asset handling
• Platform Integration: Provides Cloudflare-specific runtime context (env, ctx, caches, cf properties)
• Configuration Management: Validates and processes Wrangler configuration for different deployment targets
• Runtime Worker: Cloudflare Worker script that handles requests and integrates with SvelteKit's server-side rendering

Capabilities

Adapter Configuration

Core adapter factory function and configuration options for customizing the build process and deployment behavior.

import { Adapter } from '@sveltejs/kit';
import { GetPlatformProxyOptions } from 'wrangler';

function adapter(options?: AdapterOptions): Adapter;

interface AdapterOptions {
  config?: string;
  fallback?: 'plaintext' | 'spa';
  routes?: {
    include?: string[];
    exclude?: string[];
  };
  platformProxy?: GetPlatformProxyOptions;
}

Adapter Configuration

Platform Integration

Cloudflare-specific platform context and runtime environment for SvelteKit applications.

import {
  CacheStorage,
  IncomingRequestCfProperties,
  ExecutionContext
} from '@cloudflare/workers-types';

declare global {
  namespace App {
    interface Platform {
      env: unknown;
      ctx: ExecutionContext;
      context: ExecutionContext; // deprecated
      caches: CacheStorage;
      cf?: IncomingRequestCfProperties;
    }
  }
}

Platform Integration

Types

interface RoutesJSONSpec {
  version: 1;
  description: string;
  include: string[];
  exclude: string[];
}