### Project Setup and Running

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/ecommerce-starter/README.md

Commands to install dependencies and start the TanStack application. These are essential first steps for any new project.

```bash
npm install
npm run start
```

--------------------------------

### Setup Project Dependencies and Configuration

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Commands to install project dependencies using npm and copy the example environment file for API key configuration.

```bash
npm install
```

```bash
cp .env.example .env
```

--------------------------------

### Install and Start TanStack App

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Commands to install project dependencies using pnpm and start the development server.

```bash
pnpm install
pnpm start
```

--------------------------------

### Project Setup and Execution Commands

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/resume-starter/README.md

Essential bash commands for installing dependencies, starting the development server, building for production, and running tests. These commands are fundamental for managing the lifecycle of the TanStack application.

```bash
npm install
npm run start
```

```bash
npm run build
```

```bash
npm run test
```

--------------------------------

### Install and Start TanStack App

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/blog-starter/README.md

Installs project dependencies using pnpm and starts the development server for the TanStack application.

```bash
pnpm install
pnpm start
```

--------------------------------

### Install and Start TanStack App

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Commands to install project dependencies using pnpm and start the development server.

```bash
pnpm install
pnpm start
```

--------------------------------

### Interactive CLI Setup

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Shows how to initiate the interactive setup process for create-tanstack-app when no project name is provided. This process guides the user through various configuration choices.

```bash
pnpx create-tanstack-app@latest
```

--------------------------------

### Interactive CLI Setup

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Shows how to initiate an interactive setup process for create-tsrouter-app when no project name is provided. The CLI will then guide the user through various configuration choices.

```bash
pnpx create-tsrouter-app@latest

```

--------------------------------

### Development Setup Commands

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CLAUDE.md

Steps to clone the repository, install dependencies, build, develop, and test the create-tsrouter-app project.

```shell
gh repo clone TanStack/create-tsrouter-app
pnpm install
pnpm build
pnpm dev
pnpm test
```

--------------------------------

### Interactive Application Setup

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-start-app/README.md

Launches an interactive command-line interface to guide the user through the application setup process. This includes selecting project name, package manager, toolchain, and Git initialization.

```bash
pnpx create-start-app@latest
```

--------------------------------

### Building Example Apps with CLI

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CLAUDE.md

Demonstrates how to build example applications using the CLI, including options for testing local add-ons and starters by specifying URLs.

```bash
# Build with CLI (outside monorepo)
node cli/create-tsrouter-app/dist/index.js my-app

# Test with local add-ons
node cli/create-tsrouter-app/dist/index.js my-app --add-ons http://localhost:9080/add-on.json

# Test with local starters
node cli/create-tsrouter-app/dist/index.js my-app --starter http://localhost:9080/starter.json
```

--------------------------------

### Start AI Streaming Service

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/solid/examples/tanchat/README.md

Installs dependencies and starts the sidecar microservice for AI streaming.

```bash
cd ai-streaming-service
npm install
npm run dev
```

--------------------------------

### Initialize Netlify Project

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/react-cra/add-ons/netlify/README.md

Initializes a new Netlify project in the current directory. This command guides you through the setup process, including connecting to your Git repository and configuring build settings.

```bash
netlify init
```

--------------------------------

### Install Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Installs all project dependencies across the monorepo using pnpm. This command ensures all packages and examples have their necessary dependencies linked.

```bash
pnpm install
```

--------------------------------

### Start Convex Development Server

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/react-cra/add-ons/convex/README.md

Starts the Convex development server, allowing you to build and test your application with Convex backend services.

```shell
npx convex dev
```

--------------------------------

### Create TanStack Router/Start Apps

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CLAUDE.md

Quick start commands to create new applications using TanStack Router or TanStack Start. These commands leverage npx to execute the respective CLI tools, allowing for rapid project scaffolding.

```bash
npx create-tsrouter-app@latest my-app

npx create-start-app@latest my-app

npx create-tanstack@latest my-app
npx create-tanstack-app@latest my-app
```

--------------------------------

### Install Netlify CLI

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/react-cra/add-ons/netlify/README.md

Installs the Netlify command-line interface globally using npm. This tool is required for deploying and managing Netlify sites from your local environment.

```bash
npm install -g netlify-cli
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Installs the core React-Query library and its browser development tools using pnpm. These packages are essential for data fetching and debugging.

```bash
pnpm add @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### List Available Add-ons via CLI

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Shows how to list all available add-ons for project creation. Examples include listing add-ons for specific frameworks and template types.

```bash
pnpx create-tsrouter-app@latest --list-add-ons
pnpx create-tsrouter-app@latest --list-add-ons --framework solid --template file-router
```

--------------------------------

### Build Example App

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Builds a specific example application using the CLI. It's important to build apps outside the monorepo to avoid dependency hoisting issues.

```bash
node [root of the monorepo]/cli/create-tsrouter-app/dist/index.js app-js
```

--------------------------------

### Production Deployment Commands

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/solid/examples/tanchat/assets/ai-streaming-server/README.md

Commands to build the TypeScript code for production and start the server.

```bash
npm run build
```

```bash
npm start
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/ecommerce-starter/README.md

Installs the necessary packages for React-Query and its devtools using npm. These are essential for integrating client-side data fetching and caching into your application.

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### Install Solid-UI Button Component

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/solid/add-ons/solid-ui/README.md

This command installs the Solid-UI button component using the solidui-cli. It fetches the latest version of the CLI and adds the button functionality to your project.

```bash
npx solidui-cli@latest add button
```

--------------------------------

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/resume-starter/README.md

Demonstrates setting up a `QueryClient` and wrapping the application with `QueryClientProvider` in `main.tsx`. This makes the query client available throughout the React component tree.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

--------------------------------

### Create App with Specific Framework

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-start-app/README.md

Creates a new application project, allowing specification of a particular frontend framework like Solid. This enables tailored project setups.

```bash
pnpx create-start-app@latest my-app --framework solid
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/resume-starter/README.md

Installs the necessary packages for React-Query and its devtools using npm. These are essential for integrating client-side data fetching and caching into your application.

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### Developing CTA UI

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CLAUDE.md

Instructions for developing the CTA UI component library, including starting the API server and the React development server, and running the monorepo in watch mode.

```bash
# Start API server
CTA_DISABLE_UI=true node cli/create-tsrouter-app/dist/index.js --ui

# Start React dev server
cd packages/cta-ui && pnpm dev:ui

# Run monorepo in watch mode
pnpm dev
```

--------------------------------

### MCP Configuration Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Provides a JSON configuration structure for MCP clients to integrate with the create-tanstack-app CLI. This defines how an agent model can invoke the CLI with MCP support.

```json
{
  "mcpServers": {
    "create-tanstack-app": {
      "command": "pnpx",
      "args": ["create-tanstack-app@latest", "--mcp"]
    }
  }
}
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/blog-starter/README.md

Installs the core React-Query library and its browser development tools using pnpm. These packages are essential for data fetching and debugging.

```bash
pnpm add @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/ecommerce-starter/README.md

Demonstrates setting up a `QueryClient` and wrapping the application with `QueryClientProvider` in `main.tsx`. This makes the query client available throughout the React component tree.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

--------------------------------

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/blog-starter/README.md

Demonstrates creating a `QueryClient` instance and wrapping the application's root with `QueryClientProvider`. This setup is required for React-Query to manage and cache data across the application.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

--------------------------------

### Build TanStack App for Production

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Command to build the application for production deployment.

```bash
pnpm build
```

--------------------------------

### Code Based Routing Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Shows how to create an application with traditional code-based routing. This can be selected via the interactive CLI or by specifying the 'typescript' or 'javascript' template.

```bash
pnpx create-tsrouter-app@latest my-app --template typescript

```

--------------------------------

### Build TanStack App for Production

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Command to build the application for production deployment.

```bash
pnpm build
```

--------------------------------

### Build Project

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Builds the entire project, including all packages and examples within the monorepo. This command is essential for generating distributable code.

```bash
pnpm build
```

--------------------------------

### Monorepo Structure Overview

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CLAUDE.md

Illustrates the directory structure of the TanStack Application Builders monorepo. It highlights the organization of CLI applications, core packages, framework implementations, and example projects.

```bash
create-tsrouter-app/
├── cli/
│   ├── create-start-app/
│   ├── create-tanstack/
│   ├── create-tanstack-app/
│   └── create-tsrouter-app/
├── packages/
│   ├── cta-cli/
│   ├── cta-engine/
│   ├── cta-ui/
│   └── cta-ui-base/
├── frameworks/
│   ├── react-cra/
│   └── solid/
└── examples/
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Installs the core React-Query library and its browser development tools using pnpm. These packages are essential for data fetching and debugging.

```bash
pnpm add @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### TanStack Router Root Layout Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Example of a root layout component (`__root.tsx`) using `Outlet` and `Link` for navigation, including optional devtools.

```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})
```

--------------------------------

### TanStack Router Root Layout Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Example of a root layout component (`__root.tsx`) using `Outlet` and `Link` for navigation, including optional devtools.

```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})
```

--------------------------------

### List Available Add-ons

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Lists all available experimental add-ons for the current framework. This command is useful for discovering compatible features before project initialization.

```bash
pnpx create-tanstack-app@latest --list-add-ons
```

--------------------------------

### Command Line Options Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Illustrates using command-line flags to specify project preferences directly, such as template, CSS framework, and package manager, bypassing interactive prompts for those options.

```bash
pnpx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm

```

--------------------------------

### TanStack Router Link Component Usage

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Example of importing and using the `Link` component from `@tanstack/react-router` for SPA navigation.

```tsx
import { Link } from "@tanstack/react-router";

// ...

<Link to="/about">About</Link>
```

--------------------------------

### Create TanStack App CLI Options

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Lists and describes the available command-line options for the create-tanstack-app CLI, allowing users to customize project creation without interactive prompts.

```APIDOC
create-tanstack-app@latest [project-name] [options]

Options:
  --template <type>         Choose between `file-router`, `typescript`, or `javascript`.
                            Defaults to `file-router` if not specified.
  --tailwind                Enable Tailwind CSS support. Configures Tailwind V4.
  --package-manager <pm>    Specify preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, `deno`).
  --toolchain <tool>        Specify toolchain solution for formatting/linting (`biome`, `eslint+prettier`).
  --no-git                  Do not initialize a git repository.
  --add-ons                 Enable add-on selection or specify add-ons to install.
  --framework <name>        Specify the UI framework (e.g., `react`, `solid`). Defaults to `react`.
```

--------------------------------

### TanStack Router Link Component Usage

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Example of importing and using the `Link` component from `@tanstack/react-router` for SPA navigation.

```tsx
import { Link } from "@tanstack/react-router";

// ...

<Link to="/about">About</Link>
```

--------------------------------

### TanStack Router Data Loading with Loaders

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Example demonstrating how to use the `loader` functionality in TanStack Router to fetch data before a route is rendered.

```tsx
const peopleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/people",
  loader: async () => {
    const response = await fetch("https://swapi.dev/api/people");
    return response.json() as Promise<{ 
      results: { 
        name: string;
      }[];
    }>;
  },
  component: () => {
    const data = peopleRoute.useLoaderData();
    return (
      <ul>
        {data.results.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    );
  },
});
```

--------------------------------

### List Available Add-ons

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-start-app/README.md

Retrieves and displays a list of all available add-ons that can be included in a new project. This command helps users discover customization options.

```bash
pnpx create-start-app@latest --list-add-ons
```

```bash
pnpx create-start-app@latest --list-add-ons --framework solid
```

--------------------------------

### TanStack Router Data Loading with Loaders

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Example demonstrating how to use the `loader` functionality in TanStack Router to fetch data before a route is rendered.

```tsx
const peopleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/people",
  loader: async () => {
    const response = await fetch("https://swapi.dev/api/people");
    return response.json() as Promise<{ 
      results: { 
        name: string;
      }[];
    }>;
  },
  component: () => {
    const data = peopleRoute.useLoaderData();
    return (
      <ul>
        {data.results.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    );
  },
});
```

--------------------------------

### File Based Routing Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Demonstrates the command to explicitly create a new application using the recommended File Based Routing approach, which structures routes based on file locations.

```bash
pnpx create-tsrouter-app@latest my-app --template file-router

```

--------------------------------

### Install TanStack Store Dependency

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Adds the TanStack Store library to the project dependencies using pnpm. This library is used for client-side state management.

```bash
pnpm add @tanstack/store
```

--------------------------------

### Install TanStack Store Dependency

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Adds the TanStack Store library to the project dependencies using pnpm. This library is used for client-side state management.

```bash
pnpm add @tanstack/store
```

--------------------------------

### Configure Anthropic API Key

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/frameworks/react-cra/examples/tanchat/README.md

This snippet shows the necessary environment variable setup for the application to authenticate with the Anthropic Claude AI service. Ensure this key is kept secure.

```env
ANTHROPIC_API_KEY=your_anthropic_api_key
```

--------------------------------

### Fetch Data with useQuery

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Shows a basic example of fetching data from an API using the `useQuery` hook from React-Query. It defines a query key, a query function, and renders the fetched data.

```tsx
import { useQuery } from "@tanstack/react-query";

import "./App.css";

function App() {
  const { data } = useQuery({
    queryKey: ["people"],
    queryFn: () =>
      fetch("https://swapi.dev/api/people")
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  });

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

--------------------------------

### List Add-ons for Specific Framework/Template

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Lists available experimental add-ons for a specified framework and template. This command helps tailor add-on discovery to your project's stack, such as Solid with a file router.

```bash
pnpx create-tanstack-app@latest --list-add-ons --framework solid --template file-router
```

--------------------------------

### Fetch Data with useQuery

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Shows a basic example of fetching data from an API using the `useQuery` hook from React-Query. It defines a query key, a query function, and renders the fetched data.

```tsx
import { useQuery } from "@tanstack/react-query";

import "./App.css";

function App() {
  const { data } = useQuery({
    queryKey: ["people"],
    queryFn: () =>
      fetch("https://swapi.dev/api/people")
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  });

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

--------------------------------

### Create App with Starter

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Creates a new application using the CLI, based on a specified starter served from a local JSON endpoint. This is useful for testing custom starters.

```bash
node [root of the monorepo]/cli/create-tsrouter-app/dist/index.js app-js --starter http://localhost:9080/starter.json
```

--------------------------------

### Derived State with TanStack Store

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Illustrates how to create derived state using `Derived` from TanStack Store. This example doubles the count from a base store, automatically updating when the base state changes.

```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
});
doubledStore.mount();

function App() {
  const count = useStore(countStore);
  const doubledCount = useStore(doubledStore);

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
      <div>Doubled - {doubledCount}</div>
    </div>
  );
}

export default App;
```

--------------------------------

### Enable MCP Support

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-start-app/README.md

Launches the create-start-app CLI with Model Context Protocol (MCP) support enabled, allowing integration with MCP-enabled IDEs for agent-driven application generation.

```bash
pnpx create-start-app@latest --mcp
```

--------------------------------

### Derived State with TanStack Store

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Illustrates how to create derived state using `Derived` from TanStack Store. This example doubles the count from a base store, automatically updating when the base state changes.

```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
});
doubledStore.mount();

function App() {
  const count = useStore(countStore);
  const doubledCount = useStore(doubledStore);

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
      <div>Doubled - {doubledCount}</div>
    </div>
  );
}

export default App;
```

--------------------------------

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/mui-add-on/README.md

Demonstrates creating a `QueryClient` instance and wrapping the application's root with `QueryClientProvider`. This setup is required for React-Query to manage and cache data across the application.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

--------------------------------

### Setup React-Query Client and Provider

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/legend-state-add-on/README.md

Demonstrates creating a `QueryClient` instance and wrapping the application's root with `QueryClientProvider`. This setup is required for React-Query to manage and cache data across the application.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

--------------------------------

### Create TanStack App Script Commands

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/packages/cta-ui/README.md

Provides a comprehensive list of script commands for managing the Create TanStack App project. These commands cover building the library and React UI, running the UI in development mode, and executing tests with various options.

```APIDOC
Project Scripts:

  pnpm build
    - Description: Builds both the library and the React app.
    - Type: Build command

  pnpm build:ui
    - Description: Builds the React app only.
    - Type: Build command

  pnpm build:lib
    - Description: Builds just the `lib` directory.
    - Type: Build command

  pnpm dev:ui
    - Description: Uses Vite to run the React app in dev mode.
    - Type: Development command

  pnpm dev
    - Description: Builds the `lib` directory in watch mode.
    - Type: Development command

  pnpm test
    - Description: Runs the tests.
    - Type: Test command

  pnpm test:watch
    - Description: Runs the tests in watch mode.
    - Type: Test command

  pnpm test:coverage
    - Description: Runs the tests and generates a coverage report.
    - Type: Test command
```

--------------------------------

### Create TanStack App with Flags

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Illustrates using command-line flags to specify project preferences directly, such as template, Tailwind CSS support, and package manager, bypassing interactive prompts for certain options.

```bash
pnpx create-tanstack-app@latest my-app --template file-router --tailwind --package-manager pnpm
```

--------------------------------

### Start React App Development

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Navigates to the UI package directory and starts the React app in development mode. This allows for interactive UI development connected to the API server.

```bash
cd packages/cta-ui
pnpm dev:ui
```

--------------------------------

### Enable Add-on Selection

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-start-app/README.md

Initiates the application creation process with an interactive prompt for selecting optional add-ons. This allows users to customize their project with additional features.

```bash
pnpx create-start-app@latest --add-ons
```

--------------------------------

### Running Tests

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/ecommerce-starter/README.md

Command to execute the test suite using Vitest. This ensures the application's components and logic function as expected.

```bash
npm run test
```

--------------------------------

### Enable Add-ons via CLI

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tsrouter-app/README.md

Demonstrates how to enable add-ons during project creation. This can be done interactively by using the `--add-ons` flag alone, or by specifying a comma-separated list of desired add-ons directly.

```bash
pnpx create-tsrouter-app@latest --add-ons
pnpx create-tsrouter-app@latest my-app --add-ons shadcn,tanstack-query
```

--------------------------------

### Routing Options in TanStack Router

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack-app/README.md

Explains the two primary routing strategies supported by create-tanstack-app: File Based Routing (default and recommended) and Code Based Routing, detailing how to enable each.

```bash
# File Based Routing (Recommended)
pnpx create-tanstack-app@latest my-app --template file-router
```

```bash
# Code Based Routing (using typescript template)
pnpx create-tanstack-app@latest my-app --template typescript
```

--------------------------------

### Start API Server in Add Mode

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/CONTRIBUTING.md

Starts the create-tsrouter-app CLI in 'add' mode with API server enabled, disabling the UI. This is used when adding features or templates to an existing project.

```bash
CTA_DISABLE_UI=true node ../create-tsrouter-app/cli/create-tsrouter-app/dist/index.js add --ui
```

--------------------------------

### TanStack CLI Command Line Options

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/cli/create-tanstack/README.md

Lists available command-line flags for the create-tanstack CLI, allowing users to customize project setup directly. These options control templates, styling, package managers, toolchains, git initialization, and add-ons.

```bash
--template <type> (file-router, typescript, javascript)
--tailwind
--package-manager <manager> (npm, yarn, pnpm, bun, deno)
--toolchain <solution> (biome, eslint+prettier)
--no-git
--add-ons
```

--------------------------------

### Install TanStack Store Dependency

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/resume-starter/README.md

Installs the `@tanstack/store` package using npm. This library provides a simple and efficient way to manage global state in React applications.

```bash
npm install @tanstack/store
```

--------------------------------

### TanStack Router Root Layout Example

Source: https://github.com/tanstack/create-tsrouter-app/blob/main/examples/react-cra/resume-starter/README.md

Demonstrates setting up a root layout component in TanStack Router, which includes navigation links and the Outlet for rendering child routes. It also shows how to include TanStack Router Devtools.

```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})
```