module-federation · ScriptedAlchemy · Apr 15, 2025 · Apr 16, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/apps/website-new/docs/en/configure/dev.mdx b/apps/website-new/docs/en/configure/dev.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Dev Configuration
+description: Configure Module Federation development-time behaviors, including live reload and type hint reloading.
+---
+
 # dev
 
 - Type: `boolean | PluginDevOptions`

diff --git a/apps/website-new/docs/en/configure/dts.mdx b/apps/website-new/docs/en/configure/dts.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | DTS Configuration
+description: Configure the generation and consumption of TypeScript definition (`.d.ts`) files for Module Federation.
+---
+
 # dts
 
 - Type: `boolean | PluginDtsOptions`

diff --git a/apps/website-new/docs/en/configure/experiments.mdx b/apps/website-new/docs/en/configure/experiments.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Experiments Configuration
+description: Enable and configure experimental features within the Module Federation plugin.
+---
+
 # Experiments
 
 The `experiments` configuration is used to enable experimental capabilities in the plugin.

diff --git a/apps/website-new/docs/en/configure/exposes.mdx b/apps/website-new/docs/en/configure/exposes.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Exposes Configuration
+description: Define the modules and file entries exposed by a Module Federation producer application.
+---
+
 # Exposes
 
 - Type: `PluginExposesOptions`

diff --git a/apps/website-new/docs/en/configure/filename.mdx b/apps/website-new/docs/en/configure/filename.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Filename Configuration
+description: Specify the output filename for the Module Federation remote entry file (e.g., remoteEntry.js).
+---
+
 # Filename
 
 - Type: `string`

diff --git a/apps/website-new/docs/en/configure/getpublicpath.mdx b/apps/website-new/docs/en/configure/getpublicpath.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | GetPublicPath Configuration
+description: Configure a dynamic public path function for Module Federation remote modules.
+---
+
 # GetPublicPath
 
 - Type: `string`

diff --git a/apps/website-new/docs/en/configure/implementation.mdx b/apps/website-new/docs/en/configure/implementation.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Implementation Configuration
+description: Specify a custom implementation path for the Module Federation runtime tools.
+---
+
 # Implementation
 
 - Type: `string`

diff --git a/apps/website-new/docs/en/configure/index.mdx b/apps/website-new/docs/en/configure/index.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Configuration Overview
+description: A comprehensive overview of all available configuration options for the Module Federation plugin.
+---
+
 # Configuration Overview
 
 The current page lists all the configuration options for `Module Federation`. Please refer to the documentation for [`Rspack Plugin`](../guide/basic/rspack) and [`Webpack Plugin`](../guide/basic/webpack) and [`Vite Plugin`](../guide/basic/vite) to understand how to use them.

diff --git a/apps/website-new/docs/en/configure/manifest.mdx b/apps/website-new/docs/en/configure/manifest.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Manifest Configuration
+description: Configure the generation of the Module Federation manifest file (`mf-manifest.json`).
+---
+
 # manifest
 
 - Type: `boolean | PluginManifestOptions`

diff --git a/apps/website-new/docs/en/configure/name.mdx b/apps/website-new/docs/en/configure/name.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Name Configuration
+description: Define the unique name for the Module Federation application or module.
+---
+
 # Name
 
 - Type: `string`

diff --git a/apps/website-new/docs/en/configure/remotes.mdx b/apps/website-new/docs/en/configure/remotes.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Remotes Configuration
+description: Configure remote Module Federation applications or modules to be consumed.
+---
+
 # Remotes
 
 - Type: `PluginRemoteOptions`

diff --git a/apps/website-new/docs/en/configure/runtimeplugins.mdx b/apps/website-new/docs/en/configure/runtimeplugins.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | RuntimePlugins Configuration
+description: Add custom plugins to extend or modify the Module Federation runtime behavior.
+---
+
 # runtimePlugins
 
 - Type: `string[]`

diff --git a/apps/website-new/docs/en/configure/shareStrategy.mdx b/apps/website-new/docs/en/configure/shareStrategy.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | ShareStrategy Configuration
+description: Define the loading strategy (`version-first` or `loaded-first`) for shared dependencies in Module Federation.
+---
+
 # shareStrategy
 
 - Type: `'version-first' | 'loaded-first'`

diff --git a/apps/website-new/docs/en/configure/shared.mdx b/apps/website-new/docs/en/configure/shared.mdx
@@ -1,3 +1,8 @@
+---
+title: Plugin Options | Shared Configuration
+description: Configure shared dependencies between Module Federation applications to optimize performance and ensure consistency.
+---
+
 # Shared
 
 The `shared` configuration is used to share common dependencies between consumers and producers, reducing the runtime download volume and thus improving performance. `shared` allows you to configure rules for reusing dependency versions. You can learn more about the scenarios where `shared` is applicable and how to use `shared` through the [FAQ](#faq).

diff --git a/apps/website-new/docs/en/guide/_meta.json b/apps/website-new/docs/en/guide/_meta.json
@@ -7,16 +7,16 @@
   {
     "type": "dir",
     "name": "basic",
-    "label": "basic"
+    "label": "Basic"
   },
   {
     "type": "dir",
     "name": "framework",
     "label": "Frameworks"
   },
   {
-    "type":"dir",
-    "name":"troubleshooting",
-    "label":"Troubleshooting"
+    "type": "dir",
+    "name": "troubleshooting",
+    "label": "Troubleshooting"
   }
 ]
diff --git a/apps/website-new/docs/en/guide/basic/_meta.json b/apps/website-new/docs/en/guide/basic/_meta.json
@@ -1 +1,42 @@
-["runtime", "rsbuild", "rspack", "webpack", "vite", "chrome-devtool", "type-prompt","cli"]
+[
+  {
+    "type": "file",
+    "name": "runtime",
+    "label": "Runtime"
+  },
+  {
+    "type": "file",
+    "name": "rsbuild",
+    "label": "Rsbuild Plugin"
+  },
+  {
+    "type": "file",
+    "name": "rspack",
+    "label": "Rspack Plugin"
+  },
+  {
+    "type": "file",
+    "name": "webpack",
+    "label": "Webpack Plugin"
+  },
+  {
+    "type": "file",
+    "name": "vite",
+    "label": "Vite Plugin"
+  },
+  {
+    "type": "file",
+    "name": "chrome-devtool",
+    "label": "Chrome DevTools"
+  },
+  {
+    "type": "file",
+    "name": "type-prompt",
+    "label": "Type Prompt"
+  },
+  {
+    "type": "file",
+    "name": "cli",
+    "label": "CLI"
+  }
+]
diff --git a/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx b/apps/website-new/docs/en/guide/basic/chrome-devtool.mdx
@@ -1,4 +1,7 @@
-# Chrome DevTools
+---
+title: Chrome DevTools
+description: Learn how to use Chrome DevTools with Module Federation for debugging, inspecting dependencies, and monitoring module loading.
+---
 
 The `Microfrontend` architecture differs from the traditional monolithic application development model. Its characteristics of separate development, deployment, and debugging necessitate a new set of debugging tools to meet new usage scenarios, such as: how to verify the effect of modules in actual projects when developing `Module Federation`, whether the dependencies of `Module Federation` are reused with the host environment, which `Module Federation` modules are loaded on the current page, the dependency relationships of `Module Federation`, and how the data flow between `Module Federation` works.
 

diff --git a/apps/website-new/docs/en/guide/basic/cli.mdx b/apps/website-new/docs/en/guide/basic/cli.mdx
@@ -1,3 +1,8 @@
+---
+title: CLI
+description: Comprehensive guide to using the Module Federation CLI for project creation, management, and development workflows.
+---
+
 # CLI
 
 `@module-federation/enhanced` and `@module-federation/modern-js` provides a lightweight CLI.
@@ -61,4 +66,4 @@ The `mf dts` command will automatically generate or pull type declaration files
 If you only use the runtime API, you need to create a temporary `module-federation.config.ts` file, write the remote configuration you need to get the type, and then run the `mf dts` command.
 If you are only using the runtime API, you need to create a temporary `module-federation.config.ts` file, configure [dts.consumeTypes.remoteTypeUrls](../../configure/dts#remotetypeurls), and then run the `mf dts` command.
 
-:::
+:::
diff --git a/apps/website-new/docs/en/guide/basic/rsbuild.mdx b/apps/website-new/docs/en/guide/basic/rsbuild.mdx
@@ -1,4 +1,7 @@
-# Rsbuild Plugin
+---
+title: Rsbuild Plugin
+description: Learn how to integrate Module Federation with Rsbuild, including configuration options and best practices for micro-frontend development.
+---
 
 Help users quickly build Module Federation products in **Rsbuild App** or **Rslib**
 

diff --git a/apps/website-new/docs/en/guide/basic/rspack.mdx b/apps/website-new/docs/en/guide/basic/rspack.mdx
@@ -1,4 +1,7 @@
-# Rspack Plugin
+---
+title: Rspack Plugin
+description: Guide to using Module Federation with Rspack, leveraging its high-performance build capabilities for micro-frontend applications.
+---
 
 :::info Note
 Requires Rspack version 0.5.0 or above.

diff --git a/apps/website-new/docs/en/guide/basic/runtime.mdx b/apps/website-new/docs/en/guide/basic/runtime.mdx
@@ -1,3 +1,8 @@
+---
+title: Runtime
+description: Comprehensive guide to the Module Federation runtime system, including module loading, sharing, and runtime plugin capabilities.
+---
+
 # Federation Runtime
 
 :::tip

diff --git a/apps/website-new/docs/en/guide/basic/type-prompt.mdx b/apps/website-new/docs/en/guide/basic/type-prompt.mdx
@@ -1,3 +1,8 @@
+---
+title: Remote Type Hints
+description: Learn how to use Module Federation's type hinting system for improved TypeScript support and development experience.
+---
+
 # Remote Type Hints
 
 Just like NPM Packages, `Module Federation` products also generate types and enjoy type hot reloading, although the products are hosted on a remote CDN.

diff --git a/apps/website-new/docs/en/guide/basic/vite.mdx b/apps/website-new/docs/en/guide/basic/vite.mdx
@@ -1,3 +1,8 @@
+---
+title: Vite Plugin
+description: Guide to integrating Module Federation with Vite for fast development and optimized builds in micro-frontend applications.
+---
+
 # Vite Plugin
 
 - Can build modules that meet the `Module Federation` loading specifications.
@@ -10,7 +15,7 @@ Except for the [dev、dts](../../configure/dev.html) options, all options are su
 - roadmap 🗓️
   - When a module has remote types, it will automatically download and consume the types of the remote modules.
   - Consuming remote modules will have hot update capabilities.
-  - nuxt ssr 
+  - nuxt ssr
 
 ## Quick Start
 

diff --git a/apps/website-new/docs/en/guide/basic/webpack.mdx b/apps/website-new/docs/en/guide/basic/webpack.mdx
@@ -1,3 +1,8 @@
+---
+title: Webpack Plugin
+description: Configuring and using the Module Federation plugin within Webpack build environments.
+---
+
 # Webpack Plugin
 
 - Can build modules that meet the `Module Federation` loading specifications.

diff --git a/apps/website-new/docs/en/guide/framework/modernjs.mdx b/apps/website-new/docs/en/guide/framework/modernjs.mdx
@@ -1,3 +1,8 @@
+---
+title: Modern.js Plugin
+description: Learn how to integrate Module Federation with Modern.js for building scalable micro-frontend applications.
+---
+
 # Modern.js
 
 This plugin provides Module Federation supporting functions for Modern.js

diff --git a/apps/website-new/docs/en/guide/framework/nextjs.mdx b/apps/website-new/docs/en/guide/framework/nextjs.mdx
@@ -1,3 +1,8 @@
+---
+title: Next.js Plugin
+description: Comprehensive guide to using Module Federation with Next.js, including Server-Side Rendering and static site generation support.
+---
+
 import { Badge } from '@theme';
 
 <div style={{float:"right"}}><Badge text="App Router Not Supported" type="danger" /></div>

diff --git a/apps/website-new/docs/en/guide/start/features.mdx b/apps/website-new/docs/en/guide/start/features.mdx
@@ -1,3 +1,8 @@
+---
+title: Features
+description: Explore the advanced capabilities of Module Federation 2.0, including runtime plugins, manifest support, dynamic type hints, and framework integrations.
+---
+
 # Feature Navigation
 
 Here, you will discover the key functionalities offered through Module Federation. This version of Module Federation, distinct from those integrated into Webpack and Rspack, leverages the advanced features of the bundler tool. It offers enhanced capabilities designed to fulfill more demanding requirements of large-scale application development.

diff --git a/apps/website-new/docs/en/guide/start/glossary.mdx b/apps/website-new/docs/en/guide/start/glossary.mdx
@@ -1,3 +1,8 @@
+---
+title: Glossary
+description: Comprehensive glossary of Module Federation terms and concepts, including producers, consumers, micro-frontends, and bundler definitions.
+---
+
 # Glossary of Terms
 
 ## Module Federation

diff --git a/apps/website-new/docs/en/guide/start/index.mdx b/apps/website-new/docs/en/guide/start/index.mdx
@@ -1,3 +1,8 @@
+---
+title: Introduction
+description: Learn about Module Federation 2.0, a powerful architecture pattern for building micro-frontends with enhanced features like runtime plugins, manifest support, and dynamic type hints.
+---
+
 # Introduction
 
 ### 💡 What is Module Federation?

diff --git a/apps/website-new/docs/en/guide/start/npm-packages.mdx b/apps/website-new/docs/en/guide/start/npm-packages.mdx
@@ -1,3 +1,8 @@
+---
+title: NPM Packages
+description: Comprehensive guide to all Module Federation NPM packages, including enhanced core, runtime, Rspack plugin, Next.js integration, and utility packages.
+---
+
 # npm Packages
 
 This document showcases all npm package information maintained by the Module Federation team.

diff --git a/apps/website-new/docs/en/guide/start/quick-start.mdx b/apps/website-new/docs/en/guide/start/quick-start.mdx
@@ -1,3 +1,8 @@
+---
+title: Quick Start Guide
+description: Step-by-step guide to setting up your first Module Federation project, including creating providers and consumers with modern build tools.
+---
+
 import { Badge, PackageManagerTabs } from "@theme";
 
 # Quick Start Guide

diff --git a/apps/website-new/docs/en/guide/start/setting-up-env.mdx b/apps/website-new/docs/en/guide/start/setting-up-env.mdx
@@ -1,3 +1,8 @@
+---
+title: Environment Setup
+description: Complete guide to setting up your development environment for Module Federation, including Node.js requirements and essential web development prerequisites.
+---
+
 # Setting Up the Environment
 
 Module Federation is a JavaScript application partitioning architecture pattern (similar to microservices on the server side) that allows you to share code and resources between multiple JavaScript applications (or micro frontends). This document is aimed at beginner users and will guide you through setting up the basic environment for Module Federation.

diff --git a/apps/website-new/docs/en/guide/troubleshooting/_meta.json b/apps/website-new/docs/en/guide/troubleshooting/_meta.json
@@ -1,22 +1,30 @@
 [
-  "overview",
+  {
+    "type": "file",
+    "name": "overview",
+    "label": "Overview"
+  },
   {
     "type": "dir",
     "name": "runtime",
     "label": "Runtime",
-    "collapsed":true
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "build",
     "label": "Build",
-    "collapsed":true
+    "collapsed": true
   },
   {
     "type": "dir",
     "name": "type",
     "label": "Type",
-    "collapsed":true
+    "collapsed": true
   },
-  "other"
+  {
+    "type": "file",
+    "name": "other",
+    "label": "Other"
+  }
 ]
diff --git a/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx b/apps/website-new/docs/en/guide/troubleshooting/build/BUILD-001.mdx
@@ -1,3 +1,8 @@
+---
+title: BUILD-001 | Expose Module Not Found
+description: Troubleshooting guide for the BUILD-001 error, which occurs when the exposed module resources cannot be found properly during the build process.
+---
+
 import ErrorCodeTitle from '@components/ErrorCodeTitle';
 
 <ErrorCodeTitle code='BUILD-001'/>