Use TanStack Start with Bun

TanStack Start is a full-stack framework powered by TanStack Router. It supports full-document SSR, streaming, server functions, bundling and more, powered by TanStack Router and Vite.

Create a new TanStack Start app

Use the interactive CLI to create a new TanStack Start app.

terminal

bun create @tanstack/start@latest my-tanstack-app

Start the dev server

Change to the project directory and run the dev server with Bun.

terminal

cd my-tanstack-app
bun --bun run dev

This starts the Vite dev server with Bun.

Update scripts in package.json

Modify the scripts field in your package.json by prefixing the Vite CLI commands with bun --bun. This ensures that Bun executes the Vite CLI for common tasks like dev, build, and preview.

package.json

{
  "scripts": {
    "dev": "bun --bun vite dev", 
    "build": "bun --bun vite build", 
    "serve": "bun --bun vite preview"
  }
}

Hosting

Add Nitro to your project

Add Nitro to your project. This tool allows you to deploy your TanStack Start app to different platforms.

terminal

bun add nitro

Update your vite.config.ts file

Update your vite.config.ts file to include the necessary plugins for TanStack Start with Bun.

https://mintcdn.com/bun-1dd33a4e/Hq64iapoQXHbYMEN/icons/typescript.svg?fit=max&auto=format&n=Hq64iapoQXHbYMEN&q=85&s=c6cceedec8f82d2cc803d7c6ec82b240

vite.config.ts

// other imports...
import { nitro } from "nitro/vite"; 

const config = defineConfig({
  plugins: [
    tanstackStart(),
    nitro({ preset: "bun" }), 
    // other plugins...
  ],
});

export default config;

The bun preset is optional, but it configures the build output specifically for Bun’s runtime.

Update the start command

Make sure build and start scripts are present in your package.json file:

package.json

  {
    "scripts": {
      "build": "bun --bun vite build", 
      // The .output files are created by Nitro when you run `bun run build`.
      // Not necessary when deploying to Vercel.
      "start": "bun run .output/server/index.mjs"
    }
  }

You do not need the custom start script when deploying to Vercel.

Deploy your app

Check out one of our guides to deploy your app to a hosting provider.

When deploying to Vercel, you can either add the "bunVersion": "1.x" to your vercel.json file, or add it to the nitro config in your vite.config.ts file:

Do not use the bun Nitro preset when deploying to Vercel.

vite.config.ts

export default defineConfig({
  plugins: [
    tanstackStart(),
    nitro({
      preset: "bun", 
      vercel: { 
        functions: { 
          runtime: "bun1.x", 
        }, 
      }, 
    }),
  ],
});