docs: optimize quickstart (#3714)

Author: 2heal1

apps/website-new/docs/en/guide/start/quick-start.mdx

@@ -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