[Feature]: Remix "apps" (remix admin site)

What is the new or updated feature that you are suggesting?

I’m wondering if there could be a way to publish and share Remix “apps.” When I say “apps” I mean something like Django’s concept of apps, which are essentially packaged groups of views, models, and controllers. I think it would be interesting if someone could publish a set of routes that you could just npm install into your app. Specifically, I’m thinking something like Django’s admin site.

Why should this feature be included?

This idea came to me while I was thinking about Django’s super cool admin site. Basically, all you have to do is install the django admin app and you get this cool interface at /admin where you could have site administrators go to view/update/edit the site data. It would be cool if we could make a “remix admin site” where you would just npm install remix-admin-site and have a bunch of routes located at /admin (or wherever) for administrators to manage your site data.

The difficulty with something like the Django admin site in Remix is that Remix can’t make any assumptions about what database someone is using, or what database adapter they’re using, or even if they’re using a database at all. There would have to be some way for apps to plug in to the existing code. For example, we could do this:

In the remix-admin-site package:

// node_modules/remix-admin-site/routes/admin/users.tsx
export let getUsers = () => {}

export let loader: LoaderFunction = () => {
  return getUsers()
}

export default Users() {
  let data = useLoaderData();
  // display users
}

then in your app:

// your-app/routes/admin/users.tsx
export let getUsers = () => {
  return db.users.findAll();
}

and the complier would then combine the route from the remix-admin-site package and your app, so you end up with this at runtime:

// final form
export let getUsers = () => {
  return db.users.findAll();
}

export let loader: LoaderFunction = () => {
  return getUsers()
}

export default Users() {
  let data = useLoaderData();
  // display users
}

There would also need to be a way to customize the admin site’s styles, in other words a way to override an installed app’s links. That could even be a window for another person to publish a set of route links as like a “skin” for the admin site.

In general, it would be interesting if you could override any part of each route of an installed app so you could customize the loader, action, even the component and error/catch boundaries.

Not sure if this idea makes a ton of sense for Remix, but I thought I would at least mention it and see if anyone has thoughts.

[BenoitAverty]

Hello,

I made an experiment that adresses this kind of use cases : https://github.com/BenoitAverty/remix-test-build-time-route-modules

[sergiodxa]

This is something I talked with Ryan a months ago, and it was something he wanted to do. I also have a few ideas of different apps or engines (in Rails they are called engines) that could be useful to make them work this way, for example in Rails world there’s a engine called letter_opener which shows you the emails you send from your app, so you can debug them, and it’s basically attach a route, another one that I would like to implement in Remix Auth is Doorkeeper which generates the routes you need to be an identity provider using oAuth2.

Right now, if you wanted to do this you could go to remix.config.js and export a routes function, there you can add routes using files outside the app/routes folder, so a package could tell you to call a function there and then add the routes using files inside node_modules, but I haven’t tried it yet.