🌐

@tuvix.js/module-federation

Module Federation

Webpack 5 Module Federation integration. Load remote Tuvix.js micro apps using federated modules.

npm ↗ GitHub ↗

इंस्टॉलेशन

npm install @tuvix.js/module-federation

सेटअप

रिमोट ऐप (माइक्रो ऐप साइड)

Configure the remote micro app to expose itself as a federated module:

// webpack.config.js (remote)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'dashboardApp',
      filename: 'remoteEntry.js',
      exposes: {
        './app': './src/main.ts',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

शेल (होस्ट साइड)

import { createOrchestrator } from '@tuvix.js/core';
import { createFederationLoader } from '@tuvix.js/module-federation';

const orchestrator = createOrchestrator({ container: '#app' });

// Use the federation loader instead of a direct URL
const loader = createFederationLoader();

orchestrator.register('dashboard', {
  entry: loader.remote({
    url: 'https://dashboard.example.com/remoteEntry.js',
    scope: 'dashboardApp',
    module: './app',
  }),
});

orchestrator.start();

साझा निर्भरताएं

Configure sharing to avoid loading multiple copies of the same library:

const loader = createFederationLoader({
  shared: {
    react: { singleton: true, requiredVersion: '^18.0.0' },
    'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
    '@tuvix.js/event-bus': { singleton: true },
  },
});