Skip to main content

Bun

How to use SvelteKit OG with the official Bun adapter (@sveltejs/adapter-bun)

This section details the configuration needed to run SvelteKit OG on the Bun runtime with the official Bun adapter (@sveltejs/adapter-bun). Both engines work: Satori + ReSVG take the Node code path (the wasm is read from node_modules), and Takumi resolves its native backend through its bun export condition.

Installation

Install the Bun adapter:

		bun add -D @sveltejs/adapter-bun
	

SvelteKit 3 has no svelte.config.js; pass the adapter to sveltekit() in vite.config.js:

vite.config.js
		import adapter from '@sveltejs/adapter-bun';
import { sveltekit } from '@sveltejs/kit/vite';
import { sveltekitOG } from '@ethercorps/sveltekit-og/plugin';
 
const config = {
	plugins: [sveltekit({ adapter: adapter() }), sveltekitOG({ esmImport: false })]
};
 
export default config;
	

Plugin Configuration

Use the sveltekitOG Vite plugin with { esmImport: false }, exactly as on Node: the Wasm module is then loaded with Bun's Node-compatible file APIs instead of an ESM .wasm import. The plugin only touches the server bundle, so the client-side entry keeps working alongside it.

Build and run

Build with Bun (not Node) and start the generated server:

package.json
		{
	"scripts": {
		"build": "bun run --bun vite build",
		"start": "bun ./build"
	}
}
	
Bash
		bun run build
bun run start
	

The server listens on PORT (default 3000). See the adapter docs for HOST, SOCKET_PATH, proxy headers and the other environment variables.

Usage

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

Preview (Self Test)

Source: https://github.com/etherCorps/sveltekit-og/tree/main/examples/bun-build

Step-by-Step Guide

  • Clone the repository and navigate:
Bash
		git clone https://github.com/etherCorps/sveltekit-og.git
cd sveltekit-og/examples/bun-build
	
  • Install dependencies:
Bash
		pnpm install
	
  • Build with Bun:
Bash
		bun run build
	
  • Start the server:
Bash
		bun run start
	

Then open http://localhost:3000 to browse the example gallery — the PNG, SVG and Takumi routes, each as an HTML string, a Svelte component, and a pre-rendered image, plus the client-side renders.

More on how to use adapter-bun in SvelteKit