<% if (blank) { -%>
# <%= projectName %>
A minimal TanStack Start app with one route and <%= tailwind ? 'Tailwind CSS' : 'plain CSS' %>.
```bash
<%= packageManager %> install
<%= getPackageManagerRunScript('dev') %>
```
Edit `src/routes/index.tsx` to get started. Add route files under
`src/routes`; TanStack Router updates `src/routeTree.gen.ts` for you.
Build the production app with:
```bash
<%= getPackageManagerRunScript('build') %>
```
<% for(const addon of addOns.filter(addon => addon.readme)) { %>
<%- addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme %>
<% } %>
<% } else { -%>
Welcome to your new TanStack Start app!
# Getting Started
To run this application:
```bash
<%= packageManager %> install
<%= getPackageManagerRunScript('dev') %>
```
# Building For Production
To build this application for production:
```bash
<%= getPackageManagerRunScript('build') %>
```
## Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
### Removing Tailwind CSS
If you prefer not to use Tailwind CSS:
1. Remove the demo pages in `src/routes/demo/`
2. Replace the Tailwind import in `src/styles.css` with your own styles
3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
4. Remove `@tailwindcss/vite` and `tailwindcss` from `package.json`
<% for(const addon of addOns.filter(addon => addon.readme)) { %>
<%- addon.readmeIsEjs ? renderTemplate(addon.readme) : addon.readme %>
<% } %>
## Routing
This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
### Adding A Route
To add a new route to your application just add a new file in the `./src/routes` directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.
```tsx
import { Link } from "@tanstack/solid-router";
```
Then anywhere in your JSX you can use it like so:
```tsx
About
```
This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
### Using A Layout
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.
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
## Server Functions
TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
```tsx
import { createServerFn } from '@tanstack/solid-start'
const getServerTime = createServerFn({
method: 'GET',
}).handler(async () => {
return new Date().toISOString()
})
```
## Data Fetching
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.
For example:
```tsx
import { createFileRoute } from '@tanstack/solid-router'
export const Route = createFileRoute('/people')({
loader: async () => {
const response = await fetch('https://swapi.dev/api/people')
return response.json()
},
component: PeopleComponent,
})
function PeopleComponent() {
const data = Route.useLoaderData()
return (
{(person) =>
{person.name}
}
)
}
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
<% if (includeExamples) { %>
# Demo files
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.
<% } %>
<% if (addOnEnabled.biome || addOnEnabled.eslint) { %>
## Linting & Formatting
<% if (addOnEnabled.biome) { %>
This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
<% } %>
<% if (addOnEnabled.eslint) { %>
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:
<% } %>
```bash
<%= getPackageManagerRunScript('lint') %>
<%= getPackageManagerRunScript('format') %>
<%= getPackageManagerRunScript('check') %>
```
<% } %>
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).
<% } -%>