Chapter 12: With Router CLI

Core Idea

The @tanstack/router-cli package (exposing the tsr command) should only be used when a project doesn't rely on one of TanStack Router's supported bundlers (Vite, Rspack, Webpack, Esbuild); it only generates the route tree file via tsr generate/tsr watch and provides no other build features.

Key Concepts

• @tanstack/router-cli: The package providing the tsr CLI, installed as a dev dependency.
• tsr generate: One-time command that generates routes for a project based on the configuration.
• tsr watch: Continuously watches the configured routesDirectory and regenerates routeTree.gen.ts whenever a route file is added, removed, or changed.
• package.json script wiring: "generate-routes": "tsr generate", "watch-routes": "tsr watch", chained into build/dev scripts (e.g. "build": "npm run generate-routes && ...").
• Solid tsconfig requirement: Solid projects using the CLI need "jsx": "preserve" and "jsxImportSource": "solid-js" in compilerOptions.
• tsr.config.json: Where CLI-specific configuration overrides live (as opposed to bundler plugin options passed inline), same default keys as other integrations plus a target field ("react" or "solid").
• Same ignore-file guidance: routeTree.gen.ts should still be excluded from linters/formatters/VSCode exactly as with bundler plugin integrations.

Code Examples

{
  "scripts": {
    "generate-routes": "tsr generate",
    "watch-routes": "tsr watch",
    "build": "npm run generate-routes && ...",
    "dev": "npm run watch-routes && ..."
  }
}

• What it demonstrates: Wiring the CLI's generate/watch commands into standard build/dev npm scripts as a substitute for a bundler plugin.

Key Takeaways

1. Only reach for @tanstack/router-cli when none of the supported bundler plugins (Vite/Rspack/Webpack/Esbuild) apply, it is strictly a route-tree generator, nothing more.
2. tsr watch must run during development to keep routeTree.gen.ts in sync as route files change; tsr generate is the one-shot equivalent for build scripts.
3. Configuration for the CLI moves to tsr.config.json (with a target field for React vs Solid) instead of being passed as function arguments like the bundler plugins.

Connects To

• Ch 8-11: Vite, Rspack, Webpack, and Esbuild chapters cover the preferred bundler-plugin approach that this CLI chapter is a fallback for.
• Ch 7: Manual Installation references this chapter for non-Vite/non-bundler setups.