# Export Applications
This chapter will introduce how to use `createBridgeComponent` to export your React application as a module that can be loaded remotely.
## Installation
```sh [npm]
npm install @module-federation/bridge-react@latest
```
```sh [yarn]
yarn add @module-federation/bridge-react@latest
```
```sh [pnpm]
pnpm add @module-federation/bridge-react@latest
```
## Basic Usage
### Step 1: Create Export Entry
To export a React application, you need to create a dedicated export file and use `createBridgeComponent` to wrap the application as a remote module.
Assuming your application entry is `App.tsx`, create a new file `export-app.tsx`:
```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` Export
Next, you need to configure Module Federation in your build tool to expose the created export file for use by other applications.
:::tip Build Tool Support
The following example uses Rsbuild configuration. Please adjust according to your build tool:
- **Rsbuild**: `@module-federation/rsbuild-plugin`
- **Rspack**: `@module-federation/enhanced/rspack`
- **Webpack**: `@module-federation/enhanced/webpack`
- **Vite**: `@module-federation/vite`
:::
```ts
// 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 Configuration
React Bridge provides powerful routing coordination capabilities that can dynamically inject basename and route context passing based on the current path.
:::info Router Framework Support
- Bridge Router currently supports routing proxy functionality for React Router v5, v6, and v7 versions.
- It does not support other routing frameworks such as `@tanstack/react-router`. For applications using non-React Router frameworks, you need to explicitly disable `enableBridgeRouter` and handle routing logic yourself.
:::
### Enable Bridge Router
```ts
// 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,
}
}),
],
};
```
### Configuration Description
- **`enableBridgeRouter: true`** (default) - Automatically handles basename and routing coordination, supports React Router v5, v6, v7
- **`enableBridgeRouter: false`** - Disables Bridge's default routing proxy capabilities, users need to handle routing integration manually
:::warning Important
When enabling Bridge Router, do not configure `react-router-dom` as a shared dependency, otherwise it will cause routing functionality issues.
:::
## createBridgeComponent API Reference
### Function Signature
```tsx
function createBridgeComponent<T = any>(
bridgeInfo: Omit<ProviderFnParams<T>, 'createRoot'>
): () => {
render(info: RenderParams): Promise<void>;
destroy(info: DestroyParams): void;
}
```
### ProviderFnParams\<T>
Bridge component configuration parameters:
```tsx
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:
```tsx
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:
```tsx
interface DestroyParams {
moduleName: string;
dom: HTMLElement;
}
```
### CreateRootOptions
React 18+ createRoot options:
```tsx
interface CreateRootOptions {
identifierPrefix?: string; // Identifier prefix
onRecoverableError?: (error: unknown) => void; // Recoverable error handling
transitionCallbacks?: unknown; // Transition callbacks
}
```
### Advanced Usage Examples
#### Custom Rendering Logic
```tsx
// ./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 Exports
```tsx
// ./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 configuration:
```ts
// rsbuild.config.ts
export default {
plugins: [
pluginModuleFederation({
name: 'remote1',
exposes: {
'./export-app': './src/export-app.tsx', // Main application
'./dashboard': './src/export-app.tsx', // Dashboard
},
}),
],
};
```
## Next Steps
After completing the export application configuration, you can continue reading [Loading Remote Applications](/practice/bridge/react-bridge/load-app.md) to learn how to load this remote application in a host application.
