feat(cli): support dev --port/host and preview --port/host (#745)

Author: Timeless0911

.changeset/empty-lions-float.md

@@ -0,0 +1,5 @@
+---
+'@rsbuild/core': patch
+---
+
+feat(cli): cli support `dev --port/--host` and `preview --port/--host`

packages/core/src/cli/commands.ts

@@ -8,6 +8,8 @@ import type { RsbuildMode } from '..';
 export type CommonOptions = {
   config?: string;
   open?: boolean;
+  host?: string;
+  port?: number;
 };
 
 export type BuildOptions = CommonOptions & {
@@ -47,6 +49,16 @@ export async function init({
       config.dev.startUrl = true;
     }
 
+    if (commonOpts.host) {
+      config.server ||= {};
+      config.server.host = commonOpts.host;
+    }
+
+    if (commonOpts.port) {
+      config.server ||= {};
+      config.server.port = commonOpts.port;
+    }
+
     return await createRsbuild({
       rsbuildConfig: config,
       provider: config.provider,
@@ -66,6 +78,14 @@ export function runCli() {
   program
     .command('dev')
     .option('--open', 'open the page in browser on startup')
+    .option(
+      '--port <port>',
+      'specify a port number for Rsbuild Server to listen',
+    )
+    .option(
+      '--host <host>',
+      'specify the host that the Rsbuild Server listens to',
+    )
     .option(
       '-c --config <config>',
       'specify the configuration file, can be a relative or absolute path',
@@ -106,6 +126,14 @@ export function runCli() {
   program
     .command('preview')
     .option('--open', 'open the page in browser on startup')
+    .option(
+      '--port <port>',
+      'specify a port number for Rsbuild Server to listen',
+    )
+    .option(
+      '--host <host>',
+      'specify the host that the Rsbuild Server listens to',
+    )
     .option(
       '-c --config <config>',
       'specify the configuration file, can be a relative or absolute path',

packages/document/docs/en/guide/basic/cli.mdx

@@ -13,6 +13,8 @@ Usage: rsbuild dev [options]
 
 Options:
   --open                open the page in browser on startup
+  --port <port>         specify a port number for Rsbuild Server to listen
+  --host <host>         specify the host that the Rsbuild Server listens to
   -c --config <config>  specify the configuration file, can be a relative or absolute path
   -h, --help            display help for command
 ```
@@ -39,6 +41,8 @@ Usage: rsbuild preview [options]
 
 Options:
   --open                open the page in browser on startup
+  --port <port>         specify a port number for Rsbuild Server to listen
+  --host <host>         specify the host that the Rsbuild Server listens to
   -c --config <config>  specify the configuration file, can be a relative or absolute path
   -h, --help            display help for command
 ```

packages/document/docs/en/shared/config/server/host.md

@@ -5,6 +5,8 @@ Specify the host that the Rsbuild Server listens to.
 
 By default, the Rsbuild Server will listen to `0.0.0.0`, which means listening to all network interfaces, including `localhost` and public network addresses.
 
+You can use `server.host` or the `--host` CLI param to set the host (The priority of `--host` option is higher than `server.host`).
+
 If you want the Rsbuild Server to listen only on `localhost`, you can set it to:
 
 ```ts

packages/document/docs/en/shared/config/server/port.md

@@ -5,6 +5,8 @@ Specify a port number for Rsbuild Server to listen.
 
 By default, Rsbuild Server listens on port `8080` and automatically increments the port number when the port is occupied.
 
+You can use `server.port` or the `--port` CLI param to set the port number (The priority of `--port` option is higher than `server.port`).
+
 ### Example
 
 Set the port to `3000`:

packages/document/docs/zh/guide/basic/cli.mdx

@@ -13,6 +13,8 @@ Usage: rsbuild dev [options]
 
 Options:
   --open                启动时是否在浏览器中打开页面
+  --port <port>         设置 Rsbuild Server 监听的端口号
+  --host <host>         指定 Rsbuild Server 启动时监听的 host
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
   -h, --help            显示命令帮助
 ```
@@ -39,6 +41,8 @@ Usage: rsbuild preview [options]
 
 Options:
   --open                启动时是否在浏览器中打开页面
+  --port <port>         设置 Rsbuild Server 监听的端口号
+  --host <host>         指定 Rsbuild Server 启动时监听的 host
   -c --config <config>  指定配置文件路径，可以为相对路径或绝对路径
   -h, --help            显示命令帮助
 ```

packages/document/docs/zh/shared/config/server/host.md

@@ -5,6 +5,8 @@
 
 默认情况下，Rsbuild Server 会监听 `0.0.0.0`，这代表监听所有的网络接口，包括 `localhost` 和公网地址。
 
+你可以使用 `server.host` 配置或 `--host` 参数来指定 host (`--host` 参数的优先级高于 `server.host` 配置)。
+
 如果你希望 Rsbuild Server 只监听 `localhost`，可以设置为：
 
 ```ts

packages/document/docs/zh/shared/config/server/port.md

@@ -5,6 +5,8 @@
 
 默认情况下，Rsbuild Server 会监听 8080 端口，并在端口被占用时自动递增端口号。
 
+你可以使用 `server.port` 配置或 `--port` 参数来设置端口号 (`--port` 参数的优先级高于 `server.port` 配置)。
+
 ### 示例
 
 将端口设置为 `3000`：