Build a full-stack app with TanStack Start
A production-ready full-stack React application built with TanStack Start — scaffolded from scratch, with typed routes, server functions for data, an auth flow, and deployed to production — shipped in about 3 to 4 weeks of part-time work.
One-time payment — yours to keep forever
Included with every copy
- Your own copy — keep it forever
- Gets better over time — free updates included
- Run it on web and mobile
- Invite a partner to go through it with you — you share the same progress
- The playbook's community — ask questions, get additions, and see how other buyers improve it, right on the step
Who it's for
React developers who can build a component and use hooks, but haven't shipped a full-stack app with TanStack Start. You're comfortable with TypeScript and understand what SSR means. You want to go from zero to deployed without hitting every footgun in the docs.
Who it's NOT for
Beginners who haven't built a React component yet. Teams already running TanStack Start in production — you know your stack. People who want a CMS or a no-code tool.
About this playbook
You know React, but wiring it to a backend feels like patching two separate projects together. TanStack Start gives you a single framework that handles routing, SSR, data fetching, and deployment — but the docs spread across ten pages and the wrong first choices cost you days in refactoring. This playbook walks the path I've taken five times: scaffold, route tree, server functions, auth middleware, deploy. Every phase has the exact file changes and the gotcha that cost me a weekend to figure out.
What you'll do, step by step
5 phases · 17 steps
Free preview — these steps are open to read in full before you buy.
A working app shell in under an hour. The CLI does most of the heavy lifting — the decisions you make here set the foundation for everything that follows.
- 1Create the project with the CLIFree preview12 min
Run
npx @tanstack/cli@latest createand follow the prompts. Pick your package manager — I default topnpmbecause its workspace handling is cleaner when the app grows — and select a TypeScript template.The CLI sets up more than boilerplate: it configures Vite, the router plugin, route-tree generation, and the SSR entry. What you get is a dev server that already works:
pnpm devand you're onlocalhost:3000with SSR active.You're done when
A running dev server at localhost:3000 that renders a TanStack Start welcome page with SSR correctly serving HTML on first load.
Tip
Run the CLI inside an empty directory, not an existing git repo. It creates its own structure and the git init step gets confused when there's already a .git folder.
Watch out
Node versions below 22.12.0 fail with an obscure ERR_PACKAGE_PATH_NOT_EXPORTED. Check your version with
node --versionbefore you start — I lost an hour to this the first time because I assumed my LTS was recent enough. - 2Set up TypeScript and app configFree preview30 min
The scaffold gives you a working
tsconfig.json, but a few tweaks prevent headaches later. EnsurestrictNullChecksis on (it should be by default), and check thatverbatimModuleSyntaxis not set — the official build-from-scratch guide warns it can cause server bundles to leak into client bundles. I add path aliases too, so@/maps to./app/and imports stay readable.Then open
vite.config.ts— the framework config lives here now, not in a separateapp.config.ts. The scaffold sets up thetanstackStart()Vite plugin with sensible defaults. No changes needed yet for local dev — you'll configure deployment plugins in the final phase.- Confirm tsconfig has strictNullChecks: true and no verbatimModuleSyntax
- Add a path alias (@/) to tsconfig.json
- Add resolve.alias to the Vite config or use a plugin like vite-tsconfig-paths
- Run pnpm dev to confirm the alias resolves without errors
You're done when
A tsconfig.json with strict mode on, no verbatimModuleSyntax, and a path alias like
@/*pointing to./app/*.Tip
Set
baseUrl: '.'andpaths: { '@/*': ['./app/*'] }in tsconfig.json, then addresolve.aliasin the Vite config too — both TS and Vite need to know about the alias or you'll get one working and the other broken.Watch out
The
@tanstack/react-routerCLI plugin generatesrouteTree.gen.tsin the app directory. Make sure your tsconfig includes it, or you'll see red squiggly imports on every route file.
Details
What you need first
Node.js >=22.12.0 installed. A GitHub account. Familiarity with `npm` and the terminal. Optionally, a hosting account (Netlify or Cloudflare) for the deployment phase.
Tags
What people who used it say
Only buyers who got through at least half the steps can leave a review.
No reviews yet. The first ones appear once buyers get through at least half the steps.
Common questions
About the creator
8 years of full-stack development, led a Next.js-to-TanStack-Start migration at a SaaS startup, maintains open-source React tooling
Creating since 2026
Full-stack TypeScript developer who has shipped 5+ production apps with TanStack Start since its public beta. I write the guides I wish I'd had when I was learning full-stack React — no fluff, just what actually works in production.