Skip to main content

Deno Deploy

How to use Sveltekit OG with the Deno adapter (svelte-adapter-deno)

This section details the configuration needed to deploy SvelteKit OG using the Deno adapter (svelte-adapter-deno), targeting the Deno Runtime (Deno Deploy).

Installation

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

		deno add --dev npm:svelte-adapter-deno

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

svelte.config.js
		import adapter from 'svelte-adapter-deno';
 
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.

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.

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.

Preview

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

Known Issues

Netlify

How to use Sveltekit OG with netlify adapter (@sveltejs/adapter-netlify)

GitHub Repository OG Image

Recreate the iconic GitHub repository social card using dynamic data and Svelte components.