Idea on how to put remix routes into a package?

[Jarrodsz]

Im using remix flat routes package.

And would like to put routes for a package inside the package itself.

Like

/packages/auth/routes/login.tsx
Etc

The application that imports this package then automatically loads the routes in the package folder.

This way the application /routes folder stays lean.

Any thoughts how this could be implemented with remix v2?
In older remix 1.18 last year this was nearly impossible.

This would be a really awesome festure to abstract and seperate logic into packages more🙏

[PhilDL]

Hi @Jarrodsz, if that's really what you want to do, you can already do it with remix flat routes:

From your remix.config.js :

import { flatRoutes } from "remix-flat-routes";

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
export default {
  ignoredRouteFiles: ["**/*"],
  routes: async (defineRoutes) => {
    return flatRoutes(
      ["routes", "../../../packages/package-name/src/routes"],
      defineRoutes,
      {
        ignoredRouteFiles: [
          ".*",
          "**/*.css",
          "**/*.test.{js,jsx,ts,tsx}",
          "**/__*.*",
        ],
      },
    );
  },
  watchPaths: async () => {
    return ["../../packages/package-name/src/**/*"];
  },
};

The first argument of flatRoutes() can ba a string or an array of strings representing routes folders. Be careful though, as you can see in the example, the paths are relative to the base path of "./app" of the remix app. So you would have to relatively go back the folder tree as I did in the example above.

[Jarrodsz]

Hi Phil,

just 9 hours ago this issue was closed:
remix-run/remix#6711

I havent looked much at vite and vite plugins but they seem to use yet another solution. What do you think? Thank you.
We sure made a big leap going to v2 and vite

https://remix.run/docs/en/2.7.0/future/presets

remix-run/remix#6711 (comment)