Introduce#

Modern.js runtime configuration should be centralized in the src/modern.runtime.ts file.

touch src/modern.runtime.ts

Basic Configuration#

import { defineRuntimeConfig } from '@modern-js/runtime';

export default defineRuntimeConfig({
  router: {
    // Router configuration
  },
  state: {
    // State management configuration
  },
  // Other runtime modules...
});

Multi-Entry Configuration#

For multi-entry applications, defineRuntimeConfig can accept a function that returns specific configurations based on the entry name:

import { defineRuntimeConfig } from '@modern-js/runtime';

export default defineRuntimeConfig((entryName) => {
  if (entryName === 'main') {
    return {
      router: {
        // Router configuration for "main" entry
      },
      state: {
        // State management configuration for "main" entry
      },
    };
  }

  // Configuration for other entries
  return {
    masterApp: {
      // Micro-frontend configuration example
    },
  };
});

Configuration Evolution#

Before 2.66.0, runtime configurations were scattered across multiple locations:

1. The runtime and runtimeByEntries fields in modern.config.ts
2. The App.config or the config function exported from layout files for each entry

To improve maintainability, Modern.js introduced the unified src/modern.runtime.ts configuration entry.

Legacy Configuration (Compatible but Not Recommended)#

// modern.config.ts
export default {
  runtime: { /* ... */ },
  runtimeByEntries: { /* ... */ },
};

// App.config
App.config = {/* ... */}

// layout file
export const config = () => { /* Dynamic configuration logic */ };

Migration Recommendation#

We strongly recommend migrating all runtime configurations to src/modern.runtime.ts. Although the legacy configuration approach is still compatible, it is planned to be gradually deprecated in future versions. A unified configuration entry prevents scattered configurations and significantly improves project maintainability.