docs: update mf usage docs, add static dir (#6926)

Author: zllkjc

packages/document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx

@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 
 export default createModuleFederationConfig({
   name: 'remote',
-  filename: 'remoteEntry.js',
+  manifest: {
+    filePath:'static',
+  },
+  filename: 'static/remoteEntry.js',
   exposes: {
     './app': './src/export-App.tsx',
   },
@@ -109,4 +112,4 @@ You can refer to the example here: [Modern.js & Module Federation Application-Le
 
 ## Related Documentation
 
-- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
+- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)

packages/document/main-doc/docs/en/guides/topic-detail/module-federation/usage.mdx

@@ -54,7 +54,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 
 export default createModuleFederationConfig({
   name: 'remote',
-  filename: 'remoteEntry.js',
+  manifest: {
+    filePath: 'static',
+  },
+  filename: 'static/remoteEntry.js',
   exposes: {
     './Button': './src/components/Button.tsx',
   },
@@ -65,6 +68,10 @@ export default createModuleFederationConfig({
 });
 ```
 
+:::tip
+In the above code block, we have prefixed both the manifest and remoteEntry.js exported by Module Federation with `static`. This is because Modern.js requires all resources that need to be exposed to be placed in the `static/` directory, and Modern.js's server will only host the `static/` directory in production environments.
+:::
+
 Additionally, modify `modern.config.ts` to provide a development environment port for the producer, allowing the consumer to access the producer's resources through this port:
 
 ```ts title="modern.config.ts"
@@ -99,7 +106,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://localhost:3051/mf-manifest.json',
+    remote: 'remote@http://localhost:3051/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -173,8 +180,45 @@ After modifying the producer's code, the consumer will automatically fetch the p
 
 Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
 
+We can also execute `modern serve` locally to simulate the production environment.
+
+Because the Module Federation plugin will automatically read Modern.js's `output.assetPrefix` configuration as the access address for remote modules, and this value defaults to `/` after building in the production environment.
+
+If we want to simulate the production environment in local, but not configure `output.assetPrefix`, consumers will pull the entry file of the remote module from their own domain. So We can add the following configuration:
+
+```ts
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+const isLocal = process.env.IS_LOCAL === 'true';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  server: {
+    port: 3051,
+  },
+  runtime: {
+    router: true,
+  },
+  output: {
+    // Now this configuration is only used in the local when you run modern serve command.
+    // If you want to deploy the application to the platform, use your own domain name.
+    // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
+    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+```
+
+Now, in the producer, run `IS_LOCAL=true modern build && modern serve`, and in the consumer, run `modern build && modern serve` to simulate the production environment locally and access the remote modules.
+
 You can refer to this example: [Modern.js & Module Federation Basic Example](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base).
 
 ## Related Documentation
 
-- [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)
+- [Module Federation Official Documentation](https://module-federation.io/zh/guide/framework/modernjs.html)

packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/application.mdx

@@ -46,7 +46,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 
 export default createModuleFederationConfig({
   name: 'remote',
-  filename: 'remoteEntry.js',
+  manifest: {
+    filePath:'static',
+  },
+  filename: 'static/remoteEntry.js',
   exposes: {
     './app': './src/export-App.tsx',
   },
@@ -109,4 +112,4 @@ export default RemoteApp;
 
 ## 相关文档
 
-- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)
+- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)

packages/document/main-doc/docs/zh/guides/topic-detail/module-federation/usage.mdx

@@ -55,7 +55,10 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 
 export default createModuleFederationConfig({
   name: 'remote',
-  filename: 'remoteEntry.js',
+  manifest: {
+    filePath: 'static',
+  },
+  filename: 'static/remoteEntry.js',
   exposes: {
     './Button': './src/components/Button.tsx',
   },
@@ -66,6 +69,10 @@ export default createModuleFederationConfig({
 });
 ```
 
+:::tip
+在上述代码块中，我们为 Module Federation 导出的 manifest 和 remoteEntry.js 都设置了 `static` 前缀，这是因为 Modern.js 要求将所有需要暴露的资源都放在 `static/` 目录下，Modern.js 的服务器在生产环境时也只会托管 `static/` 目录。
+:::
+
 另外，我们还需要修改 `modern.config.ts`，为生产者提供一个开发环境的端口，让消费者可以通过此端口访问生产者的资源：
 
 ```ts title="modern.config.ts"
@@ -100,7 +107,7 @@ import { createModuleFederationConfig } from '@module-federation/modern-js';
 export default createModuleFederationConfig({
   name: 'host',
   remotes: {
-    remote: 'remote@http://localhost:3051/mf-manifest.json',
+    remote: 'remote@http://localhost:3051/static/mf-manifest.json',
   },
   shared: {
     react: { singleton: true },
@@ -142,7 +149,7 @@ export default Index;
     }
   }
 }
-``` 
+```
 
 :::tip
 在消费者中，我们通过 `remote/Button` 来引用远程模块。这里简单介绍下这个路径具体代表了什么，可以先将它抽象成 `[remoteAlias]/[remoteExpose]`。
@@ -174,8 +181,43 @@ export default Index;
 
 访问 `http://localhost:8080/remote`，可以看到页面中已经包含了生产者的远程模块 `Button` 组件。
 
+我们也可以在本地执行 `modern serve` 来模拟生产环境。
+
+因为 Module Federation 插件会自动读取 Modern.js 的 `output.assetPrefix` 配置作为远程模块的访问地址，而该值在生产环境下构建后默认是 `/`。如果不做特殊处理，消费者将从自己的域名下拉取远程模块的入口文件。我们可以添加如下配置：
+
+```ts
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+const isLocal = process.env.IS_LOCAL === 'true';
+
+// https://modernjs.dev/en/configure/app/usage
+export default defineConfig({
+  server: {
+    port: 3051,
+  },
+  runtime: {
+    router: true,
+  },
+  output: {
+    // Now this configuration is only used in the local when you run modern serve command.
+    // If you want to deploy the application to the platform, use your own domain name.
+    // Module federation will automatically write it to mf-manifest.json, which influences consumer to fetch remoteEntry.js.
+    assetPrefix: isLocal ? 'http://127.0.0.1:3051' : '/',
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack', // Set to 'webpack' to enable webpack
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+```
+
+现在，在生产者中运行 `IS_LOCAL=true modern build && modern serve`，在消费者中运行 `modern build && modern serve`，即可在本地模拟生产环境，访问到远程模块。
+
 上述用例可以参考：[Modern.js & Module Federation 基础用法示例](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/base)。
 
 ## 相关文档
 
-- [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)
+- [Module Federation 官方文档](https://module-federation.io/zh/guide/framework/modernjs.html)