Exporte Aplicações

Este chapter vai introduce como para usar createBridgeComponent para exporte your React aplicação as um módulo esse pode ser carregado remotely.

Instalação

npm

yarn

pnpm

npm install @module-federation/bridge-react@latest

Básico Uso

Step 1: Crie Exporte Entry

To exporte uma React aplicação, você precisa crie uma dedicated exporte arquivo e use createBridgeComponent para wrap a aplicação as um módulo remoto.

Assuming your aplicação entry é App.tsx, crie uma nova arquivo export-app.tsx:

// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';

// Use createBridgeComponent to wrap App as a remote module and export
export default createBridgeComponent({
  rootComponent: App
});

Step 2: Configure `exposes` Exporte

Next, você precisa configure Module Federation em your ferramenta de build para exponha o criado exporte arquivo para uso por other aplicações.

Build Tool Support

O seguinte exemplo usa Rsbuild configuração. Please adjust according para your ferramenta de build:

Rsbuild: @module-federation/rsbuild-plugin
Rspack: @module-federation/enhanced/rspack
Webpack: @module-federation/enhanced/webpack
Vite: @module-federation/vite

// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx', // Export application-type remote module
      },
    }),
  ],
};

Bridge Router Configuração

React Bridge fornece powerful routing coordination capabilities esse pode dinamicamente inject basename e rota context passing based no current caminho.

Router Framework Support

Bridge Router currently suporta routing proxy functionality for React Router v5, v6, e v7 versões.
It does não suporte other routing frameworks such as @tanstack/react-router. For aplicações usando non-React Router frameworks, você precisa explicitamente disable enableBridgeRouter e handle routing logic yourself.

Habilite Bridge Router

// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx',
      },
      bridge: {
        // Enable Bridge Router routing capabilities, default is true
        enableBridgeRouter: true,
      }
    }),
  ],
};

Configuração Description

enableBridgeRouter: true (padrão) - Automatically handles basename e routing coordination, suporta React Router v5, v6, v7
enableBridgeRouter: false - Disables Bridge's padrão routing proxy capabilities, users precisa handle routing integração manually

Important

Quando enabling Bridge Router, não configure react-router-dom as uma dependência compartilhada, caso contrário it vai cause routing functionality issues.

createBridgeComponent API Reference

Important

@module-federation/bridge-react/v18 e /v19 importe createRoot de react-dom/client.

Se você apenas configure "react-dom" as uma dependência compartilhada, react-dom/client vai não ser shared e pode cause React versão mismatch erros. Garanta para usar o trailing-slash prefix form:

shared: {
  'react-dom/': {
    singleton: true,
  },
}

Função Signature

function createBridgeComponent<T = any>(
  bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>
): () => {
  render(info: RenderParams): Promise<void>;
  destroy(info: DestroyParams): void;
}

ProviderFnParams<T>

Bridge componente configuração parameters:

interface ProviderFnParams<T> {
  // Root component
  rootComponent: React.ComponentType<T>;
  
  // Custom render function (optional)
  render?: (App: React.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
  
  // Custom createRoot function (optional, React 18+)
  createRoot?: (container: Element | DocumentFragment, options?: CreateRootOptions) => Root;
  
  // Default createRoot options (React 18+)
  defaultRootOptions?: CreateRootOptions;
}

RenderParams

Render parameters interface:

interface RenderParams {
  moduleName?: string;
  basename?: string;
  memoryRoute?: {
    entryPath: string;
    initialState?: Record<string, unknown>;
  };
  dom: HTMLElement;                    // Target DOM element for rendering
  rootOptions?: CreateRootOptions;     // React 18+ createRoot options
  [key: string]: unknown;             // Other custom properties
}

DestroyParams

Destroy parameters interface:

interface DestroyParams {
  moduleName: string;
  dom: HTMLElement;
}

CreateRootOptions

React 18+ createRoot opções:

interface CreateRootOptions {
  identifierPrefix?: string;                                    // Identifier prefix
  onRecoverableError?: (error: unknown) => void;              // Recoverable error handling
  transitionCallbacks?: unknown;                               // Transition callbacks
}

Avançado Uso Exemplos

Custom Rendering Logic

// ./src/export-app.tsx
import App from './App';
import { createBridgeComponent } from '@module-federation/bridge-react';
import { createRoot } from 'react-dom/client';

export default createBridgeComponent({
  rootComponent: App,
  
  // Custom render function
  render: (App, container) => {
    const root = createRoot(container as HTMLElement, {
      identifierPrefix: 'my-app-'
    });
    root.render(App);
    return root;
  },
  
  // Default createRoot options
  defaultRootOptions: {
    identifierPrefix: 'remote-app-',
    onRecoverableError: (error) => {
      console.error('Remote app recoverable error:', error);
    }
  }
});

Supporting Multiple Exporta

// ./src/export-app.tsx
import App from './App';
import Dashboard from './Dashboard';
import { createBridgeComponent } from '@module-federation/bridge-react';

// Export main application
export default createBridgeComponent({
  rootComponent: App
});

// Export dashboard component
export const dashboard = createBridgeComponent({
  rootComponent: Dashboard
});

Corresponding Module Federation configuração:

// rsbuild.config.ts
export default {
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.tsx',     // Main application
        './dashboard': './src/export-app.tsx',      // Dashboard
      },
    }),
  ],
};

Próximos passos

Depois completing o exporte aplicação configuração, você pode continue reading Loading Remote Applications para learn como para carregar este aplicação remote em uma aplicação host.

#Exporte Aplicações

#Instalação

#Básico Uso

#Step 1: Crie Exporte Entry

#Step 2: Configure exposes Exporte

#Bridge Router Configuração

#Habilite Bridge Router

#Configuração Description

#createBridgeComponent API Reference

#Função Signature

#ProviderFnParams<T>

#RenderParams

#DestroyParams

#CreateRootOptions

#Avançado Uso Exemplos

#Custom Rendering Logic

#Supporting Multiple Exporta

#Próximos passos