How to rewrite express url when request comes from user's custom domain?

[jansedlon]

Heey 👋 Just found an interesting use case and I think it's kind of framework limitation.

Use case

I want to allow my users to use custom domains. Basically if they own a domain, let's say theuniguefit.com, they will set up an A record that points to my Caddy reverse proxy. What do I want to achieve? Stores that my users create are accessible under moje.flixy.cz/{username}. If someone opens up theuniguefit.com, i want the app to behave exactly the same as if the url would be moje.flixy.cz/theuniguefit. This goes for nested urls as well, so moje.flixy.cz/{username}/p/{productName}, etc

What have I tried?

I tried to create an Express middleware. The code is just a really simplified example but shows the general idea.

app.use((req, res, next) => {
  const host = getHost(req);

  if (host === "theuniguefit.com" && !req.url.startsWith("/api")) {
    req.originalUrl = `/theuniguefit${req.url}`;
  }

  next();
});

So theuniguefit's customer see theuniguefit.com in the URL but it should behave as if it would be theuniguefit.com/theuniguefit

What's the issue?

Remix checks if the hydrated pathname matches the client's pathname. If not, it reloads the app.

I end up with infinite reload, because the url will never match.

Is there a doable approach to this? I love remix by heart but I feel like I have reached a use case that's not supported. Or it's a skill issue 🥴

We currently have 1000 users and if we can't implement this in Remix, we're kinda fu**** 😅

[kiliman]

Remix doesn't support URL rewriting because React Router expects the URL in the browser to match the route configuration. However, you can use the Optional Segments feature to allow us to map the hostname to the username.

Here's an example I created. https://github.com/kiliman/remix-custom-domain

[jansedlon]

@kiliman This looks so good! I really appreciate your example! I completely forgot there are optional segments as i've never used them.

One more question though. I also have a global index route that now doesn't run because the optional segment takes precedence, is there a way to solve it?
Given your example

- ($username)._index.tsx
- ($username).p.$productName.tsx
- _index.tsx

I'm using the index route to either redirect user to /user/dashboard store management side or to /login
I think i'll get rid of the index route and handle the logic in the ($username)._index.tsx if the username is not defined and the request doesn't come a custom domain

PS: I'm using remix-flat-routes if that helps

[kiliman]

The main benefit of remix-flat-routes is that you could use hybrid routes and create a folder for your optional name. Other than that, this applies to v2 routing as well.

❯ tree app/routes
app/routes
├── ($username)+
│   ├── _index.tsx
│   ├── dashboard.tsx
│   └── p.$productName.tsx
└── login.tsx

With optional routes, you have to be careful to avoid ambiguous routes. Here, you can't have both the _index and ($username)._index routes since they can technically have the same URL /

As you state, you should put all the redirect logic in your ($username)._index route.

[jansedlon]

Cool, thank you very much, really appreciate it 🙏

[Sh4yy]

@kiliman, wouldn't this kill navlink's status and also make navigation somewhat complicated because of the optional param?

[kiliman]

Yes, you will have to be aware of this optional param. I would create a Wrapper component around Link to check for the param and generate the correct URL.