How do I put a Remix app behind a URL rewrite

[31i0t]

Here's an example:
docs.my-domain.com
my-domain.com

I want a proxy to do this:
my-domain.com/docs

Remix then requests the browser build under my-domain.com/{build url}, but really it should be my-domain.com/docs/{build url}.

The publicPath option does seem to solve this (setting publicPath: 'docs/build/') and all the right build files are requested, but still I can't get it to work. After that point everything loads except for the HTML in the /routes/index.tsx.

Any suggestions? Thanks!

[cleytoncarvalho]

I have the same question. Did you figure how to do it?

[DevOfManyThings]

From when I looked into this, I couldn't find a way.

Remix uses react router behind the scenes which doesn't support this, however I think it was something that might be supported in the future (fuzzy memory but I think it was basically around having multiple instances of react router that handled different scenarios).

If you need it now you need to make use of something like NextJs's middleware which does support this use case.

[franklinjavier]

You can use any reverse proxy to do that, like nginx.

[srivastava-abhijeet]

Hi @franklinjavier - I was following this thread as I have similar use case. our app is hosted at https://myorgdomain/my-app but our remix app is served at root.
My question is Since I am already using express adapter, can we do reverse proxy in express itself?

[franklinjavier]

Yes you can.

Did you try html base tag?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

[franklinjavier]

What about this? https://github.com/kiliman/remix-proxy-basename

[srivastava-abhijeet]

Actually my case is opposite of this post. I my case out app is deployed at https://api-dev.apps.com/deployment/my-portal-ui/ but it giving error -

Initial URL (/) does not match URL at time of hydration (/deployment/my-portal-ui/), reloading page

Here is details for the same - #7018

[landsman]

change deployment to use subdomains and you are fine

[sergiodxa]

Right now it's not possible, even if you did the rewrite server side your app will break client side because the router will not know about your rewrite, if any the only way to keep it working would be by not rendering the Scripts component and only sending HTML so the only router that matters it the server side one, but I doubt that's something someone wants to do.

This would have to be supported in Remix Router and React Router first so it can then be ported to Remix Router by adding some export or configuration in remix.config.js.

[DevOfManyThings]

With NextJs it can be done as both a config, but it can also be handled dynamically through middleware .

Is this something that could be handled by react router's middleware? I think looking at the discussion they're only looking at redirects rather than rewrites though.

[paul-vd]

Dynamic route rewriting is quite useful, take a maintenance page for example, if you set your site in maintenance mode, you would expect all routes to show the maintenance page. Currently this is only possible by using a redirect, but use loose the benefit of staying on the same route and using a httpEquiv:refresh until the page is back up.

We are currently implementing something like this in our express router to re-write the url, but we are required to remove hydration.

here is a simplified example of our custom request handler

const currentRequestHandler = async (
  req: express.Request,
  res: express.Response,
  next: express.NextFunction
) => {
  try {
    if (process.env.MAINTENANCE_MODE_FORCE_ENABLED) {
      const isMaintenanceMode = handleMaintenanceMode(req, res) // checks logic for example allowed ip's or allowed routes etc...
      if(isMaintenanceMode){
        req.url = "/maintenance";
        req.originalUrl = "/maintenance";
      }
    }

    const request = createRemixRequest(req, res);
    const loadContext = {...}
    const response = await handleRequest(request, loadContext);
    await sendRemixResponse(res, response);
  } catch (error: unknown) {
    next(error);
  }
}

and then we use a handle export to remove the scripts when hydration is set to false (https://sergiodxa.com/articles/on-demand-hydration-in-remix)

[kiliman]

You could do this completely in Remix

Have your root loader return the maintenance status.

Then in your <App> render <Maintenance> or <Outlet>

export default function App() {
  const { maintenance } = useLoaderData<typeof loader>();
  return maintenance ? <Maintenance /> : <Outlet />;
}

Here's a ⚡️StackBlitz. Click to route User 123. Then toggle maintenance. You'll see "Under maintenance". Toggle it again, and you'll see that you're still on the same route.

https://stackblitz.com/edit/remix-run-remix-mz3wmg?file=app%2Froot.tsx

[paul-vd]

There are some issues with this approach;

1. Critical: You will lose the possibility to use the loader and meta tags for the maintenance page.
2. Critical: It will still call the loaders for the actual route, which is what we are trying to avoid in maintenance mode.
3. The styles of the Maintenance component will leak into the whole app, even when not loaded (this can be bypassed with a Suspense, but then there is a style flash.)

I created an updated example here: https://stackblitz.com/edit/remix-run-remix-dhre6q?file=app%2Froutes%2Fuser.%24id.tsx

[kentcdodds]

Pretty sure this would be possible via custom routes config: https://remix.run/docs/en/main/file-conventions/remix-config#routes

I'll bet @kiliman would even be willing to add a feature to remix-flat-routes to support something like this (it may even already be a feature).

[silouanwright]

kiliman/remix-flat-routes#99 (comment)

He says it's not possible