[Start] How to setup a base path for whole app (Client / API / Server Fns)

[aarjithn]

Hi,

I'd like to deploy multiple tanstack start applications into a single domain.

for example,

tanstack.com/router
tanstack.com/query
tanstack.com/table

where each of router / query / table are apps on its own having own api / server Fns and static assets.

How to achieve this? I think we have to use defineConfig inside app.config.ts, for eg the 'query' app to have

  routers: {
    server: {
      base: '/query/api'
    },
    client: {
      base: '/query'
    },
    public: {
      base: '/query/public'
    },
  }

but can't figure out what should be exact values here.

[aarjithn]

Found this in start source code

  const publicDir = opts.routers?.public?.dir || './public'

  const publicBase = opts.routers?.public?.base || '/'
  const clientBase = opts.routers?.client?.base || '/_build'
  const apiBase = opts.tsr?.apiBase || '/api'
  const serverBase = opts.routers?.server?.base || '/_server'

It looks at below config then? would be helpful to know how to configure these 4 options.. my attempt below

  routers: {
    server: {
      base: '/path/_server'
    },
    client: {
      base: '/path/_build'
    },
    public: {
      base: '/path'
    },
  },
  tsr: {
     apiBase: '/path/api'
   }

[aarjithn]

In router.tsx also need to pass base path for the client side router to work properly

export function createRouter() {
  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      basepath: '/path', // add this
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
    queryClient,
  )
}

However unable to update tsr apiBase as mentioned above. If changed from default, its returning an 500 error.

[aarjithn]

As per Sean Cassiere #3080 (comment)

Once you've changed the apiBase to /path/api, you need to change and update your API route files to match the new pathing.

So, these files need to have their locations changed as well. So in app/routes,

Old Location	New Location	Alternate Location
api/users.ts	path/api/users.ts	path.api/users.ts
api/users.$id.ts	path/api/users.$id.ts	path.api/users.$id.ts