Tanstack start: basepath with vite

[lwhiteley]

Does anyone know if its possible or have a simple way to do basepath in vite in an isomorphic way for both dev and production mode.

i did this in dev mode but when the application is built and previewed for production, the assets are not put in a folder matching the prefix specified.

The app is logically looking for the files at the specified prefix however the files are not physically at the location after build.

Use case: Deploying an application at a subpath of a domain

As a base case comparision, this can be done by changing two properties in vite when setting up react-router; changing vite base property and react router config basename property.

What ive tried with the tanstack vite config so far:

const config = defineConfig(({ mode }) => ({
  base: mode === 'development' ? '/app/' : '/',
  build: {
    assetsDir: 'app/assets',
  },
  dev: {},
  server: {},
  plugins: [
    devtools(),
    nitro(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      prerender: {},
      start: { entry: '/app/' },
      serverFns: {
        base: '/_api',
      },
      router: {
        basepath: '/app/',
        // entry: '/app/', // doesnt work in prod
      },
      client: {
        base: '/app/',
        entry: '/app/_client',
      },
      server: {
        entry: '/app/_server',
      },
      vite: {},
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
}))

I even tried updating the vite assets output directory like above but the app then starts to look for the files with a double prefix

/app/app/*

whats not happening:

• the api routes also still dont get prefixed
• assets are not outputted to a physical location matching the logical references of the built app

Can anyone give any advice?

---

update:

Not ideal but if i remove the base: '/app/', from the top level vite config in prod only then it mostly works in prod but the api routes still are not prefixed.

so neither option wrk well

How do i get the server routes to be prefixed?

creating a physical app folder in the routes directory doesnt work.

---

base path related issues:

• Prerender fails when using custom base path - attempts to fetch / instead of configured base path #6023
• Router with basepath responds to all history events, breaking MFE architectures #6064
• fix: scope router to basepath for MFE support #6063

[lwhiteley]

after a lot of reading and wasnt obvious at all..

but I ended up with the realization that tanstack is using nitro
and nitro exposes a baseUrl

so i ended up adjusting the nitro config too.

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'
import svgr from 'vite-plugin-svgr'

const config = defineConfig(() => ({
  base: '/app/',
  build: {
    assetsDir: 'app/assets',
  },
  plugins: [
    devtools(),
    nitro({
      baseURL: '/app/',
    }),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart({
      router: {
        basepath: '/app/',
      },
    }),
    viteReact({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
    svgr(),
  ],
}))