# Start Core
> Core overview for TanStack Start: tanstackStart() Vite plugin, getRouter() factory, root route document shell (HeadContent, Scripts, Outlet), client/server entry points, routeTree.gen.ts, tsconfig configuration. Entry point for all Start skills.
- Skill: `mehdibha/start-core` (Agent Skill)
- Install (CLI): `npx skillmds@latest add mehdibha/start-core`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mehdibha/start-core/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: mehdibha (https://skillmd.com/u/mehdibha)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mehdibha/start-core
---
# TanStack Start Core
TanStack Start is a full-stack React framework built on TanStack Router and Vite. It adds SSR, streaming, server functions (type-safe RPCs), middleware, server routes, and universal deployment.
> **CRITICAL**: All code in TanStack Start is ISOMORPHIC by default — it runs in BOTH server and client environments. Loaders run on both server AND client. To run code exclusively on the server, use `createServerFn`. This is the #1 AI agent mistake.
> **CRITICAL**: TanStack Start is NOT Next.js. Do not generate `getServerSideProps`, `"use server"` directives, `app/layout.tsx`, or any Next.js/Remix patterns. Use `createServerFn` for server-only code.
> **CRITICAL**: Types are FULLY INFERRED. Never cast, never annotate inferred values.
## Sub-Skills
| Task | Sub-Skill |
| -------------------------------------------- | ------------------------------------------------------------------- |
| Type-safe RPCs, data fetching, mutations | [start-core/server-functions/SKILL.md](./server-functions/SKILL.md) |
| Request/function middleware, context, auth | [start-core/middleware/SKILL.md](./middleware/SKILL.md) |
| Isomorphic execution, environment boundaries | [start-core/execution-model/SKILL.md](./execution-model/SKILL.md) |
| REST API endpoints alongside app routes | [start-core/server-routes/SKILL.md](./server-routes/SKILL.md) |
| Hosting, SSR modes, prerendering, SEO | [start-core/deployment/SKILL.md](./deployment/SKILL.md) |
## Quick Decision Tree
```text
Need to run code exclusively on the server (DB, secrets)?
→ start-core/server-functions
Need auth checks, logging, or shared logic across server functions?
→ start-core/middleware
Need to understand where code runs (server vs client)?
→ start-core/execution-model
Need a REST API endpoint (GET/POST/PUT/DELETE)?
→ start-core/server-routes
Need to deploy, configure SSR, or prerender?
→ start-core/deployment
```
## Project Setup
### 1. Install Dependencies
```bash
npm i @tanstack/react-start @tanstack/react-router react react-dom
npm i -D vite @vitejs/plugin-react typescript
```
### 2. Configure Vite
```ts
// vite.config.ts
import { defineConfig } from "vite"
import { tanstackStart } from "@tanstack/react-start/plugin/vite"
import viteReact from "@vitejs/plugin-react"
export default defineConfig({
plugins: [
// MUST come before react()
tanstackStart(),
viteReact(),
],
})
```
### 3. Create Router Factory
```tsx
// src/router.tsx
import { createRouter } from "@tanstack/react-router"
import { routeTree } from "./routeTree.gen"
export function getRouter() {
const router = createRouter({
routeTree,
scrollRestoration: true,
})
return router
}
```
### 4. Create Root Route with Document Shell
```tsx
// src/routes/__root.tsx
import type { ReactNode } from "react"
import {
Outlet,
createRootRoute,
HeadContent,
Scripts,
} from "@tanstack/react-router"
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "My App" },
],
}),
component: RootComponent,
})
function RootComponent() {
return (
)
}
```
### 5. Create Index Route with Server Function
```tsx
// src/routes/index.tsx
import { createFileRoute } from "@tanstack/react-router"
import { createServerFn } from "@tanstack/react-start"
const getGreeting = createServerFn({ method: "GET" }).handler(async () => {
return { message: "Hello from the server!" }
})
export const Route = createFileRoute("/")({
loader: () => getGreeting(),
component: HomePage,
})
function HomePage() {
const data = Route.useLoaderData()
return {data.message}
}
```
## Common Mistakes
### 1. CRITICAL: React plugin before Start plugin in Vite config
```ts
// WRONG — route generation and server function compilation fail
plugins: [react(), tanstackStart()]
// CORRECT — Start plugin must come first
plugins: [tanstackStart(), react()]
```
### 2. HIGH: Enabling verbatimModuleSyntax in tsconfig
`verbatimModuleSyntax` causes server bundles to leak into client bundles. Keep it disabled.
### 3. HIGH: Missing Scripts component in root route
The `` component must be rendered in the `` of the root route. Without it, client-side JavaScript does not load and hydration fails.
```tsx
// WRONG — no Scripts
function RootComponent() {
return (
)
}
// CORRECT — Scripts in body
function RootComponent() {
return (
)
}
```
## Version Note
This skill targets `@tanstack/react-start` v1.166.2 and `@tanstack/start-client-core` v1.166.2.