Prerequisites Before installing TanStack Start, ensure you have:
Node.js : Version 22.12.0 or higherPackage Manager : npm, yarn, or pnpmVite : Version 7.0.0 or higher (installed automatically)
TanStack Start requires Node.js 22.12.0 or higher. Make sure to update your Node.js version before proceeding.
Choose Your Framework TanStack Start is available for React, Solid, and Vue. Select your framework below:
React Installation Install TanStack Start for React along with its peer dependencies: npm install @tanstack/react-start @tanstack/react-router
Peer Dependencies TanStack Start for React requires:
react >= 18.0.0 or >= 19.0.0react-dom >= 18.0.0 or >= 19.0.0vite >= 7.0.0 These should be installed in your project: npm install react react-dom vite
Development Dependencies For TypeScript support and optimal development experience: npm install -D @types/react @types/react-dom typescript
For debugging and inspecting your router state: npm install @tanstack/react-router-devtools
Solid Installation Install TanStack Start for Solid along with its peer dependencies: npm install @tanstack/solid-start @tanstack/solid-router
Peer Dependencies TanStack Start for Solid requires:
solid-js >= 1.0.0vite >= 7.0.0 These should be installed in your project: npm install solid-js vite vite-plugin-solid
Development Dependencies For TypeScript support: npm install -D typescript
For debugging and inspecting your router state: npm install @tanstack/solid-router-devtools
Vue Installation Install TanStack Start for Vue along with its peer dependencies: npm install @tanstack/vue-start @tanstack/vue-router
Peer Dependencies TanStack Start for Vue requires:
vue >= 3.3.0vite >= 7.0.0 These should be installed in your project: npm install vue vite @vitejs/plugin-vue
Development Dependencies For TypeScript support: npm install -D typescript @vue/tsconfig
For debugging and inspecting your router state: npm install @tanstack/vue-router-devtools
Vite Configuration After installing the packages, configure Vite to use the TanStack Start plugin:
Create or update your vite.config.ts: import { defineConfig } from 'vite' import { tanstackStart } from '@tanstack/react-start/plugin/vite' import viteReact from '@vitejs/plugin-react' import { nitro } from 'nitro/vite' export default defineConfig ({ plugins: [ tanstackStart (), viteReact (), nitro (), ] , })
Plugin Order The plugin order is important:
tanstackStart() - Must come first to transform server functionsviteReact() - React plugin for JSX transformationnitro() - Server bundling and deployment Create or update your vite.config.ts: import { defineConfig } from 'vite' import { tanstackStart } from '@tanstack/solid-start/plugin/vite' import viteSolid from 'vite-plugin-solid' import { nitro } from 'nitro/vite' export default defineConfig ({ plugins: [ tanstackStart (), viteSolid ({ ssr: true }), nitro (), ] , })
Plugin Order The plugin order is important:
tanstackStart() - Must come first to transform server functionsviteSolid({ ssr: true }) - Solid plugin with SSR enablednitro() - Server bundling and deployment Create or update your vite.config.ts: import { defineConfig } from 'vite' import { tanstackStart } from '@tanstack/vue-start/plugin/vite' import viteVue from '@vitejs/plugin-vue' import { nitro } from 'nitro/vite' export default defineConfig ({ plugins: [ tanstackStart (), viteVue (), nitro (), ] , })
Plugin Order The plugin order is important:
tanstackStart() - Must come first to transform server functionsviteVue() - Vue plugin for SFC transformationnitro() - Server bundling and deployment TypeScript Configuration For optimal TypeScript support, configure your tsconfig.json:
{ "compilerOptions" : { "target" : "ES2020" , "module" : "ESNext" , "lib" : [ "ES2020" , "DOM" , "DOM.Iterable" ], "jsx" : "react-jsx" , "strict" : true , "moduleResolution" : "bundler" , "resolveJsonModule" : true , "isolatedModules" : true , "esModuleInterop" : true , "skipLibCheck" : true , "allowSyntheticDefaultImports" : true , "forceConsistentCasingInFileNames" : true , "types" : [ "vite/client" ] }, "include" : [ "src/**/*" ], "exclude" : [ "node_modules" ] }
{ "compilerOptions" : { "target" : "ES2020" , "module" : "ESNext" , "lib" : [ "ES2020" , "DOM" , "DOM.Iterable" ], "jsx" : "preserve" , "jsxImportSource" : "solid-js" , "strict" : true , "moduleResolution" : "bundler" , "resolveJsonModule" : true , "isolatedModules" : true , "esModuleInterop" : true , "skipLibCheck" : true , "allowSyntheticDefaultImports" : true , "forceConsistentCasingInFileNames" : true , "types" : [ "vite/client" ] }, "include" : [ "src/**/*" ], "exclude" : [ "node_modules" ] }
{ "extends" : "@vue/tsconfig/tsconfig.dom.json" , "compilerOptions" : { "target" : "ES2020" , "module" : "ESNext" , "lib" : [ "ES2020" , "DOM" , "DOM.Iterable" ], "strict" : true , "moduleResolution" : "bundler" , "resolveJsonModule" : true , "isolatedModules" : true , "esModuleInterop" : true , "skipLibCheck" : true , "allowSyntheticDefaultImports" : true , "forceConsistentCasingInFileNames" : true , "types" : [ "vite/client" ] }, "include" : [ "src/**/*" ], "exclude" : [ "node_modules" ] }
Package Scripts Add these scripts to your package.json:
{ "scripts" : { "dev" : "vite dev" , "build" : "vite build" , "preview" : "vite preview" , "start" : "node .output/server/index.mjs" } }
devbuildpreviewstart
Nitro Installation TanStack Start uses Nitro for server bundling and deployment. Install it as a dev dependency:
Nitro provides:
Universal deployment adapters
Auto-detected platform configuration
Production-optimized server builds
Support for serverless and edge runtimes
Directory Structure Create the following directory structure for your project:
my-app/ ├── src/ │ ├── routes/ # File-based routes │ │ ├── __root.tsx # Root route │ │ └── index.tsx # Home page │ ├── router.tsx # Router configuration │ └── routeTree.gen.ts # Generated route tree ├── public/ # Static assets ├── vite.config.ts # Vite configuration ├── tsconfig.json # TypeScript configuration └── package.json # Package manifest
Verification Verify your installation by checking the installed versions:
npm list @tanstack/react-start @tanstack/react-router # or npm list @tanstack/solid-start @tanstack/solid-router # or npm list @tanstack/vue-start @tanstack/vue-router
You should see version 1.166.1 or higher.
Next Steps
Quickstart Tutorial Build your first TanStack Start application with server functions
Server Functions Learn how to create and use server functions
SSR Setup Configure server-side rendering for your app
Deployment Deploy your application to production