fascinating-indigo

Start app with a dynamic base path

Hi everyone! I've been stuck on this issue for a while and could really use some guidance. I'm trying to build my app with a Node target and make the same build work seamlessly with any base URL. The base URL is defined by an environment variable (BASE_URL). Here are some examples of what I'm aiming for: - If BASE_URL=/toto/, the app should run at example.com/toto. - If BASE_URL=/foo/bar/, the app should run at example.com/foo/bar. - If BASE_URL is unset, the app should run at example.com. I've tested this on the latest versions from the main branches as well as the alpha branch with Devinxi, but I keep running into the same issues. Here’s what I’ve tried so far: - Setting NITRO_APP_BASE_URL, but it crashes the router. - Using environment variables in app.config.ts (and vite.config.ts for the alpha branch), but it only work at build-time, not at runtime Is there a best practice or a recommended approach I’m missing? Any help would be greatly appreciated!

9 Replies

genetic-orange•4mo ago

You can probably use the route config for nitro to rewrite the baseURL so the app ignores it or you can set it https://nitro.build/config#routing

Config - Nitro

fascinating-indigoOP•4mo ago

Thanks for your reply, it didn't occurred to me that I could change nitro configuration except from the NITRO_APP_BASE_URL Using it with redirects might be the solution, I'll try that tomorrow, and let you know

genetic-orange•4mo ago

ok no worries & I've used those a ton for tweaking stuff with server side routing (specifically for static assets)

fascinating-indigoOP•4mo ago

Hi! I did a few attempts today and I noted a few things about the situation, I had a lot of issues with vinxi so I switched to the alpha branch (version 1.120.4-alpha.15) - Since tanstack router is based on the current route, if the app listens on /foo, the basepath value in the router.tsx should be /foo. So the route config of nitro does not seem to be the solution since rewriting the path will break the router. - Setting the nitro base url, api url and basepath in the router.tsx don't work either because the client will still try to fetch server functions and assets on "/" without taking the basepath in consideration (even if it is static). - Adding the route in vite.config.ts like the following make most things work but calling server functions will fail with a this error: Minified React error #321; visit https://react.dev/errors/321. From the react doc it seems to be due to a misplace hook after the build but I don't really know where it comes from. Not sure if it is a bug in tanstack start or just a misconfiguration, without the path config, everything is fine. vite.config.ts:

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      public: {
        base: '/local_my_tea_collection/ingress'
      },
      client: {
        base: '/local_my_tea_collection/ingress'
      },
      serverFns: {
        base: '/local_my_tea_collection/ingress/api'
      },
    }),
  ],
})

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tanstackStart({
      public: {
        base: '/local_my_tea_collection/ingress'
      },
      client: {
        base: '/local_my_tea_collection/ingress'
      },
      serverFns: {
        base: '/local_my_tea_collection/ingress/api'
      },
    }),
  ],
})

I created a blank repo from the starter to track my attempts: https://github.com/Anthony-Jhoiro/reproductible-tanstack-start-base-dynamic-base-dir-issue-devinxi Do you have any idea what I can try next ?

genetic-orange•4mo ago

I think that repo is private, can you share that

fascinating-indigoOP•4mo ago

yes my bad,it is public now

genetic-orange•4mo ago

oh wait is this devinxi I haven't played with that yet... so I don't know whats changed cause in current version app.config.ts was used to do the configs, so not sure if thats an issue. Did you use an example / boilterplate to get started? I can look into it later tonight

fascinating-indigoOP•4mo ago

Yes it is, I couldn't do it either with the current version on main, when changing paths in the app.config.ts some files were missing in the .output directory after the build, and adding them manually didn't résolve the issues :/ The repo is based on the start-basic example of the devinxi branch, I made the first commit just after I cloned it so you can see what changed

genetic-orange•4mo ago

I'd recommend using whats stable atm unless someone else can chime in here... I know a lots in flight on devinxi atm

Gaming

Programming

Start app with a dynamic base path

Did you find this page helpful?