Cloudflare

This section details the necessary configuration to ensure the SvelteKit OG's image generation engine, which relies on WebAssembly (Wasm), is correctly bundled and executed within the Cloudflare Workers or Pages runtime environment.

Installation

To deploy with Cloudflare, you must first install the necessary SvelteKit adapter:

		pnpm i -D @sveltejs/adapter-cloudflare
	

		npm i -D @sveltejs/adapter-cloudflare
	

		yarn add -D @sveltejs/adapter-cloudflare
	

		deno add --dev npm:@sveltejs/adapter-cloudflare
	

In your svelte.config.js, configure the adapter:

		import adapter from '@sveltejs/adapter-cloudflare';
 
const config = {
	 ...,
    kit: {
        adapter: adapter()
    },
    ...
};
export default config;
	

Plugin Configuration

The image generation uses the @resvg/resvg-wasm, satori, yoga, which relies on a Wasm module. The official SvelteKit OG plugins handle the complex Wasm bundling required for the build/runtime. You must choose one of the following plugins based on your sveltekit-og version.

Vite Plugin (Recommended)

Add the sveltekitOG plugin to your vite.config.ts.

		import { sveltekit } from '@sveltejs/kit/vite';
import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
import { defineConfig } from 'vite';
 
const config = defineConfig({
	plugins: [
		sveltekit(),
		sveltekitOG() // Add the Vite plugin
	]
});
 
export default config;
	

Rollup Plugin (Legacy)

Add the rollupWasm plugin inside the rollupOptions block in your vite.config.ts.

		import { sveltekit } from '@sveltejs/kit/vite';
import { rollupWasm } from '@ethercorps/sveltekit-og/plugin';
import { defineConfig } from 'vite';
 
const config = defineConfig({
	plugins: [sveltekit()],
	build: {
		rollupOptions: {
			// Add rollupWasm plugin for Cloudflare compatibility
			plugins: [rollupWasm()]
		}
	}
});
 
export default config;
	

Usage

Once configured, the usage remains the same as any other SvelteKit environment.

• Svelte Components: Refer to the Svelte Component usage.

• Raw HTML: Refer to the Raw HTML section for usage with string templates.

Preview

Cloudflare Workers

Source: https://github.com/etherCorps/sveltekit-og/tree/main/examples/cf-workers-build
Live: https://workers.sveltekit-og.dev/cog

Cloudflare Pages

Source: https://github.com/etherCorps/sveltekit-og/tree/main/examples/cf-pages-build
Live: https://pages.sveltekit-og.dev/cog