TanStack Start

Connect a React TanStack Start app to Tako's Vite adapter, build the fetch-compatible server entry, and verify SSR, assets, and local HTTPS.

Use the tanstack-start preset for a React TanStack Start application. Add Tako to the existing Vite configuration without removing the framework’s plugins.

Configure Vite and Tako

import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { tako } from "tako.sh/vite";

export default defineConfig({
  plugins: [tanstackStart(), viteReact(), tako()],
});

name = "start-app"
runtime = "bun"
preset = "tanstack-start"

[envs.production]
route = "start.example.com"
servers = ["prod"]

Keep the React plugin after tanstackStart(). The Tako preset supplies main = "dist/server/tako-entry.mjs", assets = ["dist/client"], and the Vite dev command. Keep a build script that runs vite build; no manual server entry override is needed for this output layout.

The Tako plugin wraps the compiled fetch-compatible server entry, preserves internal status/auth endpoints, externalizes the server SDK, and reports dev readiness. It initializes the server runtime for Secrets, Stores, and Workflows. Keep server SDK access out of client components.

Develop and verify

tako dev --background --json

Use the returned HTTPS URL. Check an SSR response, client-side navigation, static assets, and any server functions the app uses. Build before deployment and confirm both dist/server/tako-entry.mjs and dist/client exist. For a path-mounted app, align Vite’s base with the configured route and test nested URLs.

Deploy using Deployment. Source example: examples/javascript/tanstack-start. Upstream: TanStack Start configuration.