Support separate asset base (CDN) vs app base in TanStack Start (Vite)

[Nandan1996]

Problem
We need the application to live at /app-base-path (e.g., https://www.example.com/app-base-path) while all built assets (JS/CSS) are served from a CDN like https://edge.example.com/asset-path. With TanStack Start today, Vite’s base config is used as a single source of truth (TSS_APP_BASE) for both routing and asset URLs, so we can’t configure a separate asset base without affecting the app base.

What we’ve tried

• Setting Vite base: '/app-base-path' + router basepath: '/app-base-path' → routes work, but assets resolve under /app-base-path on the origin.
• Using an absolute CDN base in Vite base makes the server/app base follow the CDN URL, which breaks routing/server paths.
• We didn’t find a built-in env or option to override only the asset URLs.

What we’re asking

• A supported way to keep the app/document base at /app-base-path while emitting SSR asset URLs that point to a different base (CDN), e.g. https://edge.example.com/asset-path. the idea is similar to what nextjs provides via assetPrefix config.

Possible approaches (examples)

• Env var only for SSR asset URLs:
  • TSS_ASSET_BASE=https://edge.example.com/asset-path
  • Falls back to app base if unset. Router base and server function paths remain derived from Vite base.
• Plugin option:

  // vite.config.ts
  import { defineConfig } from 'vite'
  import { tanstackStart } from '@tanstack/react-start/plugin/vite'
  
  export default defineConfig({
    base: '/app-base-path', // app/document base
    plugins: [
      tanstackStart({
        client: {
          assetsBase: 'https://edge.example.com/asset-path', // CDN asset base
        },
      }),
    ],
  })

Why this helps

• Lets teams use a CDN origin for assets without changing the document/app base or rewriting HTML at the edge.
• Keeps router behavior predictable while enabling flexible asset hosting strategies.

Is there an undocumented way to do this today? If not, would you consider adding support for a split asset base?

[Nandan1996]

Hey @tannerlinsley @schiller-manuel ,
do we have a workaround or anything. we just created a brand new application and really need your opinion on this.
Thank you.

[karl-run]

This is pretty much a hard-blocker for our organization to start using Tanstack Start as well. 😅

[schiller-manuel]

this should work now by setting vite's base config to the CDN url

[Nandan1996]

Yes it seems we have options to control it now since in RC version tanstack is now not dependent on nitro so we can control it from outside or simply by adding own custom server.

But I think this could be more polished if tanstack comes with default node server based output or if it can be documented how to do it.
as of now if set base path in vite, the dev server starts on that base path. also basepath in createRouter option doesn't work and only work if provided via tanstack start plugin.

[schiller-manuel]

there is no real way around this. vite produces output that relies on base.

and yes, we need to document this.

[Cruel]

NOTE: this is just an imperfect workaround.

Using nitro, I'm doing this:

// nitro.config.js
export default defineNitroConfig({
  runtimeConfig: {
    app: {
      baseURL: '/',
    },
  },
});


// vite.config.ts
export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    base: isProduction ? process.env.VITE_ASSET_URL_PREFIX : '/',
    // rest of config
  }
}

You obviously don't need the env var, it's just how I'm doing it.
It does not work perfectly, but it'll handle basic usage.
I had to use other workarounds, especially for plugins like VitePWA.

My workflow uploads everything from .output/public/assets to S3 endpoint. But stuff like favicon & robots.txt is still served from public dir via nitro.

[omridevk]

@schiller-manuel
My cdn url is not known at build time, it is coming as env variable, doesn't seem to be a way to tell the manifestPlugin to prefix all the imports with a provided url, it only looks at the viteAppBase, which I cannot change, as it is not known at build time

[schiller-manuel]

can you share more about your setup? which CDN is this? how do you get the env var to the client? etc ..

[omridevk]

https://discord.com/channels/719702312431386674/1429094183515455528
Sharing here as well

[omridevk]

#5545