SvelteKit

https://github.com/sveltejs/kit
Admin
SvelteKit is a framework for building web applications with Svelte, offering a streamlined...
Tokens:197,214
Snippets:1,622
Trust Score:8.1
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install OpenTelemetry dependencies for tracing quickstart

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/68-observability.md

Install the required OpenTelemetry packages and import-in-the-middle for the development quickstart. This command sets up the dependencies needed for the instrumentation server.

```sh
npm i @opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/exporter-trace-otlp-proto import-in-the-middle
```

--------------------------------

### Essential Commands: pnpm install, format, lint, check

Source: https://github.com/sveltejs/kit/blob/main/AGENTS.md

Initial setup and development commands for the SvelteKit monorepo. Install dependencies with a frozen lockfile (3-4 minutes, 10+ min timeout), then format, lint, and type-check the codebase.

```bash
# Initial setup (takes 3-4 minutes, set 10+ min timeout)
pnpm install --frozen-lockfile

# Format code (~15 seconds)
pnpm run format

# Lint (takes 2-3 minutes, set 5+ min timeout)
pnpm run lint

# Type checking (takes 3-4 minutes, set 8+ min timeout)
pnpm run check
```

--------------------------------

### Create and run a new SvelteKit app with sv

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/README.md

Create a new SvelteKit project with the sv CLI, install dependencies, and start the development server. The npx command scaffolds a project in the my-app directory, then you enter it, install packages, and run dev on port 5173.

```sh
npx sv create my-app
cd my-app
npm install
npm run dev

```

--------------------------------

### Scaffold a new SvelteKit project and start the dev server

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/10-getting-started/20-creating-a-project.md

Run these commands in your terminal to create a new project in the `my-app` directory, navigate into it, and start the development server on localhost:5173. The first command prompts you to set up basic tooling like TypeScript. Make sure to install dependencies before running `npm run dev` if you didn't during project creation.

```sh
npx sv create my-app
cd my-app
npm run dev
```

--------------------------------

### GET / (platform API usage)

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Example of a SvelteKit GET request handler that accesses the Bun server instance via the platform property.

```APIDOC
## [GET] / (platform API usage)

### Description
Example of a SvelteKit GET request handler that accesses the Bun server instance via the platform property.

### Method
GET

### Endpoint
/

### Parameters
#### Request Body
- None

### Request Example
No request body.

### Response
#### Success Response (200)
- **address** (string) - The client address.
- **serverId** (string) - The Bun server instance ID.
- **pendingRequests** (number) - Number of pending requests.
- **pendingWebSockets** (number) - Number of pending WebSockets.

#### Response Example
{
  "address": "127.0.0.1",
  "serverId": "server-id",
  "pendingRequests": 0,
  "pendingWebSockets": 0
}
```

--------------------------------

### Start the Bun server

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Start the built server. The default build output is written to the 'build' directory.

```sh
bun ./build
```

--------------------------------

### Clone and install the repository

Source: https://github.com/sveltejs/kit/blob/main/CONTRIBUTING.md

Clone the SvelteKit repository and install all dependencies with pnpm.

```sh
git clone git@github.com:sveltejs/kit.git
cd kit
pnpm install
```

--------------------------------

### VS Code launch.json for SvelteKit dev server

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/25-debugging.md

Example configuration for the VS Code debug pane that launches the development server with npm run dev. Place this in .vscode/launch.json and select 'Run script: dev' to start debugging.

```json
{
	"version": "0.2.0",
	"configurations": [
		{
			"command": "npm run dev",
			"name": "Run development server",
			"request": "launch",
			"type": "node-terminal"
		}
	]
}
```

--------------------------------

### Start development server with npm run dev

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/test/apps/async/README.md

Run npm run dev to start the development server. Use npm run dev -- --open to start the server and open the app in a new browser tab.

```sh
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install adapter-cloudflare-workers

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md

Install the adapter package with npm.

```bash
npm i -D @sveltejs/adapter-cloudflare-workers
```

--------------------------------

### Install adapter-bun with bun add

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Install the @sveltejs/adapter-bun package as a development dependency using Bun. Requires Bun 1.4 or newer.

```sh
bun add -D @sveltejs/adapter-bun
```

--------------------------------

### Install package from a PR

Source: https://github.com/sveltejs/kit/blob/main/CONTRIBUTING.md

Install a SvelteKit package built from a specific pull request using pkg.pr.new.

```sh
npm add https://pkg.pr.new/sveltejs/kit/@sveltejs/kit@YOUR_PR_NUMBER_GOES_HERE
```

--------------------------------

### config_expected_string_array: array of strings example

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/messages/build-errors/config.md

The `%keypath%` option must be an array of strings when specified. Valid examples include `['.svelte']` or `['*', '/about']`; pass an array even for a single member, or omit the option to use its default.

```text
['.svelte']
```

```text
['*', '/about']
```

--------------------------------

### RouteParams usage example

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/98-reference/22-$app-types.md

Shows how to use `RouteParams` to get the parameters for a specific route. The example `RouteParams<'/blog/[slug]'>` resolves to `{ slug: string }`.

```typescript
// @errors: 2552
type BlogParams = RouteParams<'/blog/[slug]'>; // { slug: string }
```

--------------------------------

### Install Wrangler and log in

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md

Install Wrangler as a dev dependency and log in to your Cloudflare account. Required before deploying.

```sh
npm i -D wrangler
wrangler login
```

--------------------------------

### Create Svelte package with sv

Source: https://github.com/sveltejs/kit/blob/main/packages/package/README.md

Quickly scaffold a Svelte package project using the sv CLI. Run these commands in a terminal to create, install dependencies, and start the development server.

```sh
npx sv create my-app
cd my-app
npm install
npm run dev
```

--------------------------------

### Example routes for prerender entry points

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/40-page-options.md

Shows routes that are considered entry points for prerendering: non-dynamic routes are entry points, while dynamic routes are not.

```sh
/             # non-dynamic
/blog         # non-dynamic
/blog/[slug]  # dynamic, because of `[slug]`

```

--------------------------------

### Configure adapter in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/20-adapters.md

Shows how to import and add an adapter to the SvelteKit plugin in vite.config.js. The adapter is installed via `npx sv add sveltekit-adapter`. The example uses a placeholder adapter `svelte-adapter-foo`.

```javascript
/// file: vite.config.js
// @filename: ambient.d.ts
declare module 'svelte-adapter-foo' {
	const adapter: (opts?: any) => import('@sveltejs/kit').Adapter;
	export default adapter;
}

// @errors: 2554
// @filename: index.js
// ---cut---
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
+++import adapter from 'svelte-adapter-foo';+++

export default defineConfig({
	plugins: [
		sveltekit({
			+++adapter: adapter()+++
		})
	]
});
```

--------------------------------

### Handle GET request with Headers in SvelteKit server route

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/10-getting-started/40-web-standards.md

Use in a +server.js file to log all request headers and return a JSON Response with a custom header. The example reads the 'user-agent' header and sets 'x-custom-header' on the response.

```javascript
// @errors: 2461
/// file: src/routes/what-is-my-user-agent/+server.js
/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return Response.json({
		// retrieve a specific header
		userAgent: request.headers.get('user-agent')
	}, {
		// set a header on the response
		headers: { 'x-custom-header': 'potato' }
	});
}
```

--------------------------------

### Example routes matching /foo-abc

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/10-advanced-routing.md

List of route files that would match the path /foo-abc, used to illustrate route sorting.

```sh
src/routes/[...catchall]/+page.svelte
src/routes/[[a=x]]/+page.svelte
src/routes/[b]/+page.svelte
src/routes/foo-[c]/+page.svelte
src/routes/foo-abc/+page.svelte
```

--------------------------------

### Install pnpm globally

Source: https://github.com/sveltejs/kit/blob/main/CONTRIBUTING.md

Install pnpm globally, which is required for the monorepo.

```sh
npm i -g pnpm
```

--------------------------------

### Enable compiled executable with buildOptions.compile

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Shows how to set buildOptions.compile to true to generate a single executable at <out>/server, then build and run it without a separately installed Bun runtime.

```javascript
// @errors: 2307
import adapter from '@sveltejs/adapter-bun';
// ---cut---
adapter({
	buildOptions: {
		compile: true
	}
});
```

```shell
bun run --bun build
./build/server
```

--------------------------------

### Configure adapter-static in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/50-adapter-static.md

Example configuration for the static adapter in vite.config.js. On zero-config platforms like Vercel, omit adapter options so adapter-static can provide optimal configuration. The example shows a placeholder for the adapter options.

```javascript
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-static';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter(---{...}---)
		})
	]
});
```

--------------------------------

### Enable Yarn Berry and install dependencies

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/10-faq.md

Enables Yarn Berry (version 3) for the project and installs dependencies.

```sh
yarn set version berry
yarn install

```

--------------------------------

### init

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/20-hooks.md

The init hook runs once when the server is created or the app starts in the browser. It is useful for asynchronous initialization work such as connecting to a database.

```APIDOC
## init

### Description
The `init` hook runs once when the server is created or the app starts in the browser. It is a useful place to do asynchronous work such as initializing a database connection.

### Method
Not applicable (function hook)

### Endpoint
Not applicable

### Parameters
None

### Request Example
```js
// @errors: 2307
/// file: src/hooks.server.js
import * as db from '#lib/server/database.js';

/** @type {import('@sveltejs/kit/hooks').ServerInit} */
export async function init() {
	await db.connect();
}
```

### Response
No return value expected.
```

--------------------------------

### Example parameters object for rest route

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/10-advanced-routing.md

Example of the parameters object that would be available to the page when the rest route matches a request.

```js
// @noErrors
{
	org: 'sveltejs',
	repo: 'kit',
	branch: 'main',
	file: 'documentation/docs/04-advanced-routing.md'
}
```

--------------------------------

### Install @sveltejs/enhanced-img

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/40-best-practices/07-images.md

Install the enhanced-img plugin as a dev dependency using npm.

```sh
npm i -D @sveltejs/enhanced-img
```

--------------------------------

### load function with fetch

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/20-load.md

Example of using the provided fetch function in a load function to get data from an internal API endpoint.

```APIDOC
## load function with fetch

### Description
Example of using the provided fetch function in a load function to get data from an internal API endpoint.

### Method
load

### Endpoint
src/routes/items/[id]/+page.js

### Parameters
#### Load Function Input
- **fetch** (function) - Required - The provided fetch function, which behaves like the native fetch API with additional features.
- **params** (object) - Required - Contains route parameters derived from the URL pathname and route.id.

### Request Example
```js
/** @type {import('./$types').PageLoad} */
export async function load({ fetch, params }) {
	const res = await fetch(`/api/items/${params.id}`);
	const item = await res.json();

	return { item };
}
```

### Response
#### Success Response (200)
- **item** (object) - The data returned from the API endpoint.

#### Response Example
```json
{
	"item": {}
}
```
```

--------------------------------

### Run the test server for basics app

Source: https://github.com/sveltejs/kit/blob/main/CONTRIBUTING.md

Starts the development server for the Playwright tests in the basics app. Use it to manually hit the server with your browser.

```sh
cd packages/kit/test/apps/basics; pnpm run dev
```

--------------------------------

### Example params object for route /a/[b]/[...c]

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/20-load.md

Shows the params object derived from url.pathname and route.id for a given route and pathname.

```json
{
	"b": "x",
	"c": "y/z"
}
```

--------------------------------

### Configure adapter-static in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/50-adapter-static.md

Install with `npm i -D @sveltejs/adapter-static` and add the adapter to your `vite.config.js`. The default options are shown; on some platforms these options are set automatically.

```js
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-static';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				// default options are shown. On some platforms
				// these options are set automatically — see below
				pages: 'build',
				assets: 'build',
				fallback: undefined,
				precompress: false,
			strict: true
			})
		})
	]
});
```

--------------------------------

### Migrate from $app/stores to $app/state

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/30-migrating-to-sveltekit-2.md

Replace the import from '$app/stores' with '$app/state' and remove the '$' prefix from usage sites. The example shows the before (---) and after (+++) changes for both the import and the usage of `page.data`.

```svelte
<script>
	---import { page } from '$app/stores';---
	+++import { page } from '$app/state';+++
</script>

---{$page.data}---
+++{page.data}+++
```

--------------------------------

### Configure adapter-static with fallback in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/55-single-page-apps.md

Install `@sveltejs/adapter-static` and add it to `vite.config.js` with the `fallback` option to create an SPA. The fallback page (e.g., `200.html`) handles requests that don't match static assets or prerendered pages.

```javascript
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-static';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				fallback: '200.html' // may differ from host to host
			})
		})
	]
});
```

--------------------------------

### Import from library root

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/70-packaging.md

Shows how a consumer imports from the package root. The @errors: 2307 comment indicates a missing module error in the example.

```javascript
// @errors: 2307
import { Something } from 'your-library';
```

--------------------------------

### config_extension_missing_dot: extensions must start with a dot

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/messages/build-errors/config.md

Each member of the `extensions` option must start with a leading dot. Use `['.svelte', '.svx']` rather than `['svelte', 'svx']`.

```text
['.svelte', '.svx']
```

```text
['svelte', 'svx']
```

--------------------------------

### prerender function example with database query

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/60-remote-functions.md

Defines a prerender function that queries a database at build time. Use for data that changes at most once per redeployment. The function returns the posts from the database and can be used on pages that are otherwise dynamic for partial prerendering.

```javascript
/// file: src/routes/blog/data.remote.js
// @filename: ambient.d.ts
declare module '#lib/server/database.js' {
	export function sql(strings: TemplateStringsArray, ...values: any[]): Promise<any[]>;
}
// @filename: index.js
// ---cut---
import { prerender } from '$app/server';
import * as db from '#lib/server/database.js';

export const getPosts = prerender(async () => {
	const posts = await db.sql`
		SELECT title, slug
		FROM post
		ORDER BY published_at
		DESC
	`;

	return posts;
});

```

--------------------------------

### package.json license field

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/70-packaging.md

Sets the license for the package. The example uses MIT, a permissive license. A LICENSE file should also be included.

```json
{
	"license": "MIT"
}
```

--------------------------------

### init hook in src/hooks.server.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/20-hooks.md

Runs once when the server is created or the app starts in the browser. Useful for asynchronous initialization like database connections. In the browser, it delays hydration, so keep it light. If top-level await is supported, it's equivalent to top-level code.

```javascript
// @errors: 2307
/// file: src/hooks.server.js
import * as db from '#lib/server/database.js';

/** @type {import('@sveltejs/kit/hooks').ServerInit} */
export async function init() {
	await db.connect();
}
```

--------------------------------

### Create a dynamic sitemap endpoint

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/40-best-practices/20-seo.md

Define a GET handler in src/routes/sitemap.xml/+server.js that returns an XML sitemap with the appropriate Content-Type header. The response body is a template literal with a placeholder for URL elements.

```javascript
/// file: src/routes/sitemap.xml/+server.js
export async function GET() {
	return new Response(
		`
		<?xml version="1.0" encoding="UTF-8" ?>
		<urlset
			xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
			xmlns:xhtml="http://www.w3.org/1999/xhtml"
			xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
			xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
			xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
			xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
		>
			<!-- <url> elements go here -->
		</urlset>`.trim(),
		{
			headers: {
				'Content-Type': 'application/xml'
			}
		}
	);
}
```

--------------------------------

### Configure adapter-vercel in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/90-adapter-vercel.md

Adds the Vercel adapter to the SvelteKit project. Install with `npm i -D @sveltejs/adapter-vercel`, then place this configuration in `vite.config.js` to use the adapter and specify deployment options.

```js
// @errors: 2554
/// file: vite.config.js
import adapter from '@sveltejs/adapter-vercel';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				// see below for options that can be set here
			})
		})
	]
});
```

--------------------------------

### Set envPrefix to MY_APP_ and run with prefixed environment variables

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Shows how to set the envPrefix option to 'MY_APP_' and then run the built server with environment variables using that prefix. When a prefix is configured, the server fails at startup if it finds an unknown environment variable with that prefix.

```javascript
// @errors: 2307
import adapter from '@sveltejs/adapter-bun';
// ---cut---
adapter({ envPrefix: 'MY_APP_' });
```

```shell
MY_APP_HOST=127.0.0.1 MY_APP_PORT=4000 bun ./build
```

--------------------------------

### package.json exports field with root entry point

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/70-packaging.md

Defines the package's entry points. The example shows a single root export with types and svelte export conditions.

```json
{
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	}
}
```

--------------------------------

### Example library import that may be inlined by bundler

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/68-observability.md

Shows a typical import of a library that OpenTelemetry instrumentation might need to intercept. The bundler may replace this import with inlined code or a chunk import, preventing the interceptor from observing it.

```javascript
// @errors: 2307 example library
import { query } from 'my-database-library';
```

--------------------------------

### Configure adapter-node in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/40-adapter-node.md

Adds the Node adapter to the SvelteKit Vite configuration. Install with `npm i -D @sveltejs/adapter-node` first, then use this config to generate a standalone Node server when building.

```js
// @errors: 2307 2554
/// file: vite.config.js
import adapter from '@sveltejs/adapter-node';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter()
		})
	]
});
```

--------------------------------

### Reference Cloudflare types in src/app.d.ts

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md

Install `@cloudflare/workers-types` and reference them in `src/app.d.ts` to make the types available to your app. The example shows the additions marked with `+++`.

```ts
/// file: src/app.d.ts
+++import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';+++

declare global {
	namespace App {
		interface Platform {
+++			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
			};+++
		}
	}
}

export {};
```

--------------------------------

### Using applyAction in use:enhance callback

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/30-form-actions.md

Shows how to use applyAction in the callback returned from use:enhance to handle different result types. The example checks if result.type is 'redirect' and calls goto, otherwise applies the result with applyAction.

```svelte
/// file: src/routes/login/+page.svelte
<script>
	import { enhance, +++applyAction+++ } from '$app/forms';

	/** @type {import('./$types').PageProps} */
	let { form } = $props();
</script>

<form
	method="POST"
	use:enhance={({ formElement, formData, action, cancel }) => {
		return async ({ result }) => {
			// `result` is an `ActionResult` object
+++			if (result.type === 'redirect') {
				goto(result.location);
			} else {
				await applyAction(result);
			}+++
		};
	}}
>
```

--------------------------------

### Validate environment variable with a custom function

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/70-environment-variables.md

Use a custom function as the `schema` option to validate or transform the value. The function throws an error if the value does not start with `G-`, for example.

```ts
/// file: src/env.ts
import { defineEnvVars } from '@sveltejs/kit/env';

export const variables = defineEnvVars({
	GOOGLE_ANALYTICS_ID: {
		public: true,
		schema: (value) => {
			if (!value?.startsWith('G-')) throw new Error('expected a Google Analytics ID');
			return value;
		}
	}
});
```

--------------------------------

### Configure adapter-cloudflare in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/60-adapter-cloudflare.md

Add the adapter to your Vite config. The example shows the adapter options: config, platformProxy, fallback, and routes. The platformProxy options include configPath, environment, and persist. The fallback is set to 'plaintext' and routes include all paths except '<all>'.

```javascript
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-cloudflare';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				// See below for an explanation of these options
				config: undefined,
				platformProxy: {
					configPath: undefined,
					environment: undefined,
					persist: undefined
				},
				fallback: 'plaintext',
				routes: {
					include: ['/*'],
					exclude: ['<all>']
				}
			})
		})
	]
});
```

--------------------------------

### Configure adapter with out, envPrefix, and serverOptions in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Shows the full adapter configuration in vite.config.js, setting the output directory to 'build', an empty environment variable prefix, and an idleTimeout of 30 seconds for Bun.serve.

```javascript
// @errors: 2307 2554
/// file: vite.config.js
import adapter from '@sveltejs/adapter-bun';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				out: 'build',
				envPrefix: '',
				serverOptions: {
					idleTimeout: 30
				}
			})
		})
	]
});
```

--------------------------------

### Add dev middleware via a Vite plugin - vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/10-faq.md

Shows how to add custom middleware during development by using a Vite plugin with configureServer. The example logs each request URL via server.middlewares.use. For production, @sveltejs/adapter-node builds middleware you can use with your own server.

```javascript
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-node';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

+++/** @type {import('vite').Plugin} */
const myPlugin = {
	name: 'log-request-middleware',
	configureServer(server) {
		server.middlewares.use((req, res, next) => {
			console.log(`Got request ${req.url}`);
			next();
		});
	}
};+++

export default defineConfig({
	plugins: [
		+++myPlugin,+++
		sveltekit({
			adapter: adapter()
		})
	]
});
```

--------------------------------

### Get query parameter with URLSearchParams

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/10-getting-started/40-web-standards.md

Shows how to use url.searchParams.get('foo') to retrieve a query parameter from a URL. The example includes ambient type declarations to make the global 'url' variable available.

```javascript
// @filename: ambient.d.ts
declare global {
	const url: URL;
}

export {};

// @filename: index.js
// ---cut---
const foo = url.searchParams.get('foo');
```

--------------------------------

### Create instrumentation initializer for adapter bundling

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/35-migrating-to-sveltekit-3.md

Adapters using `builder.instrument` must generate an environment initializer before bundling, include it as an entrypoint, and pass its final path to `builder.instrument`.

```javascript
const initializer = builder.createInstrumentationInitializer({ outputDirectory: temporary_directory });

// Include `initializer` in any bundling or file tracing here

builder.instrument({
	entrypoint,
	instrumentation,
	initializer
});
```

--------------------------------

### Load function with fetch during prerendering

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/40-page-options.md

Example of a +page.js load function that fetches from a server route. Because prerender is true in this page, the server route it fetches will also be treated as prerenderable unless the route explicitly sets prerender = false.

```js
export const prerender = true;

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
	const res = await fetch('/my-server-route.json');
	return await res.json();
}
```

--------------------------------

### Get context in page to access shared state

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/50-state-management.md

In a page component, uses getContext to retrieve the user function from context and display the user's name. This is the counterpart to the layout's setContext example.

```svelte
<!--- file: src/routes/user/+page.svelte --->
<script>
	import { getContext } from 'svelte';

	// Retrieve user store from context
	const user = getContext('user');
</script>

<p>Welcome {user().name}</p>
```

--------------------------------

### Fix read asset missing error by importing file and using read()

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/messages/server-errors/runtime.md

When using `read` from `$app/server`, you must pass the URL from an import, not a manually built path. This example imports a text file and reads it with `read(file).text()`.

```js
import { read } from '$app/server';
import file from './data.txt';

const text = await read(file).text();
```

--------------------------------

### Proxy API requests with a catch-all route - src/routes/api/[...path]/+server.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/10-faq.md

Used when rewrites are not an option to proxy requests to an external API server from a SvelteKit app. This example shows a GET handler that forwards the request path and query string to the external server. You may also need to handle POST/PATCH and forward request.headers.

```javascript
/// file: src/routes/api/[...path]/+server.js
/** @type {import('./$types').RequestHandler} */
export function GET({ params, url }) {
	return fetch(`https://example.com/${params.path + url.search}`);
}
```

--------------------------------

### Adapter API implementation

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/99-writing-adapters.md

Shows the complete Adapter object with required name and adapt, and optional emulate, supports, and vite. The adapt method must write client/server/prerendered output, generate a server instance, and handle requests. The supports.read and supports.instrumentation methods return booleans or throw descriptive errors.

```javascript
// @errors: 2322
// @filename: ambient.d.ts
type AdapterSpecificOptions = any;

// @filename: index.js
// ---cut---
import { getRequest, setResponse } from '@sveltejs/kit/node';

/** @param {AdapterSpecificOptions} options */
export default function (options) {
	/** @type {import('@sveltejs/kit').Adapter} */
	const adapter = {
		name: 'adapter-package-name',
		async adapt(builder) {
			// adapter implementation
		},
		async emulate() {
			return {
				async platform({ config, prerender }) {
					// the returned object becomes `event.platform` during dev, build and
					// preview. Its shape is that of `App.Platform`
				}
			}
		},
		supports: {
			read: ({ config, route }) => {
				// Return `true` if the route with the given `config` can use `read`
				// from `$app/server` in production, return `false` if it can't.
				// Or throw a descriptive error describing how to configure the deployment
			},
			instrumentation: () => {
				// Return `true` if this adapter supports loading `instrumentation.server.js`.
				// Return `false if it can't, or throw a descriptive error.
			}
		},
		vite: {
			getRequest(options) {
				const request = getRequest(options);
				// modify the Request object here if needed
				return request;
			},
			setResponse(res, response) {
				// handle WebSockets here, for example
				setResponse(res, response);
			},
			plugins: {
				// add plugins here to integrate with Vite
				pre: [],
				post: []
			}
		}
	};

	return adapter;
}
```

--------------------------------

### Create a SvelteKit app with Yarn

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/60-appendix/10-faq.md

Steps to scaffold a new SvelteKit application using Yarn, then enter its directory.

```sh
yarn create svelte myapp
cd myapp

```

--------------------------------

### Typical SvelteKit service worker with caching and fetch handling

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/40-service-workers.md

A complete service worker example for SvelteKit that creates a deployment-scoped cache, precaches immutable and static assets, and handles fetch events with a network-first strategy. It uses `$app/service-worker`, `$app/env`, `$app/manifest`, and `$app/paths`. Be careful when caching: stale data might be worse than unavailable data, and large assets like video files can fill the cache.

```javascript
/// file: src/service-worker.js
/// <reference no-default-lib="true"/>
/// <reference lib="esnext" />
/// <reference lib="webworker" />
// ---cut---
import { self } from '$app/service-worker';
import { version } from '$app/env';
import { immutable, assets } from '$app/manifest';
import { resolve } from '$app/paths';

// Create a unique cache name for this deployment
const CACHE = `cache-${version}`;

// `immutable`/`assets` paths from `$app/manifest` are relative to the
// base path, so resolve them to absolute pathnames that can be matched
// against `url.pathname` in the `fetch` handler
const ASSETS = [
	...immutable.map((asset) => resolve(asset.path)), // the Vite output
	...assets.map((asset) => resolve(asset.path))  // everything in `static`
];

self.addEventListener('install', (event) => {
	// Create a new cache and add all files to it
	async function addFilesToCache() {
		const cache = await caches.open(CACHE);
		await cache.addAll(ASSETS);
	}

	event.waitUntil(addFilesToCache());
});

self.addEventListener('activate', (event) => {
	// Remove previous cached data from disk
	async function deleteOldCaches() {
		for (const key of await caches.keys()) {
			if (key !== CACHE) await caches.delete(key);
		}
	}

	event.waitUntil(deleteOldCaches());
});

self.addEventListener('fetch', (event) => {
	// ignore POST requests etc
	if (event.request.method !== 'GET') return;

	async function respond() {
		const url = new URL(event.request.url);
		const cache = await caches.open(CACHE);

		// `immutable`/`assets` can always be served from the cache
		if (ASSETS.includes(url.pathname)) {
			const response = await cache.match(url.pathname);

			if (response) {
				return response;
			}
		}

		// for everything else, try the network first...
		try {
			const response = await fetch(event.request);

			if (response.status === 200 && !response.headers.get('cache-control')?.includes('no-store')) {
				// ...and cache responses in the background for next time....
				void cache.put(event.request, response.clone());
			}

			return response;
		} catch (error) {
			// ...otherwise fall back to previously cached data if it exists...
			const response = await cache.match(event.request);

			if (response) {
				return response;
			}

			// ...or throw the error
			throw error;
		}
	}

	event.respondWith(respond());
});
```

--------------------------------

### Wrangler configuration file (wrangler.jsonc)

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/70-adapter-cloudflare-workers.md

Required configuration file for the adapter. Place it in the project root. The `main` and `site.bucket` paths should point to the adapter's output directories, and you should add those directories plus `.wrangler` to `.gitignore`.

```jsonc
/// file: wrangler.jsonc
{
	"name": "<your-service-name>",
	"account_id": "<your-account-id>",
	"main": "./.cloudflare/worker.js",
	"site": {
		"bucket": "./.cloudflare/public"
	},
	"build": {
		"command": "npm run build"
	},
	"compatibility_date": "2021-11-12"
}
```

--------------------------------

### Compile with custom outfile and target using buildOptions.compile object

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/45-adapter-bun.md

Shows how to provide an options object to buildOptions.compile to change the executable name and cross-compile, with minify, bytecode, and linked source maps. The result is 'dist/application'.

```javascript
// @errors: 2307
import adapter from '@sveltejs/adapter-bun';
// ---cut---
adapter({
	out: 'dist',
	buildOptions: {
		compile: {
			outfile: 'application',
			target: 'bun-linux-x64'
		},
		minify: true,
		bytecode: true,
		sourcemap: 'linked'
	}
});
```

--------------------------------

### GET form for search

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/30-form-actions.md

A form using method GET to navigate to /search?q=... without invoking an action, using the client-side router.

```html
<form action="/search">
	<label>
		Search
		<input name="q">
	</label>
</form>
```

--------------------------------

### Using x-sveltekit-action header to POST to +page.server.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/30-form-actions.md

Shows how to set the custom 'x-sveltekit-action' header in a fetch request to ensure the POST is routed to an action in +page.server.js instead of a +server.js file.

```js
// @errors: 2532 2304
const response = await fetch(this.action, {
	method: 'POST',
	body: data,
+++	headers: {
		'x-sveltekit-action': 'true'
	}+++
});
```

--------------------------------

### Custom server with Express using handler.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/40-adapter-node.md

Imports the SvelteKit handler from the build output and mounts it in an Express app. Add routes before app.use(handler) so SvelteKit handles everything else, including prerendered pages and static assets. Only environment variables read by the handler itself take effect when using handler.js in a custom server.

```javascript
// @errors: 2307 7006
/// file: my-server.js
import { handler } from './build/handler.js';
import express from 'express';

const app = express();

// add a route that lives separately from the SvelteKit app
app.get('/healthcheck', (req, res) => {
	res.end('ok');
});

// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);

app.listen(3000, () => {
	console.log('listening on port 3000');
});
```

--------------------------------

### Create a +server.js GET endpoint

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/10-routing.md

In `src/routes/api/random-number/+server.js`, a `GET` handler responds with a random number between the `min` and `max` URL query parameters. It throws an `error` with status 400 if the range is invalid. `Response` can accept a `ReadableStream` for streaming use cases.

```js
/// file: src/routes/api/random-number/+server.js
import { error } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function GET({ url }) {
	const min = Number(url.searchParams.get('min') ?? '0');
	const max = Number(url.searchParams.get('max') ?? '1');

	const d = max - min;

	if (isNaN(d) || d < 0) {
		error(400, 'min and max must be numbers, and min must be less than max');
	}

	const random = min + Math.random() * d;

	return new Response(String(random));
}
```

--------------------------------

### Install and configure @sveltejs/adapter-netlify in vite.config.js

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/80-adapter-netlify.md

Adds the @sveltejs/adapter-netlify adapter to your SvelteKit project. The options shown (edge, split, publish) are the defaults; set edge to true to deploy as Netlify Edge Function, split to true for multiple functions, and publish to change the output directory.

```js
// @errors: 2307
/// file: vite.config.js
import adapter from '@sveltejs/adapter-netlify';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit({
			adapter: adapter({
				// See below for an explanation of these options
				edge: false,
				split: false,
				publish: 'build'
			})
		})
	]
});
```

--------------------------------

### GitHub Actions workflow for deploying to GitHub Pages

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/25-build-and-deploy/50-adapter-static.md

A GitHub Actions workflow that builds the SvelteKit site and deploys it to GitHub Pages. It sets the BASE_PATH environment variable to the repository name and uploads the build output.

```yaml
### file: .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v7

      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
      # - name: Install pnpm
      #   uses: pnpm/action-setup@v6
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v6
        with:
          node-version: 24
          cache: npm

      - name: Install dependencies
        run: npm i

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v5
        with:
          # this should match the `pages` option in your adapter-static options
          path: 'build/'

  deploy:
    needs: build_site
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v5
```

--------------------------------

### package.json name field

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/70-packaging.md

Sets the package name, which is used for installation and visible on npm.

```json
{
	"name": "your-library"
}
```

--------------------------------

### Typical SvelteKit project structure tree

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/10-getting-started/30-project-structure.md

Shows the default layout of a SvelteKit project, including the src directory with lib, routes, service-worker, and other files, plus static, tests, and root config files. Everything except src/routes and src/app.html is optional.

```tree
my-project/
├ src/
│ ├ lib/
│ │ └ [your lib files]
│ ├ routes/
│ │ └ [your routes]
│ ├ service-worker/
│ │ ├ index.js
│ │ └ tsconfig.json
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ ├ instrumentation.server.js
│ └ params.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ tsconfig.json
└ vite.config.js

```

--------------------------------

### redirect with external allowlist

Source: https://github.com/sveltejs/kit/blob/main/packages/kit/messages/shared-errors/public.md

Example of using the redirect function with an external allowlist to redirect to an external URL.

```APIDOC
## redirect(307, 'https://example.com/docs', { external: ['https://example.com'] })

### Description
Redirects to an external URL with an allowlist of permitted origins.

### Method
redirect

### Parameters
- **status** (number) - Required - HTTP status code (e.g., 307)
- **location** (string) - Required - The URL to redirect to
- **options** (object) - Optional - Configuration object with `external` property that can be `true` or an array of allowed origins.

### Example
```js
import { redirect } from '@sveltejs/kit';
redirect(307, 'https://example.com/docs', { external: ['https://example.com'] });
```
```

--------------------------------

### load function with route

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/20-core-concepts/20-load.md

Example of using the route object in a load function to log the current route directory.

```APIDOC
## load function with route

### Description
Example of using the route object in a load function to log the current route directory.

### Method
load

### Endpoint
src/routes/a/[b]/[...c]/+page.js

### Parameters
#### Load Function Input
- **route** (object) - Required - Contains the name of the current route directory, relative to `src/routes`. The `id` property is a string like `/a/[b]/[...c]`.

### Request Example
```js
/** @type {import('./$types').PageLoad} */
export function load({ route }) {
	console.log(route.id); // '/a/[b]/[...c]'
}
```

### Response
#### Success Response (200)
- **route.id** (string) - The route directory name.

#### Response Example
```
'/a/[b]/[...c]'
```
```

--------------------------------

### Preload on tap with data-sveltekit-preload-data="tap"

Source: https://github.com/sveltejs/kit/blob/main/documentation/docs/30-advanced/30-link-options.md

Use data-sveltekit-preload-data="tap" on a link to preload only when the user taps or clicks, avoiding false positives from hover. This is useful when data changes quickly or hover preloading is undesirable.

```html
<a data-sveltekit-preload-data="tap" href="/stonks">
	Get current stonk values
</a>
```
Tokens:
Raw