Installation & Project Structure

Requirements

  • Node.js 20+ or Bun
  • React and TypeScript basics
  • VS Code with TypeScript support is recommended

Create a Project

Prefer the latest official docs for exact starter commands. Commonly:

npm create tanstack@latest

Or with Bun:

bun create tanstack

Choose React, Start, and Vite or Rsbuild when the starter asks.

Key Dependencies

{
  "dependencies": {
    "@tanstack/react-start": "<pin-exact-version>",
    "@tanstack/react-router": "<pin-exact-version>",
    "@tanstack/router-plugin": "<pin-exact-version>",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

During RC, pin exact versions for production.

Typical Structure

src/
??? routes/
?   ??? __root.tsx
?   ??? index.tsx
?   ??? posts.$postId.tsx
??? routeTree.gen.ts
??? router.tsx
??? start.ts

Vite Plugin

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'

export default defineConfig({
  plugins: [TanStackRouterVite(), tanstackStart(), react()],
})

Use the official template if plugin order or names change.

Next Steps