T
TanStack•3w ago
xenial-black

How can I route app.website.com and website.com differently in the same TanStack Start app?

I want to serve both website.com (for the public homepage) and app.website.com (for auth and dashboard) from the same codebase and deployment.
4 Replies
noble-gold
noble-gold•3w ago
you could have a layout route that checks, during beforeLoad, the base url, and redirects accordingly, or 404
xenial-black
xenial-blackOP•3w ago
Sorry, I'm a little bit confused. How would this work?
noble-gold
noble-gold•3w ago
_public/route.tsx 
export const Route = createFileRoute(...)({
  beforeLoad: () => {
    const baseUrl = somehowGetBaseUrl()
    if (baseUrl !== "https://website.com") throw notFound()
  }
})
export const Route = createFileRoute(...)({
  beforeLoad: () => {
    const baseUrl = somehowGetBaseUrl()
    if (baseUrl !== "https://website.com") throw notFound()
  }
})
_public/foo.tsx (only accessible via https://website.com/foo) ... _dashboard/route.tsx 
export const Route = createFileRoute(...)({
  beforeLoad: () => {
    const baseUrl = somehowGetBaseUrl()
    if (baseUrl !== "https://app.website.com") throw notFound()
  }
})
export const Route = createFileRoute(...)({
  beforeLoad: () => {
    const baseUrl = somehowGetBaseUrl()
    if (baseUrl !== "https://app.website.com") throw notFound()
  }
})
_dashboard/bar.tsx (only accessible via https://app.website.com/bar ... something like that
xenial-black
xenial-blackOP•3w ago
Okay, this makes sense. I'll try this. Thank you.

Did you find this page helpful?