Multi Tenancy in Remix

All you need is a little express...

So I’ve been tearing my hair out the past week because I’m building a project using Remix in my free time, and it doesn’t support multi-tenancy.

So what exactly is multi-tenancy?

It’s the ability to serve multiple domains from a single app.

Essentially my app is a website builder. So the builder is on my domain. Clients will sign up and point their own domain to the app. I will also host their pages on theirname.myapp.com.

The problem with this is, I need a marketing page on myapp.com. Then i need completely different code if the domain is clientsite.com.

In remix you can check the HTTP host header and render different things, but this is not ideal. If my app has `routes/about.tsx` I want the client to be able to have their own `about` page.

I don’t want to check the host header in my routes and then make a mess of the code.

Not only that, but you will end up bloating your JS bundle with internal app code vs client page code.

How to do it

Let’s just jump right into how I made this happen in …