-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
docs(start): document route and asset base paths #7882
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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. | ||
|
|
||
| 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). | ||
| 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
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 🤖 Prompt for AI Agents |
||
| --- | ||
There was a problem hiding this comment.
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.basebefore using it in the URL table.The table introduces
serverFns.baseas part of the server-function URL, but neither example defines it nor explains its default or composition withrouter.basepath. Add the relevant configuration or document the default and composition explicitly.🤖 Prompt for AI Agents