server.open#

• Type:

type Open =
  | boolean
  | string
  | string[]
  | {
      target?: string | string[];
      before?: () => Promise<void> | void;
    };

• Default: undefined
• Version: >= 0.7.4

server.open is used to configure a set of page URLs that Rsbuild will automatically open in the browser after starting the server.

You can also use the --open option of Rsbuild CLI to open the pages.

Example#

server.open can be set to the following values.

• Open the project's default preview page, equivalent to http://localhost:<port>:

export default {
  server: {
    open: true,
  },
};

• Open the specified page:

export default {
  server: {
    open: 'http://localhost:3000',
  },
};

• Open the specified path, equivalent to http://localhost:<port>/home:

export default {
  server: {
    open: '/home',
  },
};

• Open multiple pages:

export default {
  server: {
    open: ['/', '/about'],
  },
};

• Open a non-localhost URL (used with proxy):

export default {
  server: {
    open: 'http://www.example.com',
  },
};

Port placeholder#

Since the port number may change, you can use the <port> placeholder to refer to the current port number, and Rsbuild will automatically replace the placeholder with the actual listening port number.

export default {
  server: {
    open: 'http://localhost:<port>/home',
  },
};

Open the specified browser#

Rsbuild by default will open the page in the system's default browser.

On macOS, you can open the specified browser when Dev Server starts, by set environment variable BROWSER, support values:

• Google Chrome Canary
• Google Chrome Dev
• Google Chrome Beta
• Google Chrome
• Microsoft Edge
• Brave Browser
• Vivaldi
• Chromium

For example:

BROWSER="Google Chrome Canary" npx rsbuild dev --open

Callback#

By using open.before, you can trigger a callback function before opening the page.

export default {
  server: {
    open: {
      before: async () => {
        await doSomeThing();
      },
    },
  },
};

When using open.before, the page URLs can be configured via open.target.

export default {
  server: {
    open: {
      target: ['/', '/about'],
      before: async () => {
        await doSomeThing();
      },
    },
  },
};