[start] Incomplete basepath handling

[jakst]

Note

The solution was to also set the base property in the vite config. I'll leave the issue open until this is documented.

Which project does this relate to?

Start

Describe the bug

When setting a basepath, every single resource needs to be prefixed with that basepath, or the app will break when put behind a proxy that only routes requests to that basepath to the app.

We have a very prod-like setup for local dev, so we need basepath handling to work fully for the dev server, or it breaks, since we only route requests to /app over to our dashboard application.

Here are my findings of things that break so far when setting basepath to /app:

• Without creating a client entry point, /~start/default-client-entry is requested
• If I create a client entry point, all the imports from client.tsx are requested without the basepath.
  • /@vite/client
  • /node_modules/.vite/deps/solid-js_web.js?v=e4a53580
  • /@fs/Users/jakst/project/node_modules/.pnpm/@tanstack+solid-start@1.130.15_solid-js@1.9.7_vite-plugin-solid@2.11.8_solid-js@1.9.7_v_2de64603fd083e50c9f52c16fb1b9292/node_modules/@tanstack/solid-start/dist/esm/client.js?v=e4a53580
  • /src/router.tsx

Another thing that is a bit weird with basepath handling is that if I create routes/api.hello.tsx as a serverFileRoute, it does not get the basepath applied. So all serverFileRoutes have to be put in a folder with the basepath name, while the regular page routes have the basepath applied automatically.

Your Example Website or App

https://codesandbox.io/p/devbox/jovial-dawn-63xwyj

Steps to Reproduce the Bug or Issue

I couldn't get the codesandbox working, but it's fairly straight forward:

1. Create a new tanstack start project
2. Add basepath: '/app' to the options in router.tsx
3. Open the app in your browser and notice that /~start/default-client-entry is requested without the basepath
4. Add a default client entry point
5. Restart the dev server
6. Go to the app in your browser again
7. Notice that the browser requests a bunch of files that are not prefixed with /app

Expected behavior

I expect all files requested from the dev server to be prefixed with /app.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.130.15
• OS: MacOS
• Browser: Chrome
• Browser Version: 138
• Bundler: vite
• Bundler Version: 7.0.6

Additional context

No response

[SeanCassiere]

You may want to set the base in your vite config as well.

router/e2e/react-start/custom-basepath/vite.config.ts

Lines 5 to 11 in 0a3bb24

	export default defineConfig({
	base: '/custom/basepath',
	server: {
	port: 3000,
	},
	plugins: [
	tsConfigPaths({

[jakst]

You may want to set the base in your vite config as well.

router/e2e/react-start/custom-basepath/vite.config.ts

Lines 5 to 11 in 0a3bb24

export default defineConfig({
base: '/custom/basepath',
server: {
port: 3000,
},
plugins: [
tsConfigPaths({

Of course... 🤦‍♂️

So consider this a request to document that it needs to change in both places instead 😅 I didn't find anything about basepath handling in the documentation.

[jakst]

And thanks a lot!

[jiji-hoon96]

Would it be okay to proceed with the documentation process?

[schiller-manuel]

we need to think about the basepath handling some more, there are scenarios (Dev vs prod) that are not handled correctly. until then, we leave this open. no need to document the current state really as we need to fix a few things

[kompot]

I was thinking about using basepath for localization handling and as getRouter is a function my thoughts were that it might be possible to set it dynamically in getRouter into:

• context
• basepath

While still be able to break-out of basepath in server.ts like this

import handler from "@tanstack/react-start/server-entry";

export default {
  fetch(request: Request) {
    if (request.url.endsWith("/robots.txt")) {
      return new Response("User-agent: *\nAllow: /\n\n", {
        headers: { "Content-Type": "text/plain" },
      });
    }
    return handler.fetch(request);
  },
};

So this way I could get best of both worlds:

• dynamically set basepath based on request and have my linking system have zero knowledge about current locale because every link has it
• still have ability to breakout for service routes

The problem is that without this scheme I need to have locale at all times available within some deep component to pass it to linkOptions/Link.