Skip to content

docs: optimize quickstart #3714

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 18, 2025
Merged

docs: optimize quickstart #3714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 2 additions & 274 deletions apps/website-new/docs/en/guide/start/quick-start.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,281 +162,9 @@ export default createModuleFederationConfig({

```

## Create from existing project
## Existing project integration

### Creating a Producer

#### 1. Initializing the Project

Use [Rsbuild](https://rsbuild.dev/) to create a provider and call the following command:

<PackageManagerTabs
command={{
npm: 'npm create rsbuild@latest',
yarn: 'yarn create rsbuild',
pnpm: 'pnpm create rsbuild@latest',
bun: 'bun create rsbuild@latest',
}}
/>


> Complete the project creation according to the prompts.

```bash
? Input target folder -> federation_provider
? Select framework -> React
? Select language -> TypeScript
```

#### 2. Installing Module Federation Build Plugin

Following the steps above for initializing the project, we created a `React` project named `federation_provider`. Execute the following commands in sequence:

<PackageManagerTabs
command={{
npm: `
cd federation_provider
npm add @module-federation/enhanced
npm add @module-federation/rsbuild-plugin --save-dev
`,
yarn: `
cd federation_provider
yarn add @module-federation/enhanced
yarn add @module-federation/rsbuild-plugin --save-dev
`,
pnpm: `
cd federation_provider
pnpm add @module-federation/enhanced
pnpm add @module-federation/rsbuild-plugin --save-dev
`,
bun: `
cd federation_provider
bun add @module-federation/enhanced
bun add @module-federation/rsbuild-plugin --save-dev
`,
}}
/>

#### 3. Exporting Modules by the Producer

> Change the entry file to asynchronous


```tsx
// Move src/index.tsx to a newly created src/bootstrap.tsx file
// src/index.tsx
import('./bootstrap');

// src/bootstrap.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
```

> Add a Button Component

```tsx
// src/button.tsx
export default function Button() {
return <div>Provider button</div>;
}
```

> Export the Button component through Module Federation

```typescript title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'federation_provider',
exposes: {
'./button': './src/button.tsx',
},
shared: ['react', 'react-dom'],
}),
],
server: {
port: 3000,
},
});
```

#### 4. Starting the Producer

<PackageManagerTabs
command={{
npm: `npm run dev`,
yarn: `yarn run dev`,
pnpm: `pnpm run dev`,
bun: `bun run dev`,
}}
/>

```zsh
➜ federation_provider npm run dev

> [email protected] dev
> rsbuild dev --open

Rsbuild v0.5.1

> Local: http://localhost:3000/
> Network: http://10.94.55.204:3000/
> Network: http://10.4.255.21:3000/

start Compiling...
[ Module Federation Manifest Plugin ] Manifest Link: http://localhost:3000/mf-manifest.json
```

After the project starts, the `Manifest Link: http://localhost:3000/mf-manifest.json` message appears, which is the manifest information link for Module Federation.

### Creating a Consumer

#### 1. Initializing the Project

Use [Rsbuild](https://rsbuild.dev/) to create a consumer and call the following command:

<PackageManagerTabs
command={{
npm: 'npm create rsbuild@latest',
yarn: 'yarn create rsbuild',
pnpm: 'pnpm create rsbuild@latest',
bun: 'bun create rsbuild@latest',
}}
/>


> Complete the project creation according to the prompts.

```bash
? Input target folder -> federation_consumer
? Select framework -> React
? Select language -> TypeScript
```

#### 2. Installing Module Federation Build Plugin

Following the steps above for initializing the project, we created a `React` project named `federation_consumer`. Execute the following commands in sequence:

<PackageManagerTabs
command={{
npm: `
cd federation_consumer
npm add @module-federation/enhanced
npm add @module-federation/rsbuild-plugin --save-dev
`,
yarn: `
cd federation_consumer
yarn add @module-federation/enhanced
yarn add @module-federation/rsbuild-plugin --save-dev
`,
pnpm: `
cd federation_consumer
pnpm add @module-federation/enhanced
pnpm add @module-federation/rsbuild-plugin --save-dev
`,
bun: `
cd federation_consumer
bun add @module-federation/enhanced
bun add @module-federation/rsbuild-plugin --save-dev
`,
}}
/>


#### 3. Consuming the Producer

> Declare the `Module Federation` type path in `tsconfig.json`

```json
{
"compilerOptions": {
"paths":{
"*": ["./@mf-types/*"]
}
}
}
````


> Add Module Federation plugin to consume remote modules

```typescript title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'federation_consumer',
remotes: {
federation_provider:
'federation_provider@http://localhost:3000/mf-manifest.json',
},
shared: ['react', 'react-dom'],
}),
],
server: {
port: 2000,
},
});
```

> Change the entry to be asynchronous

```tsx
// Move src/index.tsx to a newly created src/bootstrap.tsx file
// src/index.tsx
import('./bootstrap');

// src/bootstrap.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
```

> Reference the remote module

```tsx
import './App.css';
// The remote component provided by federation_provider
import ProviderButton from 'federation_provider/button';

const App = () => {
return (
<div className="content">
<h1>Rsbuild with React</h1>
<p>Start building amazing things with Rsbuild.</p>
<div>
<ProviderButton />
</div>
</div>
);
};

export default App;
```
If you want to integrate `Module Federation` into an existing project, you can refer to [docs](../../practice/frameworks/index).

## Summary

Expand Down
Loading