Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/start/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@
"label": "Routing",
"to": "framework/react/guide/routing"
},
{
"label": "Base Paths",
"to": "framework/react/guide/base-paths"
},
{
"label": "Execution Model",
"to": "framework/react/guide/execution-model"
Expand Down Expand Up @@ -131,6 +135,10 @@
"label": "Routing",
"to": "framework/solid/guide/routing"
},
{
"label": "Base Paths",
"to": "framework/solid/guide/base-paths"
},
{
"label": "Execution Model",
"to": "framework/solid/guide/execution-model"
Expand Down
89 changes: 89 additions & 0 deletions docs/start/framework/react/guide/base-paths.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
---
id: base-paths
title: Base Paths
---

# Base Paths

Use base paths when your application or its assets are served below the origin root. TanStack Start has two separate settings:

- Vite's `base` controls the public URL prefix for assets, such as JavaScript and CSS.
- Start's `router.basepath` controls the URL prefix for application routes and server functions.

Configure these settings in `vite.config.ts`. Do not rely on the router instance in `src/router.tsx` to configure a Start base path.

## Serve the Application and Assets from the Same Path

For example, to serve the application and its assets from `/app/`, set both options to the same path:

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
base: '/app/',
plugins: [
tanstackStart({
router: {
basepath: '/app',
},
}),
viteReact(),
],
})
```

This configuration produces URLs with the following responsibilities:

| URL | Prefix source |
| -------------------- | -------------------------------------- |
| `/app/about` | `router.basepath` |
| `/app/_serverFn/...` | `router.basepath` and `serverFns.base` |
| `/app/assets/...` | Vite `base` |

If you omit `router.basepath`, Start derives it from a path-based Vite `base`. Setting both explicitly can make the deployment contract easier to see.
Comment on lines +38 to +46

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Define serverFns.base before using it in the URL table.

The table introduces serverFns.base as part of the server-function URL, but neither example defines it nor explains its default or composition with router.basepath. Add the relevant configuration or document the default and composition explicitly.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/start/framework/react/guide/base-paths.md` around lines 38 - 46, Update
the base-paths documentation around the URL table to define serverFns.base in
the preceding configuration example, or explicitly document its default value
and how it combines with router.basepath for server-function URLs. Ensure the
table’s server-function prefix source is understandable from the surrounding
text.


Your development server handles this configuration automatically. In production, configure your server or reverse proxy to forward `/app/*` to the Start application and serve the client assets at the same prefix.

## Use Different Paths for Routes and Assets

You can keep application routes at the origin root while serving assets from another path. Set Vite's `base` to the asset prefix and set `router.basepath` explicitly to `/`:

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'

export default defineConfig({
base: '/_ui/',
plugins: [
tanstackStart({
router: {
basepath: '/',
},
}),
viteReact(),
],
})
```

This configuration produces application routes such as `/` and `/about`, while JavaScript and CSS URLs begin with `/_ui/`.

In production, make both URL spaces available:

- Forward application routes such as `/about` to the Start server.
- Serve or forward asset requests under `/_ui/`.

## Verify the Configuration

Check both direct requests and client-side navigation:

1. Open the application at its configured route base.
2. Navigate with a `Link` and confirm that the route URL contains `router.basepath`, not Vite's `base`.
3. Inspect script and stylesheet URLs and confirm that they contain Vite's `base`.
4. Load a nested route directly to verify that the production server forwards it correctly.

For runtime asset rewriting with a Content Delivery Network (CDN), see [CDN Asset URLs](./cdn-asset-urls).
3 changes: 3 additions & 0 deletions docs/start/framework/solid/guide/base-paths.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
---
ref: docs/start/framework/react/guide/base-paths.md
Comment on lines +1 to +2

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

Make the Solid guide framework-specific before exposing it.

This reference serves the React guide verbatim, including @tanstack/react-start/plugin/vite, @vitejs/plugin-react, and viteReact(). Solid users cannot safely copy that configuration. Keep the shared explanation framework-neutral or add Solid-specific examples.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/start/framework/solid/guide/base-paths.md` around lines 1 - 2, Update
the Solid base-paths guide referenced by its frontmatter so it no longer serves
the React guide verbatim. Make the shared explanation framework-neutral and
replace React-specific configuration such as `@tanstack/react-start/plugin/vite`,
`@vitejs/plugin-react`, and viteReact() with valid Solid-specific examples.

---