Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

runtime.masterApp

  • Type: Object
INFO

First you need to enable the "micro frontend" function using new command.

Example

modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools';
import { garfishPlugin } from '@modern-js/plugin-garfish';

export default defineConfig({
  runtime: {
    router: true,
  },
  plugins: [appTools(), garfishPlugin()],
});
src/modern.runtime.ts
import { defineRuntimeConfig } from '@modern-js/runtime';

export default defineRuntimeConfig({
  masterApp: {
    apps: [{
      name: 'Table',
      entry: 'http://localhost:8081',
      // activeWhen: '/table'
    }, {
      name: 'Dashboard',
      entry: 'http://localhost:8082'
      // activeWhen: '/dashboard'
    }]
  },
});

manifest

interface Manifest {
  getAppList?: () => Array<AppInfo>;
}

getAppList?

Through the getAppList configuration, you can customize how to get remote list data

type GetAppList = () => Promise<Array<AppInfo>>;

apps

When apps is an object, it represents the information of the child application module Array<AppInfo>.

interface AppInfo {
  name: string;
  entry: string;
  activeWhen?: string | ()=> boolean;
}
  • name: The name of the module.
  • entry: The entry of the module.

Other Config

In the masterApp configuration, developers can pass through options supported by Garfish

All supported configuration options see here.

ON THIS PAGE