Build an app with SvelteKit and Bun

Use sv create my-app to create a SvelteKit project with the Svelte CLI. Answer the prompts to select a template and set up your development environment.

terminal

bunx sv create my-app

┌  Welcome to the Svelte CLI! (v0.5.7)
│
◇  Which template would you like?
│  SvelteKit demo
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  none
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◇  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-app                                                            │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

Once the project is initialized, cd into the new project. The dependencies are already installed, so you don't need to run bun install.

Then start the development server with bun --bun run dev.

To run the dev server with Node.js instead of Bun, omit the --bun flag.

terminal

cd my-app
bun --bun run dev

  $ vite dev
  Forced re-optimization of dependencies

    VITE v5.4.10  ready in 424 ms

    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help

Visit http://localhost:5173 in a browser to see the template app.

Edit and save src/routes/+page.svelte and the dev server hot-reloads your changes in the browser.

To build for production, you need a SvelteKit adapter. We recommend svelte-adapter-bun; install it with bun add -D svelte-adapter-bun.

Then make the following changes to your vite.config.ts (or vite.config.js). If your project configures SvelteKit in a svelte.config.js instead, swap the adapter import there.

vite.config.ts

import adapter from "@sveltejs/adapter-auto"; 
import adapter from "svelte-adapter-bun"; 
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    sveltekit({
      compilerOptions: {
        // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
        runes: ({ filename }) => (filename.split(/[/\\]/).includes("node_modules") ? undefined : true),
      },

      // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
      // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
      // See https://svelte.dev/docs/kit/adapters for more information about adapters.
      adapter: adapter(),
    }),
  ],
});

To build a production bundle:

terminal

bun --bun run build

  $ vite build
  vite v5.4.10 building SSR bundle for production...
  "confetti" is imported from external module "@neoconfetti/svelte" but never used in "src/routes/sverdle/+page.svelte".
  ✓ 130 modules transformed.
  vite v5.4.10 building for production...
  ✓ 148 modules transformed.
  ...
  ✓ built in 231ms
  ...
  ✓ built in 899ms

  Run npm run preview to preview your production build locally.

  > Using svelte-adapter-bun
    ✔ done

Then start the production server with bun ./build/index.js. It listens on port 3000 by default; set the PORT environment variable to change it.

terminal

bun ./build/index.js

Listening on http://0.0.0.0:3000/