[Feature]: Multi tenancy app

[levinhtin]

What is the new or updated feature that you are suggesting?

How to config Multi tenancy app on Remix?

Why should this feature be included?

Multi tenancy app

[MichaelDeBoey]

This would be a good example I think

CC/ @kentcdodds

[ccssmnn]

I would love to see an example on how to do this with remix 🥰

[bradgreens]

I imagine it will be similar to examples with Next Js. e.g. https://vercel.com/guides/nextjs-multi-tenant-application. However I am interested in seeing how Remix might consume subdomain properties as well and how one might branch the render tree at the highest level possible to publish for different tenants. Forgive me in that I am setting up a test project this week to get my feet wet with Remix. I will post back my learnings as I get farther and find useful examples.

[shawnSchneider2759]

yes! this would be a great feature!

[styxlab]

A friend of mine came up with a clever solution that works for me: You can simply extract the host information in your loader and return different data based on it:

export const loader: LoaderFunction = async ({ request }) => {
   const host = request.header.get('host')
   if (!host) throw new Error('Missing host')

   return json(await getAPIData(host))
}

No need for middleware, rewrites or complicated route structures :-)

[kiliman]

Remix does not support URL rewrites, since Remix uses react-router and routes must match the URL you see in the browser.

Is there a reason you need the route to have the $subdomain param, since you can always get that from the host header?

[sergiodxa]

I would read it from the URL too, you could create a function to read it

function getTenant(request: Request) {
  let { hostname } = new URL(request.url)
  let [tenant, domain, tld] = hostname.split(".")
  // if tld is undefined it means there was not subdomain
  // so we can redirect to another url and set a default tenant
  // or even redirect to a route where the tenant is not required
  // like a landing or login form
  if (!tld) throw redirect("default.example.app/login")
  return tenant
}

Then in any loader or action call it

export let loader: LoaderFunction = async ({ request }) => {
  let tenant = await getTenant(request)
  // use the tenant here to get the data
}

[reacts99]

A better wait to do these so the data gets pass to every loader as a context is trough the createRequesHandler that can be use in Remix as a form of middleware. More fo these in the Remix docs. An example will be like.

const {
  createRequestHandler,
} = require("@remix-run/express");
const express = require("express");

const app = express();

// needs to handle all verbs (GET, POST, etc.)
app.all(
  "*",
  createRequestHandler({
    // `remix build` and `remix dev` output files to a build directory, you need
    // to pass that build to the request handler
    build: require("./build"),

    // return anything you want here to be available as `context` in your
    // loaders and actions. This is where you can bridge the gap between Remix
    // and your server
    getLoadContext(req, res) {
     const tenant = req.hostname.split(".")[0] //subdomain or tenant 
      return {tenant};
    },
  })
);

And you can access that context in every loader and action in the remix app like these:

export async function loader({
  context,
}: LoaderFunctionArgs) {
  const { tenant } = context;
  // ...Other logic
}

[dimitrisnl]

@reacts99 thank you for this, it's very very useful

[kii-dot]

@reacts99 I tried what you did, it worked on dev. However when I built it and run

npx remix-serve ./build/server/index.js

The context from the server does not seem to propagate and i'm left with an undefined for tenant.

[koderyoda]

@kiliman @sergioxda appreciate your responses. I have edited my comment to remove the $ in front of /subdomain, you are right, I can always get that from the header.

But what I want is that when a request is made from a subdomain, I serve my routes from a directory called "subdomain" Instead of /routes/ which I would like to keep for the root domain only. Examples:
somesubdomain.example.com/home should map to /routes/subdomain/home.tsx
somesubdomain.example.com/whatever/page should map to /routes/subdomain/whatever/page.tsx

Hope this clarifies.

[zackify]

yeah i have this same problem. seems like something remix could support so easy if we could just control where we are grabbing routes from based on host header.

as you say, if host != mainAppDomain -> prefix all routes to routes/subdomain/

[zackify]

Okay, so i found out how to do this. it takes two changes.

One is internal to the framework. Would love love love if @mjackson or @ryanflorence could add a small prop to so it can be done without a patch package.

Here's all you gotta do:

at the top of handleRequest in entry.server.tsx

if (request.headers.get("host") !== process.env.APP_HOST) {
    let url = new URL(request.url);
    url.pathname = `/landing-page${url.pathname}`;
    request = new Request(url, request);
  }

now all paths look inside the landing-page folder. replace that with whatever folder you want.

Now, you have to go edit browser.js inside node_modules/@remix-run/react/dist/esm/browser.js

Change

  let [state, dispatch] = React.useReducer((_, update) => update, {
    action: history.action,
    location: history.location
  });

to

  let [state, dispatch] = React.useReducer((_, update) => update, {
    action: history.action,
    location: {...history.location, pathname: '/landing-page' + history.location.pathname}
  });

Now, when you start your app, if i run it on localhost, my normal routes/index.tsx will load.

If I navigate to it using a host like test.com:3000, it loads the index.tsx from the landing-page folder and mounts correctly on the client!

the second part needs to check if the host matches the domain or else it will break the normal behavior.

[Jarrodsz]

So basically this changes the entry point of the application to end in a route that is in a specific subfolder.
Or you could point it to a global index.tsx and read the subdomain/ subURL from there and use it get data from prisma based on this value.

[zackify]

Yeah, all I want is a way to specify a different routes path in the file system.

If we had that control in the entry points. This would be easy to base off the host header or anything else.

I can't just use a loader to read the host header, as I already have routes for my main app that conflict. And I don't want to bloat the bundle by having that code loaded on the client sites.

[zackify]

I was able to make this new approach work almost completely. I would really love if I could get someone maintaining the project to chime in here, as it seems like a REALLY small couple changes need to be made to support this.

I really dont want multiple apps and have to deal with sharing components between them, especially when this is so close.

The only problem in my code below, is routes will 404 before getting to handleRequest. so it doesnt work if your nested folder has a path that isnt also in the root.

So this works perfectly if you want different content on the root route for subdomains, and you dont want to return your apps extra component data in the bundle.

In entry.server.tsx added a new function:

const differentRouteFolderForClients = (
  path: string,
  remixContext: EntryContext,
  request: Request
) => {
  let url = new URL(request.url);
  url.pathname = `/${path}` + url.pathname;

  Object.keys(remixContext.manifest.routes).forEach((route) => {
    if (route.match(`/${path}`)) {
      remixContext.manifest.routes[route.replace(`/${path}`, "")] =
        remixContext.manifest.routes[route];
    }
  });

  Object.keys(remixContext.routeModules).forEach((route) => {
    if (route.match(`/${path}`)) {
      remixContext.routeModules[route.replace(`/${path}`, "")] =
        remixContext.routeModules[route];
    }
  });

  return new Request(url, request);
};

this will take a path, ex routes/subdomains and start serving it at the root.

Now, add this at the top of handleRequest:

 if (request.headers.get("host") !== process.env.APP_HOST) {
    request = differentRouteFolderForClients(
      "landing-page",
      remixContext,
      request
    );
  }

replace "landing-page" with the route folder you want to be the root when a host is not matching your main app host.

Now for entry.client:

 <RemixBrowser
          pathPrefix={
            window.APP_HOST !== window.location.host
              ? "/landing-page"
              : undefined
          }
        />

I am injecting the app host value to the frontend, and then if its not my apps own domain, (its a client) then pass this path here as well.

This requires a code change in browser.js like above:

    location: pathPrefix ? {...history.location, pathname: pathPrefix + history.location.pathname} : history.location

It would be awesome to just have the ability in handleRequest to say "use routes/blah" as the root and configure that. then we just need a prop on the to enable this without needing to manually edit it.

With some small tweaks remix can offer multi tenancy :)

[zackify]

Alright, this is possible in remix. You just need to use the express adapter, and make two production builds.

Here's how you need to setup your server.js:

let express = require("express");
const remix = require("@remix-run/express");

const app = express();

const isClientSite = (req) => {
  if (
    req.headers["host"] !== "localhost:3000" // your app domain here
  )
    return true;

  return false;
};

app.use(express.static("public"));

app.use("/build", (req, res, next) => {
  if (isClientSite(req)) {
    express.static("public/build")(req, res, next);
  } else {
    express.static("public/build-main")(req, res, next);
  }
});

app.all("*", (req, res, next) => {
  if (isClientSite(req)) {
    return remix.createRequestHandler({ build: require("./build") })(
      req,
      res,
      next
    );
  }
  return remix.createRequestHandler({ build: require("./build-main") })(
    req,
    res,
    next
  );
});

app.listen(process.env.PORT || 3000, () => console.log("server started!"));

Then you will need to make two builds:

remix build && 
mv build build-main && 
mv public/build public/build-main && 
rm -rf app/routes/__app && 
mv app/routes/clients app/routes/__clients && 
remix build

You need your app routes all inside /routes/__app and then all your client app routes can go into /routes/clients

I wrote more about it in a quick blog post: https://www.zerotofullstack.io/p/multi-tenancy-in-remix

[mfissehaye]

@zackify does this work for development process, is there a way to test this while developing?

[zackify]

Yes of course. Easiest option is to set another record in /etc/hosts. That way you can have localhost:3000 and tenant:3000 go to the app. You just check if the host matches “tenant” for the other part and then serve that bundle. There’s many different options. If you want to live develop, you could add a flag to serve your tenant app on the normal host and vice versa.

[kenn]

FWIW, I've been using dnsmasq with .test domains to separate cookies / saved passwords per each domain.

With the following setup, any .test domains such as first.test or second.test will directed to localhost.

brew install dnsmasq
mkdir -p $(brew --prefix)/etc/
echo 'address=/.test/127.0.0.1' > $(brew --prefix)/etc/dnsmasq.conf
sudo cp $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons
sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
sudo mkdir /etc/resolver
sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/test'

[chuckstock]

@zackify looks like this website is down https://www.zerotofullstack.io/p/multi-tenancy-in-remix. Would love to check out your final implementation as this is something we're looking to implement right now. Or if you have a demo repo that would be great too!

[zackify]

https://zach.codes/p/multi-tenancy-in-remix

Sorry I should have made the site redirect

[Jarrodsz]

Is there an easy and elegant way to do this:

Point user.remix.com/settings to app/user/sertings.tsx

point admin.remix.com to app/admin/settings.tsx?

i do not want 1 single settings.tsx and do conditional logic on subdomain param. I want to link / route them to seperate route files.

In rails you can do:

constraints subdomain: 'app' do
    get '/games/:id', to: 'games#show'
    get '/games/list', to: 'games#list'
    post '/games/start', to: 'games#start'
  end

and

constraints subdomain: 'admin' do
    get '/games/:id', to: 'admin/games#show'
    get '/games/list', to: 'admin/games#list'
    post '/games/start', to: 'admin/games#start'
  end

You can namespace the controllers ( remix route files) anyway you like.

And you get routes with a link to route url admin.remix.com/games/ and app.remix.com/games.

just easy and elegantly. This is a really big roadblock i hooe there is an elegant solution for this.

having 1 settings.tsx route filled with conditin logic based on subdomain is not cutting it for me since then you have to go all the wat back to parent routes ( say different layouts per entity ) its just so not elegant and bloating the routes file.

hope my usecas lllustrates it in clear what i like to achieve.

[zackify]

If you look at my reply above yours, I explain how to do exactly this.

It’s not as elegant as I would hope. But it works.

[Jarrodsz]

Yes but i have multille roles like 5 which require 5 builds.perhaps if not a rfc should be made to integrate this more elegantly.

another workaround i thougnt about not using subdomains but remove the /user /admin part from the url somehow. Ugh fruatrating this is just not possible easily like in rails i have done for years. Perhaps the @kiliman speach on multi tennancy at remix conf will give some new insights.

Do appreciate you workaround though!
perhaps the new react router will support this near future.

[zackify]

That is true, very annoying. Maybe there’s some way you can make your subdomain ones more generic for now until there is official support.

[kiliman]

Hi, I wish I could provide better answers to this problem. The main issue is that React Router doesn't support URL rewrites. The routing structure is explicitly tied to the URL in the address bar. Also the routing config is statically defined during app initialization, so there's no way to swap out different routes at runtime.

Probably the closest you can get is to have 2 separate Remix apps that share code and common routes. You'd probably have to juggle some kind of build setup to pull this off. Then in your server entry (Express, etc.) you'd pick the correct Remix request handler based on the host or other tenant criteria.

As for my Remix Conf Workshop, my discussion is centered more on how to manage tenant data on the backend with Prisma, and not so much on tenant routing. If I have some time, I may try to explore some options there.

[Jarrodsz]

Hi, I wish I could provide better answers to this problem. The main issue is that React Router doesn't support URL rewrites. The routing structure is explicitly tied to the URL in the address bar. Also the routing config is statically defined during app initialization, so there's no way to swap out different routes at runtime.

Probably the closest you can get is to have 2 separate Remix apps that share code and common routes. You'd probably have to juggle some kind of build setup to pull this off. Then in your server entry (Express, etc.) you'd pick the correct Remix request handler based on the host or other tenant criteria.

As for my Remix Conf Workshop, my discussion is centered more on how to manage tenant data on the backend with Prisma, and not so much on tenant routing. If I have some time, I may try to explore some options there.

Makes a lot of eense if its fundamentally not possible without tech savy wkrkaround i have to let it go for now. Maybe in my next remix dev chapter. Monorepo probably then.

[KevinMind]

Honestly just use an nginx server pointing to multiple remix servers. I don't understand why any of this has to happen in remix?

• repo
  -- remix-one
  ----app
  ---- ... All of app one
  -- remix-two
  ----app
  ---- ... All of app two

? What's the down side of this approach ?

[zackify]

Sharing code is more of a pain. And now you must run nginx instead of the built in remix adapters directly.

Now you have multiple instances to setup and deploy to.

For my app, it is a website builder. Having all the builder code and theme logic in one repo, right where the frontend of the website lives as well is a huge time saver and simplifies the codebase. Which is why I got this to work in remix in a higher up comment.

[ragbadaskar]

@zackify Thanks for laying down an approach. Possible for you to share a demo repo? I tried your approach but couldn't get it to work.

[Code-Victor]

@zackify please a sample repo would really be helpful

[dimitrisnl]

Unsure if it has been asked, but what if I want to have a universal login/signup page, but everything else to be under a subdomain? Can I redirect/rewrite the URL after the login/signup?

[mrksbnch]

Yes, taking e.g. the common Authorization Code Flow as an example, you can redirect the user to any page after they logged in. With the Authorization Code Flow, you would get a code in a URL parameter that you can then exchange with an access and optionally a refresh token (on the page that you redirect the user to which should be done in the loader function because you'd need a client secret for this exchange (unless you use PKCE which doesn't make much sense if you're not building a client-only SPA)).

The same works with other kinds of authorization grants as well, such as the Implicit Grant which has various security flaws and should should be avoided if possible.

[Jarrodsz]

Would like to know advanchements too
Posted on this 2 years ago 😂

[deflexable]

it 2024 and still no stress-free solution to this 🙁