Skip to main content
tanstack-start-project-setup Initialize a TanStack Start (SSR) project with Vite, server functions, React Query, and proper configuration.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/agusmdev/fullstack-ai-template --skill tanstack-start-project-setupThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Codebase health scanner and technical debt tracker. Use when the user asks about code quality, technical debt, dead code, large files, god classes, duplicate functions, code smells, naming issues, import cycles, or coupling problems. Also use when asked for a health score, what to fix next, or to create a cleanup plan. Supports 29 languages.
Configure Alembic for async SQLAlchemy migrations with PostgreSQL
Create FastAPI application factory with lifespan, middleware, pagination, and router configuration
Related occupations SOC
Based on SOC occupation classification
name tanstack-start-project-setup description Initialize a TanStack Start (SSR) project with Vite, server functions, React Query, and proper configuration.
TanStack Start Project Setup
Overview
This skill covers initializing a new TanStack Start project with bun package manager. TanStack Start is a full-stack React framework with integrated routing, server-side rendering, and data fetching capabilities.
Step 1: Create Project with CLI
The easiest way to initialize a TanStack Start project is using the official CLI:
bunx create @tanstack/start@latest
Or manually with npm:
npm create @tanstack/start@latest
The CLI will prompt for:
Project name
Optional add-ons (Tailwind CSS, ESLint, Shadcn, TanStack Query, etc.)
Step 2: Navigate to Project
cd your-project-name
Step 3: Install Dependencies
If you created the project with the CLI, install dependencies:
bun install
For Bun deployment, upgrade React to version 19+:
bun install react@19 react-dom@19
Step 4: Create package.json (if building from scratch)
{
"name" : "your-project-name" ,
"version" : "0.1.0" ,
"type" :
"module"
,
"scripts"
:
{
"dev"
:
"vite"
,
"build"
:
"vite build"
,
"start"
:
"node .output/server/index.mjs"
}
,
"dependencies"
:
{
"@tanstack/react-router"
:
"^1.84.0"
,
"@tanstack/react-start"
:
"^1.84.0"
,
"react"
:
"^19.0.0"
,
"react-dom"
:
"^19.0.0"
,
"vite"
:
"^6.0.0"
}
,
"devDependencies"
:
{
"@types/node"
:
"^22.10.0"
,
"@types/react"
:
"^19.0.0"
,
"@types/react-dom"
:
"^19.0.0"
,
"@vitejs/plugin-react"
:
"^4.3.4"
,
"typescript"
:
"^5.7.2"
,
"vite-tsconfig-paths"
:
"^5.1.4"
}
}
Step 5: Create tsconfig.json {
"compilerOptions" : {
"jsx" : "react-jsx" ,
"moduleResolution" : "Bundler" ,
"module" : "ESNext" ,
"target" : "ES2022" ,
"skipLibCheck" : true ,
"strictNullChecks" : true ,
"baseUrl" : "." ,
"paths" : {
"~/*" : [ "./src/*" ]
}
}
}
Step 6: Create vite.config.ts import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig ({
server : {
port : 3000 ,
},
plugins : [
tsconfigPaths (),
tanstackStart (),
viteReact (),
],
})
For Bun deployment, add Nitro preset:
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { nitro } from 'nitro/vite'
import viteReact from '@vitejs/plugin-react'
export default defineConfig ({
plugins : [
tanstackStart (),
nitro ({ preset : 'bun' }),
viteReact (),
],
})
With custom routes directory (App Router style):
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig ({
server : {
port : 3000 ,
},
plugins : [
tsconfigPaths (),
tanstackStart ({
srcDirectory : 'src' ,
router : {
routesDirectory : 'app' ,
},
}),
viteReact (),
],
})
Step 7: Create Directory Structure mkdir -p src/{routes,types}
mkdir -p public
touch src/router.tsx
Standard project structure:
your-project-name/
โโโ src/
โ โโโ routes/ # File-based routing
โ โ โโโ __root.tsx # Root layout
โ โโโ types/ # TypeScript types
โ โโโ router.tsx # Router configuration
โ โโโ routeTree.gen.ts # Generated route tree (auto-generated)
โโโ public/ # Static assets
โโโ vite.config.ts # Vite configuration
โโโ tsconfig.json # TypeScript configuration
โโโ package.json # Dependencies and scripts
โโโ .gitignore
Step 8: Create Root Route Create src/routes/__root.tsx:
import { createRootRoute, Outlet } from '@tanstack/react-router'
export const Route = createRootRoute ({
component : () => (
<html >
<head >
<meta charSet ="UTF-8" />
<meta name ="viewport" content ="width=device-width, initial-scale=1.0" />
<title > TanStack Start App</title >
</head >
<body >
<Outlet />
</body >
</html >
Step 9: Create Router Configuration import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
export const router = createRouter ({ routeTree })
declare module '@tanstack/react-router' {
interface Register {
router : typeof router
}
}
Step 10: Start Development Server The application will be available at http://localhost:3000.
Verification
Development server starts without errors
Navigate to http://localhost:3000 and see the TanStack Start welcome page
TypeScript compilation works: bun run build
Route tree is auto-generated in src/routeTree.gen.ts
Notes
TanStack Start uses file-based routing in the src/routes/ directory
The route tree is automatically generated by Vite plugin
Always use bunx or bun run for commands
For Bun deployment, ensure React 19+ is installed
Server functions can be defined with createServerFn
TanStack Query integration is optional but recommended
Next Steps
Add routes in src/routes/ directory
Configure TanStack Query (see tanstack-react-query-setup skill)
Set up Tailwind CSS and shadcn/ui (see tanstack-shadcn-setup skill)
Add server functions for data fetching (see tanstack-start-server-functions skill)
