···11+Welcome to your new TanStack Start app!
22+33+# Getting Started
44+55+To run this application:
66+77+```bash
88+pnpm install
99+pnpm dev
1010+```
1111+1212+# Building For Production
1313+1414+To build this application for production:
1515+1616+```bash
1717+pnpm build
1818+```
1919+2020+## Testing
2121+2222+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
2323+2424+```bash
2525+pnpm test
2626+```
2727+2828+## Styling
2929+3030+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
3131+3232+### Removing Tailwind CSS
3333+3434+If you prefer not to use Tailwind CSS:
3535+3636+1. Remove the demo pages in `src/routes/demo/`
3737+2. Replace the Tailwind import in `src/styles.css` with your own styles
3838+3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
3939+4. Uninstall the packages: `pnpm add @tailwindcss/vite tailwindcss --dev`
4040+4141+## Linting & Formatting
4242+4343+4444+This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
4545+4646+```bash
4747+pnpm lint
4848+pnpm format
4949+pnpm check
5050+```
5151+5252+5353+5454+## Routing
5555+5656+This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
5757+5858+### Adding A Route
5959+6060+To add a new route to your application just add a new file in the `./src/routes` directory.
6161+6262+TanStack will automatically generate the content of the route file for you.
6363+6464+Now that you have two routes you can use a `Link` component to navigate between them.
6565+6666+### Adding Links
6767+6868+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
6969+7070+```tsx
7171+import { Link } from "@tanstack/react-router";
7272+```
7373+7474+Then anywhere in your JSX you can use it like so:
7575+7676+```tsx
7777+<Link to="/about">About</Link>
7878+```
7979+8080+This will create a link that will navigate to the `/about` route.
8181+8282+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
8383+8484+### Using A Layout
8585+8686+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
8787+8888+Here is an example layout that includes a header:
8989+9090+```tsx
9191+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
9292+9393+export const Route = createRootRoute({
9494+ head: () => ({
9595+ meta: [
9696+ { charSet: 'utf-8' },
9797+ { name: 'viewport', content: 'width=device-width, initial-scale=1' },
9898+ { title: 'My App' },
9999+ ],
100100+ }),
101101+ shellComponent: ({ children }) => (
102102+ <html lang="en">
103103+ <head>
104104+ <HeadContent />
105105+ </head>
106106+ <body>
107107+ <header>
108108+ <nav>
109109+ <Link to="/">Home</Link>
110110+ <Link to="/about">About</Link>
111111+ </nav>
112112+ </header>
113113+ {children}
114114+ <Scripts />
115115+ </body>
116116+ </html>
117117+ ),
118118+})
119119+```
120120+121121+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
122122+123123+## Server Functions
124124+125125+TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
126126+127127+```tsx
128128+import { createServerFn } from '@tanstack/react-start'
129129+130130+const getServerTime = createServerFn({
131131+ method: 'GET',
132132+}).handler(async () => {
133133+ return new Date().toISOString()
134134+})
135135+136136+// Use in a component
137137+function MyComponent() {
138138+ const [time, setTime] = useState('')
139139+140140+ useEffect(() => {
141141+ getServerTime().then(setTime)
142142+ }, [])
143143+144144+ return <div>Server time: {time}</div>
145145+}
146146+```
147147+148148+## API Routes
149149+150150+You can create API routes by using the `server` property in your route definitions:
151151+152152+```tsx
153153+import { createFileRoute } from '@tanstack/react-router'
154154+import { json } from '@tanstack/react-start'
155155+156156+export const Route = createFileRoute('/api/hello')({
157157+ server: {
158158+ handlers: {
159159+ GET: () => json({ message: 'Hello, World!' }),
160160+ },
161161+ },
162162+})
163163+```
164164+165165+## Data Fetching
166166+167167+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
168168+169169+For example:
170170+171171+```tsx
172172+import { createFileRoute } from '@tanstack/react-router'
173173+174174+export const Route = createFileRoute('/people')({
175175+ loader: async () => {
176176+ const response = await fetch('https://swapi.dev/api/people')
177177+ return response.json()
178178+ },
179179+ component: PeopleComponent,
180180+})
181181+182182+function PeopleComponent() {
183183+ const data = Route.useLoaderData()
184184+ return (
185185+ <ul>
186186+ {data.results.map((person) => (
187187+ <li key={person.name}>{person.name}</li>
188188+ ))}
189189+ </ul>
190190+ )
191191+}
192192+```
193193+194194+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
195195+196196+# Demo files
197197+198198+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
199199+200200+# Learn More
201201+202202+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
203203+204204+For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).