Title: Infinite Loop Issue with Subdomain-Based Routing Using Custom Server in Remix

[kosiakMD]

Hello,

1. Problem Description
   I am developing a Remix application that requires rendering different components based on the subdomain, aiming to serve a distinct dashboard for admin and manager roles (e.g., admin.example.com/dashboard and manager.example.com/dashboard) and jwt httpOnly cookies tokens.. The challenge arises in implementing server-side logic to handle these subdomain distinctions without altering the expected behavior of Remix's routing.

2. Current Solutions and Issues
   To achieve subdomain-based routing, I've explored using a custom server that either:

Modifies the URL or origin URL based on the subdomain.
Utilizes a proxy to direct requests to the appropriate content.
Server Setup Example:

const subdomainRouter = express.Router();

const proxy = httpProxy.createProxyServer({
  target: 'http://manager.localhost:3000',
  preserveHeaderKeyCase: true,
  // changeOrigin: true,
});

subdomainRouter.use(async (req, res, next) => {
  // Split hostname to check for subdomain
  const subdomain = req.hostname.split('.')[0];

  if (req.headers['x-request-processed']) {
    next();
  }
  
  // skip static and proxy to API (code skipped)
  if (!req.url.startsWith('/build') && !req.path.startsWith('/api')) {
     if (subdomain === 'manager' && !req.path.startsWith('/manager')) {
        // VARIANT #0
        const newUrl = `${subdomain}${req.url}`;
        req.url = newUrl;
        // Doesn't work
        // VARIANT #1
        const url = `${subdomain}${req.url}`;
        proxy.web(req, res);
        // Inifitive Loop
        // VARIANT #2
        const newOriginUrl = `http://manager.localhost:3000/${subdomain}${req.url}`;
        req.originalUrl = fullUrl;
        // Inifitive Loop
        // VARIANT #3
        const newUrl = `http://manager.localhost:3000/${subdomain}${req.url}`;
        const response = await fetch(newUrl, {
          headers: req.headers,
          method: req.method,
          body: req.body,
        });
        console.log('response', response);

        for (const [header, value] of response.headers) {
          res.setHeader(header, value);
        }

        res.status(response.status);
        res.send(await response.text()); 
        // Inifitive Loop
     }
     next();
  } else {
     next();
  }

Outcome: Both approaches have led to an infinite loop, where modifying the request URL or proxying does not seamlessly integrate with Remix's client and server routing, resulting in repeated requests without resolving to the correct route.

3. Assumptions and Code Observations
   Upon inspecting the Remix build, specifically the manifest and routing logic, I found code snippets that seem to indicate how Remix handles route selection and component rendering based on URLs:

var ce = () => {
    let e = mC(),
        t = (s, n) => n.childRoutes ? n.childRoutes.map(({
            href: a
        }) => a).includes(s) : s.includes(n.href),
        r = dC(s => n => ({
            ...n,
            isSelected: t(s, n),
            ...n.childRoutes ? {
                childRoutes: n.childRoutes.map(r(s))
            } : {}
        }), []);
    return {
        routes: cC(() => em.map(r(e.pathname)), [r, e.pathname])
    }
};

window.__remixManifest = {
  // Manifest content
  ...
  "routes/manager.dashboard": {
            "id": "routes/manager.dashboard",
            "parentId": "root",
};

Assumption: It seems Remix uses a mechanism for selecting routes and determining active state based on the URL path. My assumption is that modifying the request URL or using a proxy might interfere with how Remix resolves these routes, potentially contributing to the infinite loop issue.

Questions:
Is there a recommended approach for implementing subdomain-based routing within Remix, specifically using a custom server setup, that avoids modifying the URL path directly or using a proxy in a way that conflicts with Remix's routing logic?

Given the observed behavior and code snippets from the Remix build, how can I ensure my subdomain-based distinctions are correctly interpreted by Remix's routing system without causing routing conflicts or infinite loops?

Any insights, guidance, or examples of best practices for achieving this functionality would be greatly appreciated.

Thank you for your assistance.