Can Modern.js Support Runtime Dynamic App Discovery Without Restarting?

[raolak]

Here's a refined version of your question, formatted for a GitHub discussion:

---

Question: Can Modern.js Support Runtime Dynamic App Discovery Without Restarting?

Context

I'm working with a master app in Modern.js that has multiple child apps configured statically in modern.config.ts. However, my goal is to enable dynamic app discovery at runtime — ideally, without needing to restart the master app each time a new app is deployed.

Current Setup

In modern.config.ts, the master app is set up with the following configuration:

runtime: {
    router: true,
    state: true,
    masterApp: {
      apps: [
        {
          name: 'app1',
          entry: app1ServiceUrl,
          activeWhen: '/app1',
        },
        {
          name: 'app2',
          entry: app2ServiceUrl,
          activeWhen: '/app2',
        },
       // additional apps...
      ],
    },
  },

Requirements

1. Dynamic App Registration: Is there a way to add apps dynamically at runtime (e.g., via API or webhook) so that any newly deployed app can be auto-discovered by the master app without updating modern.config.ts or restarting the host app?

2. Runtime Config Updates: As modern.config.ts is processed at build time, can certain configurations be loaded or modified dynamically even after the master app is already running?

3. User/Tenant Context Support: Ideally, I’d like the ability to read user/tenant-specific configurations post-authentication, possibly from an external provider, and adapt the routing or state accordingly.

Additional Information

The goal is to maintain runtime flexibility, allowing for:

• Automatic app discovery without a restart.
• User or tenant-specific routing configurations that can be fetched and applied dynamically.

[kirillbashtenko]

@raolak yeah, you can wrap in defineConfig your root component

import { defineConfig } from '@modern-js/runtime';
...
// App is you root component
export default defineConfig(App, {
  masterApp: {
    manifest: {
      getAppList: async () => {
        // get from remote api
        return [
         {
          name: 'app1',
          entry: app1ServiceUrl,
          activeWhen: '/app1',
        },
        {
          name: 'app2',
          entry: app2ServiceUrl,
          activeWhen: '/app2',
        },
        ];
      },
    },
  },
});

[raolak]

Thanks @kirillbashtenko . really appreciate the suggestion. I will try this out and get back if things are working as expected.