Modular Remix app / Multiple routes directories

[benbarber]

Given I have an app which contains a guest area (eg. public facing website) and a separate area for members (eg. forums), with a modular approach I could organise the code like in the example below, with lib containing any shared business logic:

- app
  - members
    - components
    - routes
    - styles
 - guests
   - components
   - routes
   - styles
 - lib
   - models
   - utils

This could be configured in the remix.config.js like below:

module.exports = {
  appDirectory: "app",
  routesDirectory: [
     {src: "app/members/routes", basePath: "/members"},
     {src: "app/guests/routes", basePath: "/"}
  ]
}

This would be really helpful for code organisation and also splitting out the required assets so that each module route only serves the JS and CSS thats required. For example I could do a separate Tailwind configuration and build for each module so that then no CSS is shared across modules, made even simpler with upcoming Tailwind changes tailwindlabs/tailwindcss#9504

[benbarber]

After going through the Remix source code it was actually very easy to achieve the above goal with no changes required to Remix itself. All it took was some manipulation of the result returned from defineConventionalRoutes which can be done in your remix.config.js.

Heres my app structure:

- app
  - members
    - components
    - routes
      - members
      - members.tsx (layout)
    - styles
 - guests
   - components
   - routes
     - index.tsx
     - signup.tsx
   - styles
 - lib
   - models
   - utils

Heres my remix.config.js:

const routesConvention = require("@remix-run/dev/dist/config/routesConvention");

function getRouteModules(routeModulePaths = []) {
  let routes = {};

  for (const modulePath of routeModulePaths) {
    const foundRoutes = routesConvention.defineConventionalRoutes(`app/${modulePath}`);

    for (const routeKey of Object.keys(foundRoutes)) {
      for (const key of Object.keys(foundRoutes[routeKey])) {
        if (typeof foundRoutes[routeKey][key] === "string") {
          foundRoutes[routeKey][key] = foundRoutes[routeKey][key].replace(
            "routes/",
            `${modulePath}/routes/`
          );
        }
      }

      routes[routeKey.replace("routes/", `${modulePath}/routes/`)] =
        foundRoutes[routeKey];
    }
  }

  return routes;
}

/**
 * @type {import('@remix-run/dev/config').AppConfig}
 */
module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildDirectory: "server/build",
  devServerPort: 8002,
  ignoredRouteFiles: [".*"],
  routes: () => getRouteModules(["guests", "members"]),
};