fascinating-indigo

[Multitenant] Does TanStack Start support Multitenant? Rewrite URL without changing it?

Working on multi tenant app. I would like to my subdomains "<subdomain>.domain" to render view from "domain/s/<subdomain>". I was possible to do it in Next.js. Wondering if possible also on Tan Stack Start.

13 Replies

xenial-black•2mo ago

yes we have not documented this yet

xenial-black•2mo ago

have a look at the tests here: https://github.com/TanStack/router/blob/cc52bd792e50083d90b3552d9641d7058ea55942/packages/react-router/tests/router.test.tsx#L2144

GitHub

router/packages/react-router/tests/router.test.tsx at cc52bd792e500...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

fascinating-indigoOP•2mo ago

Does it require any Handlng on middleware or vite plugin?

xenial-black•2mo ago

it requires this rewrite config here: https://github.com/TanStack/router/blob/cc52bd792e50083d90b3552d9641d7058ea55942/packages/react-router/tests/router.test.tsx#L2164

GitHub

router/packages/react-router/tests/router.test.tsx at cc52bd792e500...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

fascinating-indigoOP•2mo ago

It is so smooth! Few lines of code! Much Much Much better than Next.js - I'm gonna stay with you guys now! Excellent!

xenial-black•2mo ago

please be aware that you should also handle the output case so links get generated correctly we also want to add helpers so that subdomains are much easier

fascinating-indigoOP•2mo ago

Coming from next.js, where I was declaring NON Route components in the folders - instead one folder. Just to make sure component are "feature" scoped.

oute file "/Users/franciszekstodulski/Dev/@others/wizytka/apps/client/src/routes/_components/hero-section.tsx" does not contain any route piece. This is likely a mistake.

oute file "/Users/franciszekstodulski/Dev/@others/wizytka/apps/client/src/routes/_components/hero-section.tsx" does not contain any route piece. This is likely a mistake.

is it possible to have them in the routes folder without declaring them as route component?

xenial-black•2mo ago

yes. just prefix the folder with - or choose another ignore prefix / ignore pattern

fascinating-indigoOP•2mo ago

Thank u!

frozen-sapphire•2mo ago

Hi Manuel - I am looking at the tests for input/output, and it looks like the output just reverses the logic that is done in the input I think I struggle to understand what you mean by "handle the output case so that links get generated correctly" I see the comments for

export type LocationRewrite = {
    /**
     * A function that will be called to rewrite the URL before it is interpreted by the router from the history instance.
     *
     * @default undefined
     */
    input?: LocationRewriteFunction;
    /**
     * A function that will be called to rewrite the URL before it is committed to the actual history instance from the router.
     *
     * @default undefined
     */
    output?: LocationRewriteFunction;
};

export type LocationRewrite = {
    /**
     * A function that will be called to rewrite the URL before it is interpreted by the router from the history instance.
     *
     * @default undefined
     */
    input?: LocationRewriteFunction;
    /**
     * A function that will be called to rewrite the URL before it is committed to the actual history instance from the router.
     *
     * @default undefined
     */
    output?: LocationRewriteFunction;
};

I totally understand this isnt documented yet, but I was wondering if you had a minute to explain what would happen if I didn't define the output? As in, what is an incorrectly generated link and where would i see that problem manifest? Really appreciate the insight! Thanks Maybe I understand? Correct me if wrong but adding the “output” ensures that the href generated in Link tags is converted back to having the tenant in the subdomain instead of the pathname. …at the gym and I think it clicked? lol EDIT: im back, yup, verified my assumption here's what i did, unless theres a better way

input: ({ url }) => {
                if (url.hostname.startsWith("app.localhost")) {
                    url.pathname = `/app${url.pathname}`
                    return url
                }

                return undefined
            },
            output: ({ url }) => {
                if (url.hostname.startsWith("app.localhost") && url.pathname.startsWith("/app/")) {
                    url.pathname = url.pathname.replace("/app/", "/")

                    return url
                }

                return undefined
            },

input: ({ url }) => {
                if (url.hostname.startsWith("app.localhost")) {
                    url.pathname = `/app${url.pathname}`
                    return url
                }

                return undefined
            },
            output: ({ url }) => {
                if (url.hostname.startsWith("app.localhost") && url.pathname.startsWith("/app/")) {
                    url.pathname = url.pathname.replace("/app/", "/")

                    return url
                }

                return undefined
            },

xenial-black•2mo ago

yes your understanding is correct

conscious-sapphire•2mo ago

Is there a way to do redirects in a similar way? Like instead of rewriting. Without needing to use Middleware? Also could you expose the headers here so we can decide whether to rewrite / redirect or not based on a header?

xenial-black•2mo ago

please open a new question and explain in detail what you want to do

Gaming

Programming

[Multitenant] Does TanStack Start support Multitenant? Rewrite URL without changing it?

Did you find this page helpful?