@modern-js/main-doc 2.60.1 → 2.60.3

package/docs/en/apis/app/commands.mdx

@@ -153,28 +153,9 @@ The `--config` parameter needs to use a JSON string.
 pnpm does not support the use of JSON strings as parameter values currently. Use `npm new` to turn on.【[Relate Issue](https://github.com/pnpm/pnpm/issues/3876)】
 :::
 
-## modern serve
+import ServeCommand from "@site-docs-en/components/serve-command";
 
-The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
-
-```bash
-Usage: modern serve [options]
-
-Options:
-  -c --config <config>  specify the configuration file, which can be a relative or absolute path
-  -h, --help            show command help
-  --api-only            only run API service
-```
-
-By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```
+<ServeCommand />
 
 ## modern upgrade
 
@@ -249,3 +230,7 @@ Inspect config succeed, open following files to view the content:
   - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
   - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
+
+import DeployCommand from "@site-docs-en/components/deploy-command";
+
+<DeployCommand />

package/docs/en/components/deploy-command.mdx

@@ -0,0 +1,14 @@
+## modern deploy
+
+The `modern deploy` command is used to generate artifacts required for the deployment platform.
+
+```bash
+Usage: modern deploy [options]
+
+Options:
+  -c --config <config>  Specify configuration file path, either relative or absolute
+  -s --skip-build       Skip the build stage
+  -h, --help            Display command help
+```
+
+For more details, refer to [Deploy Application](/guides/basic-features/deploy).

package/docs/en/components/serve-command.mdx

@@ -0,0 +1,22 @@
+## modern serve
+
+The `modern serve` command is used to start a Modern.js project in the production environment. It can also be used to preview the artifacts built for the production environment locally. Please note that you need to execute the [`build`](/apis/app/commands#modern-build) command beforehand to generate the corresponding artifacts.
+
+```bash
+Usage: modern serve [options]
+
+Options:
+  -c --config <config>  specify the configuration file, which can be a relative or absolute path
+  -h, --help            show command help
+  --api-only            only run API service
+```
+
+By default, the project will run in `localhost:8080`, you can modify the server port number with `server.port`:
+
+```js
+export default defineConfig({
+  server: {
+    port: 8081,
+  },
+});
+```

package/docs/en/configure/app/dev/watch-files.mdx

@@ -8,12 +8,19 @@ configName: dev.watchFiles
 - **Type:**
 
 ```ts
-type WatchFiles = {
-  paths: string | string[];
-  type?: 'reload-page' | 'reload-server';
-  // watch options for chokidar
-  options?: WatchOptions;
-};
+type WatchFiles =
+  | {
+      paths: string | string[];
+      type?: 'reload-page';
+      // watch options for chokidar
+      options?: WatchOptions;
+    }
+  | {
+      paths: string | string[];
+      type?: 'reload-server';
+    };
+
+type WatchFilesConfig = WatchFiles | WatchFiles[];
 ```
 
 - **Default:** `undefined`

package/docs/en/configure/app/output/copy.mdx

@@ -1,5 +1,6 @@
 ---
 title: copy
+configName: output.copy
 ---
 
 # output.copy
@@ -9,4 +10,6 @@ title: copy
 
 Copies the specified file or directory to the dist directory, implemented based on [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin).
 
-For more detailed configuration, please refer to: [rspack.CopyRspackPlugin](https://rspack.dev/zh/plugins/rspack/copy-rspack-plugin).
+import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';
+
+<RsbuildConig />

package/docs/en/configure/app/output/inline-scripts.mdx

@@ -26,7 +26,7 @@ type InlineScripts =
 Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
 
 :::tip
-When using convention-based routing, you need to set [output.splitRouteChunks](https://modernjs.dev/en/configure/app/output/splitRouteChunks.html) to false if this option is turned on.
+When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
 import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';

package/docs/en/configure/app/output/inline-styles.mdx

@@ -26,7 +26,7 @@ type InlineStyles =
 Whether to inline output style files (.css files) into HTML with `<style>` tags.
 
 :::tip
-When using convention-based routing, you need to set [output.splitRouteChunks](https://modernjs.dev/en/configure/app/output/splitRouteChunks.html) to false if this option is turned on.
+When using convention-based routing, you need to set [output.splitRouteChunks](/configure/app/output/split-route-chunks) to false if this option is turned on.
 :::
 
 import RsbuildConig from '@site-docs-en/components/rsbuild-config-tooltip';

package/docs/en/configure/app/runtime/router.mdx

@@ -8,12 +8,16 @@ import RouterLegacyTip from "@site-docs-en/components/router-legacy-tip"
 
 <RouterLegacyTip />
 
-# runtime.router
-
 - **Type:** `boolean | Object`
 - **Default:** `false`
 
-When enabled, the router option provides routing management for Modern.js conventional routes. It is based on [React Router 6](https://reactrouter.com/).
+This value is set to `true` when the project is created, supporting the use of [conventional routing](/guides/concept/entries.html#约定式路由) provided by Modern.js for routing management.
+
+If you wish to use [controlled routing](/guides/concept/entries.html#自控式路由), please remove this value or set it to `false`.
+
+:::note
+All sub-configurations of `router` will only take effect when using conventional routing.
+:::
 
 ## basename
 
@@ -22,6 +26,10 @@ When enabled, the router option provides routing management for Modern.js conven
 
 The basename option specifies the subpath where the app is deployed, for situations where it cannot be deployed to the root domain.
 
+:::tip
+推荐使用 [`server.baseUrl`](/configure/app/server/base-url) 进行配置。
+:::
+
 ## supportHtml5History
 
 - **Type:** `boolean`

package/docs/en/configure/app/runtime/state.mdx

@@ -9,8 +9,6 @@ title: state
 
 Once `state` is enabled, you can use [Model](/guides/topic-detail/model/quick-start) for state management.
 
-The specific configuration options are as follows:
-
 ## models
 
 - **Type:** `Array<Model>`

package/docs/en/guides/concept/_meta.json

@@ -1 +1 @@
-["entries", "builder"]
+["entries", "builder", "server"]

package/docs/en/guides/concept/server.mdx

@@ -0,0 +1,35 @@
+# Web Server
+
+Modern.js provides an integrated Web server for applications that can run in any container environment with Node.js. Whether executing the `dev` command in a local development environment, running the `build && serve` commands in a production environment, or using the official deployment solution, it all runs through this Web server to host the application.
+
+## Underlying Dependencies
+
+Modern.js builds its Web server based on the [Hono framework](https://hono.dev/). Hono is a small, simple, and ultra-fast web standard-based framework that can run on any JavaScript runtime.
+
+## Development & Production
+
+The Web server flow in both Modern.js development and production environments is entirely isomorphic, so you don't need to worry about differences between them.
+
+As mentioned in the [Build Tools](/guides/concept/builder) section, Modern.js' underlying build capability is provided by Rsbuild, and some server-side capabilities in the development environment are coupled with the build tools, such as HMR. Modern.js needs to reuse these capabilities of the Rsbuild Dev Server.
+
+In the development environment, Modern.js directly uses the middlewares provided by Rsbuild, which includes capabilities needed during the development stage such as HMR and Proxy. Additionally, Modern.js provides capabilities such as Mock, routing, and rendering on top of this:
+
+![Server](https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/web-server-modern.jpeg)
+
+Therefore, in Modern.js, the development environment merely adds middleware to the production environment. All capabilities of the production environment are also applicable in the development environment, ensuring no fragmentation between the two.
+
+:::tip
+Static asset files can be directly hosted by Modern.js' server, but it is highly recommended to upload these files to a CDN in a production environment.
+:::
+
+## Running in CI Environments
+
+Modern.js supports running built artifacts in any Node.js environment. Typically, the CI environment has already installed all application dependencies.
+
+You can run the [`modern build`](/apis/app/commands#modern-build) command to build the application and the [`modern serve`](/apis/app/commands#modern-serve) command to run the Web server, starting the Modern.js application.
+
+## Running in Production Environments
+
+When deploying to production, the artifact size should be as small as possible. The aforementioned method for running in CI environments keeps all artifacts from the original project. Therefore, it is not recommended to run the application using the above commands in a production environment.
+
+Modern.js offers a standalone deployment solution. When running the [`modern deploy`](/apis/app/commands#modern-deploy) command, the artifacts will include an entry file for running the Web server.

package/docs/en/guides/topic-detail/_meta.json

@@ -1,4 +1,10 @@
 [
+  {
+    "type": "dir",
+    "name": "module-federation",
+    "label": "module-federation",
+    "collapsed": true
+  },
   {
     "type": "dir",
     "name": "micro-frontend",

package/docs/en/guides/topic-detail/module-federation/_meta.json

@@ -0,0 +1 @@
+["introduce", "usage", "application", "ssr", "deploy"]

package/docs/en/guides/topic-detail/module-federation/application.mdx

@@ -0,0 +1,112 @@
+# Application-Level Modules
+
+Modern.js provides runtime APIs to quickly export application-level Module Federation modules from your application.
+
+We use the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage) as an example to further explain how to import application-level modules.
+
+## Install Dependencies
+
+Building on the existing application, we need to install the `@module-federation/bridge-react` dependency to use Bridge for loading application-level modules.
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @module-federation/bridge-react" />
+
+## Exporting Modules from Producer
+
+Unlike directly exporting component-level modules, we need to create a separate entry for application-level modules to be exported via `Module Federation`.
+
+We create the `src/export-App.tsx` file:
+
+:::note
+The filename can be arbitrary; Modern.js does not enforce a specific naming convention.
+:::
+
+```ts title="src/export-App.tsx"
+import '@modern-js/runtime/registry/main'; // This line must be included, it will import micro frontend runtime dependencies by default
+import { render } from '@modern-js/runtime/browser';
+import { createRoot } from '@modern-js/runtime/react';
+import { createBridgeComponent } from '@module-federation/bridge-react';
+
+const ModernRoot = createRoot();
+export const provider = createBridgeComponent({
+  rootComponent: ModernRoot,
+  render: (Component, dom) => render(Component, dom),
+});
+
+export default provider;
+```
+
+This file will pass the root component of the `main` entry application to the Bridge API and render it to the specified node via Bridge's render function.
+
+Next, we configure `module-federation.config.ts` to modify the export to `src/export-App.tsx`:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './app': './src/export-App.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+:::info
+[`createBridgeComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createbridgecomponent) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render).
+:::
+
+## Using Modules in Consumer
+
+We then modify the consumer configuration by removing the previously created `src/routes/remote/page.tsx` route file.
+
+We want all routes that access `/remote` to enter the aforementioned application-level module, so we add `src/routes/remote/$.tsx` instead.
+
+:::note
+If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard Routes](/guides/basic-features/routes.html#通配路由).
+:::
+
+```tsx title="src/routes/remote/$.tsx"
+import { createRemoteComponent } from '@module-federation/bridge-react';
+import { loadRemote } from '@module-federation/modern-js/runtime';
+
+const ErrorBoundary = (info?: { error: { message: string } }) => {
+  return (
+    <div>
+      <h2>This is ErrorBoundary Component, Something went wrong:</h2>
+      <pre style={{ color: 'red' }}>{info?.error.message}</pre>
+    </div>
+  );
+};
+const Loading = <div>loading...</div>;
+const RemoteApp = createRemoteComponent({
+  loader: () => loadRemote('remote/app'),
+  fallback: ErrorBoundary,
+  loading: Loading,
+});
+
+export default RemoteApp;
+```
+
+:::info
+[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) is used to load application-level modules.
+:::
+
+## Start the Application
+
+Now, both the producer and consumer applications are set up. We can run `modern dev` locally to start both applications.
+
+After startup, when the consumer application accesses the `/remote` route, it will enter the producer application. Accessing `http://localhost:8080/remote` will display a complete page of the producer's remote module in the browser.
+
+You can create new route files in the producer application and add route navigation in the code. These functionalities will also work as expected.
+
+You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export).
+
+## Related Documentation
+
+- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html)

package/docs/en/guides/topic-detail/module-federation/deploy.mdx

@@ -0,0 +1,28 @@
+# Deployment
+
+Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address.
+
+For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://my-remote-module/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment.
+
+## Deployment via Platform
+
+The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues.
+
+We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms.

package/docs/en/guides/topic-detail/module-federation/introduce.mdx

@@ -0,0 +1,35 @@
+# Introduction
+
+Module Federation is an architectural pattern for dividing JavaScript applications, allowing you to share code and resources among multiple JavaScript applications.
+
+In this divided model, it can help improve application performance, enhance code maintainability, and more.
+
+## Module Federation 2.0
+
+Module Federation, a highlight feature introduced with Webpack 5, has been around for more than three years. This year, ByteDance, along with the author of Module Federation, [@Zack Jackson](https://github.com/ScriptedAlchemy), and community members jointly launched **Module Federation 2.0**.
+
+Module Federation 2.0 is based on internal practices at ByteDance and the existing community ecosystem of Module Federation, addressing many issues in the previous version.
+
+Within ByteDance, frameworks based on Modern.js have already deeply integrated with Module Federation 2.0. We are gradually integrating these features into Modern.js and hope to explore the future together with community developers.
+
+:::info
+Refer to [Module Federation 2.0 Announcement](https://module-federation.io/zh/blog/announcement.html) for more related content.
+:::
+
+## Modern.js MF Plugin
+
+Based on internal practices at ByteDance, the Module Federation team officially provides the [Modern.js Plugin](https://www.npmjs.com/package/@module-federation/modern-js) to help developers use Module Federation more easily.
+
+The plugin recognizes the current build engine (Webpack or Rspack), injects the corresponding Module Federation plugin into Modern.js applications, and automatically handles build configurations and adds runtime code.
+
+Moreover, the plugin also supports the use of Module Federation in Modern.js SSR applications, providing a better performance experience.
+
+For more details, refer to [Using Module Federation](/guides/topic-detail/module-federation/usage) and [Module Federation Server-Side Rendering](/guides/topic-detail/module-federation/ssr).
+
+## Application-Level Modules
+
+**Application-level modules** possess the application's framework rendering capabilities and routing capabilities, allowing them to operate like applications. Application-level modules are a crucial capability in **micro-frontend frameworks**, providing the ability to load and render across application frameworks (React, Vue) and supporting the loading of modules with routing.
+
+Module Federation 2.0 offers the [Bridge](https://module-federation.io/zh/practice/bridge/index.html) capability to load application-level modules.
+
+Modern.js, based on Bridge and its internal implementation, provides APIs to easily export application-level modules. For more details, refer to [Application-Level Modules](/guides/topic-detail/module-federation/application).

package/docs/en/guides/topic-detail/module-federation/ssr.mdx

@@ -0,0 +1,31 @@
+# Server-Side Rendering
+
+`@module-federation/modern-js` offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications.
+
+## Enable SSR
+
+Using the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage) as an example, you only need to add the `server.ssr` configuration to both the producer and the consumer:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  server: {
+    ssr: {
+      mode: 'stream',
+    },
+  },
+});
+```
+
+For better performance, we only support using this capability combination in Streaming SSR scenarios.
+
+:::warning
+Currently, `@module-federation/bridge-react` is not compatible with the Node environment. You must remove it from the dependencies to use Module Federation and server-side rendering correctly. This means Bridge cannot work with server-side rendering.
+:::
+
+## Data Fetching
+
+:::note
+Stay tuned
+:::

package/docs/en/guides/topic-detail/module-federation/usage.mdx

@@ -0,0 +1,180 @@
+# Getting Started
+
+To use Module Federation in Modern.js, we recommend using the official plugin `@module-federation/modern-js`.
+
+This section will introduce how to set up both producer and consumer applications using the official plugin. First, create two applications by following the [Modern.js Quick Start](/guides/get-started/quick-start).
+
+## Install the Plugin
+
+After creating the applications, install the plugin for both projects:
+
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add @module-federation/modern-js" />
+
+## Register the Plugin
+
+After installing the plugin, you need to register it in the `modern.config.js` file:
+
+```ts
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+```
+
+## Export Modules from Producer
+
+Next, modify the producer's code to export the Module Federation module.
+
+Create the `src/components/Button.tsx` file and export a Button component:
+
+```tsx title="src/components/Button.tsx"
+import React from 'react';
+
+export const Button = () => {
+  return <button type="button">Remote Button</button>;
+};
+```
+
+Then, add the `module-federation.config.ts` file at the project root to configure the Module Federation module's name, shared dependencies, and exports:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'remote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './Button': './src/components/Button.tsx',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+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"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+import { moduleFederationPlugin } from '@module-federation/modern-js';
+
+export default defineConfig({
+  dev: {
+    port: 3051,
+  },
+  runtime: {
+    router: true,
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+    moduleFederationPlugin(),
+  ],
+});
+```
+
+## Use Modules in Consumer
+
+Now, modify the consumer's code to use the module exported by the producer.
+
+Add the `module-federation.config.ts` file at the project root to configure the Module Federation module's name, shared dependencies, and the remote module to use:
+
+```ts title="module-federation.config.ts"
+import { createModuleFederationConfig } from '@module-federation/modern-js';
+
+export default createModuleFederationConfig({
+  name: 'host',
+  remotes: {
+    remote: 'remote@http://localhost:3051/mf-manifest.json',
+  },
+  shared: {
+    react: { singleton: true },
+    'react-dom': { singleton: true },
+  },
+});
+```
+
+`mf-manifest.json` is the file produced by the producer after packaging, containing all the information about the modules exported by the producer.
+
+Create a new route file `src/routes/remote/page.tsx` and import the producer module:
+
+```tsx title="src/routes/remote/page.tsx"
+import React, { useState, Suspense } from 'react';
+import { Button } from 'remote/Button';
+
+const Index = (): JSX.Element => {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Button />
+      </Suspense>
+    </div>
+  );
+};
+
+export default Index;
+```
+
+At this point, importing `remote/Button` will result in a type error because the local environment doesn't have the type for the remote module. Module Federation 2.0 provides [type hints](https://module-federation.io/zh/guide/basic/type-prompt.html), which will automatically generate type definitions for remote modules during the producer's build and download them during the consumer's build.
+
+To ensure the types take effect, add a new `path` in `tsconfig.json`:
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "paths": {
+      "*": ["./@mf-types/*"]
+    }
+  }
+}
+```
+
+:::tip
+In the consumer, we reference the remote module using `remote/Button`. Here's a brief explanation of what this path specifically represents. You can abstract it as `[remoteAlias]/[remoteExpose]`.
+
+The first part, `remoteAlias`, is the alias of the producer in the consumer. It is the `key` configured in the `remotes` field of the consumer's `module-federation.config.ts`:
+
+```ts
+{
+  remotes: {
+    [remoteAlias]: '[remoteModuleName]@[URL_ADDRESS]',
+  }
+}
+```
+
+Here, we also abstract the remote address as `[remoteModuleName]@[URL_ADDRESS]`. The part before `@` must correspond to the module name of the producer.
+
+The second part, `remoteExpose`, is the `key` configured in the `exposes` field of the producer's `module-federation.config.ts`.
+:::
+
+## Start the Applications
+
+Now, both the producer and consumer applications are set up. You can run `modern dev` locally to start both applications.
+
+Once started, the imports of the producer's modules in the consumer will no longer throw errors, and the types will be downloaded to the consumer application.
+
+:::note
+After modifying the producer's code, the consumer will automatically fetch the producer's types.
+:::
+
+Access `http://localhost:8080/remote`, and you will see that the page includes the `Button` component from the producer's remote module.
+
+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)

package/docs/zh/apis/app/commands.mdx

@@ -153,28 +153,9 @@ pnpm 暂不支持使用 JSON 字符串作为参数值，可使用 `npm new` 开
 
 :::
 
-## modern serve
+import ServeCommand from "@site-docs/components/serve-command";
 
-`modern serve` 命令用于在生产环境下启动 Modern.js 工程, 也可以用于在本地预览生产环境构建的产物。注意你需要提前执行 [`build`](/apis/app/commands#modern-build) 命令构建出对应产物。
-
-```bash
-Usage: modern serve [options]
-
-Options:
-  -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
-  -h, --help            显示命令帮助
-  --api-only            仅启动 API 接口服务
-```
-
-默认情况下，应用将会在 `localhost:8080` 启动，可以通过 `server.port` 修改 Server 端口号：
-
-```js
-export default defineConfig({
-  server: {
-    port: 8081,
-  },
-});
-```
+<ServeCommand />
 
 ## modern upgrade
 
@@ -249,3 +230,7 @@ Inspect config succeed, open following files to view the content:
   - Webpack Config (web): /root/my-project/dist/webpack.config.web.mjs
   - Webpack Config (node): /root/my-project/dist/webpack.config.node.mjs
 ```
+
+import DeployCommand from "@site-docs/components/deploy-command";
+
+<DeployCommand />