docs: add practice part

apps/website-new/docs/en/_meta.json

@@ -4,6 +4,11 @@
     "link": "/guide/start/",
     "activeMatch": "/guide/"
   },
+  {
+    "text": "Practice",
+    "link": "/practice/overview",
+    "activeMatch": "/practice/"
+  },
   {
     "text": "Configuration",
     "link": "/configure/",

apps/website-new/docs/en/practice/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "file",
+    "name": "overview",
+    "label": "overview"
+  },
+  {
+    "type": "dir",
+    "name": "frameworks",
+    "label": "frameworks"
+  },
+  {
+    "type": "file",
+    "name": "scenario",
+    "label": "scenario"
+  }
+]

apps/website-new/docs/en/frameworks/next/index.mdx → apps/website-new/docs/en/practice/frameworks/next/index.mdx

@@ -2,6 +2,8 @@
 title: "Basic Example"
 ---
 
+# Next.js & Module Federation
+
 import {Steps, Tabs, Tab, Badge, SourceCode} from '@theme';
 
 
@@ -13,13 +15,10 @@ import {Steps, Tabs, Tab, Badge, SourceCode} from '@theme';
 </span>
 <Badge text="App Router" type="danger" />
 #
-# Next.js & Module Federation
-
-Enables Module Federation on Next.js
-
-Jump to a github repo
-<SourceCode href="https://github.com/module-federation/module-federation-examples/tree/master/nextjs-ssr"/>
 
+:::tip Demo Reference
+Check out the example project list here: [Next.js SSR](https://github.com/module-federation/module-federation-examples/tree/master/nextjs-ssr)
+:::
 
 ## Setup Environment
 

apps/website-new/docs/en/frameworks/react/i18n-react.mdx → apps/website-new/docs/en/practice/frameworks/react/i18n-react.mdx

@@ -4,19 +4,23 @@ title: "Internationalization (i18n)"
 
 # Implementing Internationalization (i18n) with Module Federation in React Micro-Frontends
 
+:::tip Demo Reference
+Check out the example project list here: [React i18n](https://github.com/module-federation/module-federation-examples/tree/master/i18next-nextjs-react)
+:::
+
 ## Overview
 
-In the realm of micro-frontends, ensuring each application remains as autonomous as possible is crucial. However, scenarios arise where inter-application communication is inevitable. A common requirement is synchronizing language preferences across micro-frontends, such as when a user changes the language setting in one application, and it cascades across all integrated micro-frontends. This documentation outlines a strategy for implementing internationalization using the `react-i18next` library within a micro-frontend architecture facilitated by Webpack's Module Federation.
+In the realm of micro-frontends, ensuring each application remains as autonomous as possible is crucial. However, scenarios arise where inter-application communication is inevitable. A common requirement is synchronizing language preferences across micro-frontends, such as when a user changes the language setting in one application, and it cascades across all integrated micro-frontends. This documentation outlines a strategy for implementing internationalization using the `react-i18next` library within a micro-frontend architecture facilitated by Module Federation.
 
 ## Scenario
 
 Consider two applications: App A (the container application) and App B (the remote application). While App B functions independently as a standalone application, it is also designed to be embedded within App A at runtime. Our objective is to seamlessly synchronize language settings between App A and App B, ensuring both applications can manage and display their localized content.
 
 ## Architecture and Implementation
 
-### Extending Webpack Configuration
+### Extending Bundler Configuration
 
-To accommodate micro-frontend integration, we extend the existing Webpack and Create React App (CRA) configurations using the Module Federation plugin. This extension allows App B to expose various elements (e.g., components, themes, hooks) for consumption by App A or any other integrated applications without requiring codebase ejection.
+To accommodate micro-frontend integration, we extend the existing Webpack/Rspack/Rsbuild and Create React App (CRA) configurations using the Module Federation plugin. This extension allows App B to expose various elements (e.g., components, themes, hooks) for consumption by App A or any other integrated applications without requiring codebase ejection.
 
 ### Setting Up Internationalization
 
@@ -203,3 +207,4 @@ export default App;
 ```
 
 In this example, `LanguageSwitcher` will only render when App B is not embedded within App A, based on the `isRemote` state determined by the `useIsRemote` hook. This approach ensures that components like language switchers are only shown in appropriate contexts, enhancing the user experience and maintaining the independence of micro-frontend applications.
+

apps/website-new/docs/en/frameworks/react/index.mdx → apps/website-new/docs/en/practice/frameworks/react/index.mdx

@@ -2,6 +2,12 @@
 title: "Basic CRA with Rsbuild"
 ---
 
+# Basic CRA with Rsbuild
+
+:::tip Demo Reference
+Check out the example project list here: [Rsbuild CRA](https://github.com/module-federation/module-federation-examples/tree/master/cra)
+:::
+
 ## Setup Environment
 
 Before getting started, you will need to install [Node.js](https://nodejs.org/), and ensure that your Node.js version >= 16. **We recommend using the LTS version of Node.js 20.**
@@ -59,6 +65,9 @@ create rsbuild@latest
 
 "Select framework":
 > React
+
+"Select language":
+> TypeScript
 ```
 
 ### Create App 2
@@ -71,6 +80,9 @@ create rsbuild@latest
 
 "Select framework":
 > React
+
+"Select language":
+> TypeScript
 ```
 
 ### Install
@@ -85,8 +97,6 @@ pnpm i
 
 </Steps>
 
-
-
 ### Use React in an existing project
 
 To compile React, you need to register the Rsbuild [React Plugin](https://rsbuild.dev/plugins/list/plugin-react). The plugin will automatically add the necessary configuration for React builds.
@@ -113,73 +123,70 @@ Ensure that Webpack version 5 or above is installed by checking the installation
 In both applications, rename the `index.js` file to `bootstrap.js`. This change allows `bootstrap.js` to load asynchronously, which is essential for Module Federation to function correctly between the two applications.
 
 ```bash
-mv src/index.js src/bootstrap.js
+mv src/index.tsx src/bootstrap.tsx
 ```
 
-Update the contents of bootstrap.js to the following:
+Update the contents of bootstrap.tsx to the following:
 
-```javascript
+```typescript
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
 );
 ```
 
-Now, create a new `index.js` file in both applications with the following content to import `bootstrap.js`:
+Now, create a new `index.tsx` file in both applications with the following content to import `bootstrap.tsx`:
 
-```javascript
+```typescript
 import('./bootstrap');
 ```
 
 ## Step 3: Create and Expose
 
 Now, create a component to expose from `MFE2`
 
-
 <Steps>
 ### 3.1 Create Button Component
 
-In `MFE2`, create a new file named `Button.js` in the src directory with the following content:
-
-```javascript
-import React from 'react';
+In `MFE2`, create a new file named `Button.tsx` in the src directory with the following content:
 
+```typescript
 const Button = () => (
   <button>MFE2 Button</button>
 );
 
 export default Button;
 ```
 
-### 3.2 Update App.js
+### 3.2 Update App.tsx
 
-Update `App.js` in `MFE2` to import and render the Button component:
+Update `App.tsx` in `MFE2` to import and render the Button component:
 
-```javascript
-import React from 'react';
+```typescript
+import './App.css';
 import Button from './Button';
 
-function App() {
+const App = () => {
   return (
-    <div>
+    <div className="content">
       <h1>MFE2</h1>
       <Button />
     </div>
   );
-}
+};
 
 export default App;
 ```
 
 ## Step 3.3: Configure Rsbuild in MFE2
 
-Create a `rsbuild.config.js` file in the root directory of `MFE2` with the following configuration:
+Create a `rsbuild.config.ts` file in the root directory of `MFE2` with the following configuration:
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
@@ -219,14 +226,12 @@ export default defineConfig({
 
 Consume the exposed module from `MFE2` in `MFE1`
 
-
-
 <Steps>
-### 4.1 Update App.js
+### 4.1 Update App.tsx
 
-Update `App.js` in `MFE1` to import and render the `MFE2` Button component:
+Update `App.tsx` in `MFE1` to import and render the `MFE2` Button component:
 
-```javascript
+```typescript
 import React from 'react';
 import Button from 'remote/Button'; // federated import
 
@@ -244,7 +249,7 @@ export default App;
 
 ### Step 4.2: Configure Rsbuild in MFE1
 
-Create a `rsbuild.config.js` file in the root directory of `MFE1` with the following configuration:
+Create a `rsbuild.config.ts` file in the root directory of `MFE1` with the following configuration:
 
 ```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';

apps/website-new/docs/en/practice/overview.md

@@ -0,0 +1,12 @@
+---
+title: "Overview"
+---
+
+# Overview
+
+Module Federation, as a module sharing scheme, has its core objectives centered around solving the problems of code reuse, optimizing the build process, and enhancing runtime performance. However, these functionalities are often insufficient in the practice of project development. It typically needs to be integrated with various frameworks to understand how to use Module Federation under different frameworks and how to consolidate multiple functionalities from different frameworks. Additionally, the varying demand differences of different application scenarios must be considered, such as the differences between mid-back office applications and mobile application development scenarios.
+
+This article, titled "Practical Aspects," aims to address the aforementioned issues and provide a collection of best practices regarding the use of Module Federation. The main content consists of two parts:
+
+* Frameworks: Introduces how Module Federation is used within different frameworks.
+* Scenario-based Applications: For common business development scenarios, this article provides best practice guidance on Module Federation and explores how to integrate multiple functionalities across different frameworks to form comprehensive solutions.

apps/website-new/docs/en/practice/scenario/index.md

@@ -0,0 +1,5 @@
+---
+title: "scenario"
+---
+
+WIP...

apps/website-new/docs/zh/_meta.json

@@ -4,6 +4,11 @@
     "link": "/guide/start/",
     "activeMatch": "/guide/"
   },
+  {
+    "text": "实践",
+    "link": "/practice/overview",
+    "activeMatch": "/practice/"
+  },
   {
     "text": "配置",
     "link": "/configure/",

apps/website-new/docs/zh/practice/_meta.json

@@ -0,0 +1,17 @@
+[
+  {
+    "type": "file",
+    "name": "overview",
+    "label": "概览"
+  },
+  {
+    "type": "dir",
+    "name": "frameworks",
+    "label": "框架"
+  },
+  {
+    "type": "file",
+    "name": "scenario",
+    "label": "场景化"
+  }
+]

apps/website-new/docs/zh/practice/frameworks/_meta.json

@@ -0,0 +1,22 @@
+[
+  {
+    "type": "file",
+    "name": "index",
+    "label": "框架概览"
+  },
+  {
+    "type": "dir",
+    "name": "react",
+    "label": "React"
+  },
+  {
+    "type": "dir",
+    "name": "next",
+    "label": "Next.js"
+  },
+  {
+    "type": "dir",
+    "name": "angular",
+    "label": "Angular"
+  }
+]

apps/website-new/docs/zh/practice/frameworks/angular/_meta.json

@@ -0,0 +1,10 @@
+[
+  "angular-cli",
+  "angular-mfe",
+  "mf-ssr-angular",
+  "service-workers-mf",
+  "auth0",
+  "okta-auth",
+  "splitting-to-mf-part1",
+  "splitting-to-mf-part2"
+]