0
# SvelteKit Adapter Cloudflare
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: @sveltejs/adapter-cloudflare
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @sveltejs/adapter-cloudflare`
10
11
## Core Imports
12
13
```javascript
14
import adapter from "@sveltejs/adapter-cloudflare";
15
```
16
17
For TypeScript projects with type support:
18
19
```typescript
20
import adapter, { AdapterOptions, RoutesJSONSpec } from "@sveltejs/adapter-cloudflare";
21
```
22
23
## Basic Usage
24
25
```javascript
26
// svelte.config.js
27
import adapter from "@sveltejs/adapter-cloudflare";
28
29
export default {
30
kit: {
31
adapter: adapter({
32
config: 'wrangler.toml',
33
fallback: 'plaintext',
34
routes: {
35
include: ['/*'],
36
exclude: ['<all>']
37
}
38
})
39
}
40
};
41
```
42
43
## Architecture
44
45
The adapter is built around several key components:
46
47
- **Adapter Factory**: Main function that creates a SvelteKit adapter with Cloudflare-specific build logic
48
- **Build Process**: Transforms SvelteKit apps into Cloudflare-compatible formats with proper routing and asset handling
49
- **Platform Integration**: Provides Cloudflare-specific runtime context (env, ctx, caches, cf properties)
50
- **Configuration Management**: Validates and processes Wrangler configuration for different deployment targets
51
- **Runtime Worker**: Cloudflare Worker script that handles requests and integrates with SvelteKit's server-side rendering
52
53
## Capabilities
54
55
### Adapter Configuration
56
57
Core adapter factory function and configuration options for customizing the build process and deployment behavior.
58
59
```typescript { .api }
60
import { Adapter } from '@sveltejs/kit';
61
import { GetPlatformProxyOptions } from 'wrangler';
62
63
function adapter(options?: AdapterOptions): Adapter;
64
65
interface AdapterOptions {
66
config?: string;
67
fallback?: 'plaintext' | 'spa';
68
routes?: {
69
include?: string[];
70
exclude?: string[];
71
};
72
platformProxy?: GetPlatformProxyOptions;
73
}
74
```
75
76
[Adapter Configuration](./adapter-configuration.md)
77
78
### Platform Integration
79
80
Cloudflare-specific platform context and runtime environment for SvelteKit applications.
81
82
```typescript { .api }
83
import {
84
CacheStorage,
85
IncomingRequestCfProperties,
86
ExecutionContext
87
} from '@cloudflare/workers-types';
88
89
declare global {
90
namespace App {
91
interface Platform {
92
env: unknown;
93
ctx: ExecutionContext;
94
context: ExecutionContext; // deprecated
95
caches: CacheStorage;
96
cf?: IncomingRequestCfProperties;
97
}
98
}
99
}
100
```
101
102
[Platform Integration](./platform-integration.md)
103
104
105
## Types
106
107
```typescript { .api }
108
interface RoutesJSONSpec {
109
version: 1;
110
description: string;
111
include: string[];
112
exclude: string[];
113
}
114
```