Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions website/docs/en/guide/advanced/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Rsbuild supports building outputs for multiple environments at the same time. Yo

## What is environment

The `environment` refers to the runtime environment for build output. Common environments include browsers, Node.js, and Workers. Rsbuild allows you to define any environment names and set build options for each environment individually.
The `environment` refers to the runtime environment for build output. Common environments include browsers, Node.js, and Workers. Rsbuild allows you to define custom environment names and set build options for each environment individually.

A typical scenario is server-side rendering (SSR). You can define two environments, `web` and `node`, where the build targets ([output.target](/config/output/target)) are `web` and `node`. These are used for client-side rendering (CSR) and server-side rendering (SSR) scenarios.

Expand All @@ -13,15 +13,15 @@ You can also define different environments for the same build target, for exampl
- Define `rsc` and `ssr` environments, both targeting `node`, used separately for React Server Components and SSR.
- Define `desktop` and `mobile` environments, both targeting `web`, used separately for desktop and mobile browsers.

Without the `environments` configuration, you would need to define multiple configurations for these scenarios and run multiple independent Rsbuild builds. Now, with the `environments` configuration, you can complete the build for multiple outputs in a single Rsbuild run (Rsbuild achieves this using Rspack's [MultiCompiler](https://rspack.rs/api/javascript-api/compiler#multicompiler)).
Without the `environments` configuration, you would need to define multiple configurations for these scenarios and run multiple independent Rsbuild builds. With the `environments` configuration, you can complete the build for multiple outputs in a single Rsbuild run (Rsbuild achieves this using Rspack's [MultiCompiler](https://rspack.rs/api/javascript-api/compiler#multicompiler)).

In Rsbuild, each `environment` is associated with an Rsbuild configuration, an Rspack configuration, and a set of build outputs. Rsbuild plugin developers can customize the build process for a specified environment based on the `environment` name, such as modifying Rsbuild or Rspack configurations, registering or removing plugins, adjusting Rspack rules, and viewing assets information.

## Environment configs

Rsbuild supports defining different Rsbuild configurations for each environment through [environments](/config/environments).

For example, if your project wants to support the SSR function, you need to define different configurations for client and SSR respectively. You can define web and node environments.
For example, if your project needs SSR support, you need to define different configurations for the client and server. You can define web and node environments.

```ts title="rsbuild.config.ts"
export default {
Expand Down Expand Up @@ -77,7 +77,7 @@ Then, Rsbuild will use these environment configurations to internally generate t

### Debug config

When you execute the command `npx rsbuild inspect` in the project root directory, you will find the following output:
When you execute the command `npx rsbuild inspect` in the project root directory, you will see the following output:

- `rsbuild.config.[name].mjs`: The Rsbuild config used for a certain environment during build.
- `rspack.config.[name].mjs`: The Rspack config corresponding to a certain environment when building.
Expand All @@ -95,7 +95,7 @@ config inspection completed, generated files:

## Default environment

When environments is not specified, Rsbuild will by default create an environment with the same name based on the currently target type (the value of [output.target](/config/output/target)).
When environments is not specified, Rsbuild creates an environment by default with the same name as the current target type (the value of [output.target](/config/output/target)).

```ts title="rsbuild.config.ts"
export default {
Expand Down
14 changes: 7 additions & 7 deletions website/docs/en/guide/advanced/hmr.mdx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Hot module replacement

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application runs, without a full reload. This significantly speeds up development in several ways:
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full page reload. This significantly speeds up development in several ways:

- Retain application state that is lost during a full reload.
- Save valuable development time by updating only what changed.
- Instantly update the browser when modifying CSS / JS in source code, almost comparable to changing styles directly in the browser's dev tools.
- Preserves application state that would be lost during a full reload.
- Saves valuable development time by updating only what changed.
- Instantly updates the browser when modifying CSS/JS in source code, similar to changing styles directly in the browser's dev tools.
Copy link

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The removal of the space in 'CSS / JS' to 'CSS/JS' is inconsistent with the original formatting style. This spacing change should be reverted to maintain consistency with the rest of the documentation, which typically uses spaces around separators for better readability.

Suggested change
- Instantly updates the browser when modifying CSS/JS in source code, similar to changing styles directly in the browser's dev tools.
- Instantly updates the browser when modifying CSS / JS in source code, similar to changing styles directly in the browser's dev tools.

Copilot uses AI. Check for mistakes.

## HMR toggle

Expand All @@ -20,7 +20,7 @@ export default {
};
```

To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. Then, no WebSocket requests will be made from the page to the dev server, and the page won't automatically refresh when files change.
To disable both HMR and live reload, set both [dev.hmr](/config/dev/hmr) and [dev.liveReload](/config/dev/live-reload) to `false`. This prevents WebSocket requests from the page to the dev server, and the page won't automatically refresh when files change.

```ts title="rsbuild.config.ts"
export default {
Expand Down Expand Up @@ -50,9 +50,9 @@ export default {

## File watching

By default, Rsbuild doesn't watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild won't trigger a rebuild. This reduces memory usage and improves build performance.
By default, Rsbuild doesn't watch files in the `.git/` and `node_modules/` directories. When files in these directories change, Rsbuild won't trigger a rebuild, which reduces memory usage and improves build performance.

If you want to watch these directories, you can manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior.
If you want to watch these directories, manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior.

For example, to watch the `node_modules/` directory and ignore the `.git/` directory, you can configure it as follows:

Expand Down
6 changes: 3 additions & 3 deletions website/docs/en/guide/advanced/ssr.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@

This chapter introduces how to implement SSR functionality using Rsbuild.

Please note that Rsbuild itself does not provide out-of-the-box SSR functionality, but instead provides low-level APIs and configurations to allow framework developers to implement SSR. If you require out-of-the-box SSR support, you may consider using full-stack frameworks based on Rsbuild, such as [Modern.js](https://github.com/web-infra-dev/modern.js).
Please note that Rsbuild itself does not provide out-of-the-box SSR functionality, but provides low-level APIs and configurations to allow framework developers to implement SSR. If you need out-of-the-box SSR support, consider using full-stack frameworks based on Rsbuild, such as [Modern.js](https://github.com/web-infra-dev/modern.js).

## What is SSR

SSR stands for "Server-Side Rendering". It means that the HTML of the web page is generated by the server and sent to the client, rather than sending only an empty HTML shell and relying on JavaScript to generate the page content.

In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, then fetches data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and is not conducive to user experience and SEO.
In traditional client-side rendering, the server sends an empty HTML shell and some JavaScript scripts to the client, which then fetches data from the server's API and fills the page with dynamic content. This leads to slow initial page loading times and negatively impacts user experience and SEO.

With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
Copy link

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The removal of 'the' before 'initial page loading' changes the sentence to use a noun phrase instead of a definite article. While grammatically acceptable, 'the initial page loading' is more natural in this context and should be retained for consistency with standard English usage.

Suggested change
With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.
With SSR, the server generates HTML that already contains dynamic content and sends it to the client. This makes the initial page loading faster and more SEO-friendly, as search engines can crawl the rendered page.

Copilot uses AI. Check for mistakes.

## File structure

Expand Down
18 changes: 9 additions & 9 deletions website/docs/en/guide/basic/server.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Rsbuild includes a built-in dev server that enhances the development experience.

By default, the Rsbuild server's base path is `/`. You can access output files like `index.html` and [public folder](/guide/basic/static-assets#public-folder) assets at `http://localhost:3000/`.

You can modify the server's base path using [server.base](/config/server/base). For example, to access files at `http://localhost:3000/foo/`, configure it as follows:
Modify the server's base path using [server.base](/config/server/base). For example, to access files at `http://localhost:3000/foo/`, configure it as follows:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -18,7 +18,7 @@ export default {

## View static assets

After starting the dev server, you can access `/rsbuild-dev-server` to view all static assets generated during the current build.
After starting the dev server, access `/rsbuild-dev-server` to view all static assets generated during the current build.

For example, open `http://localhost:3000/rsbuild-dev-server` in your browser:

Expand All @@ -36,9 +36,9 @@ The Rsbuild server provides default routing conventions and allows customization

The Rsbuild server generates page routes based on the [server.base](/config/server/base) and [source.entry](/config/source/entry) configurations.

When the entry is `index`, you can access the page at `/`. When the entry is `foo`, you can access the page at `/foo`.
When the entry is `index`, access the page at `/`. When the entry is `foo`, access the page at `/foo`.

When `server.base` is `/base`, you can access the index page at `/base`, and the foo page at `/base/foo`.
When `server.base` is `/base`, access the index page at `/base`, and the foo page at `/base/foo`.

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -60,7 +60,7 @@ If a request meets the following conditions but no corresponding static asset is

### Custom fallback behavior

If Rsbuild's default [server.htmlFallback](/config/server/html-fallback) configuration doesn't meet your needs (for example, if you want to access `main.html` when accessing `/`), you can configure it using [server.historyApiFallback](/config/server/history-api-fallback).
If Rsbuild's default [server.htmlFallback](/config/server/html-fallback) configuration doesn't meet your needs (for example, to access `main.html` when accessing `/`), configure it using [server.historyApiFallback](/config/server/history-api-fallback).

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -80,11 +80,11 @@ export default {

### HTML output path

Normally, `/` points to the dist root directory, and HTML files are output to the dist root directory. In this case, you can access HTML pages at `/some-path`.
Normally, `/` points to the dist root directory, and HTML files are output to the dist root directory. In this case, access HTML pages at `/some-path`.

If you output HTML files to other subdirectories by modifying [output.distPath.html](/config/output/dist-path), you need to access HTML pages at `/[htmlPath]/some-path`.

For example, if you set HTML files to output to the `HTML` directory, you can access index.html at `/html/`, and foo.html at `/html/foo`.
For example, if you set HTML files to output to the `HTML` directory, access index.html at `/html/`, and foo.html at `/html/foo`.

```ts
export default {
Expand Down Expand Up @@ -191,7 +191,7 @@ server.middlewares.use((req, res, next) => {

When migrating from other server frameworks (such as Express), the original middleware may not work directly in Rsbuild. For example, Express-specific properties like `req.params`, `req.path`, `req.search`, and `req.query` are not available in Rsbuild middleware.

If you need to reuse existing middleware in Rsbuild, you can integrate the entire server application as middleware using the following approach:
To reuse existing middleware in Rsbuild, integrate the entire server application as middleware using the following approach:

```ts title="rsbuild.config.ts"
import express from 'express';
Expand All @@ -213,6 +213,6 @@ export default {

## Custom server

If you want to integrate Rsbuild's dev server into a custom server, you can use the `createDevServer` method to get the Rsbuild dev server instance and call its methods as needed.
To integrate Rsbuild's dev server into a custom server, use the `createDevServer` method to get the Rsbuild dev server instance and call its methods as needed.

For details, refer to [Rsbuild - createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver).
12 changes: 6 additions & 6 deletions website/docs/en/guide/basic/static-deploy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This section introduces how to deploy the build outputs of Rsbuild as a static s

## Background information

Before starting the deployment, you should understand some background information:
Before starting the deployment, you should understand the following:

- The CLI commands used for building and previewing outputs.
- The directory structure of the build outputs.
Expand All @@ -15,7 +15,7 @@ Before starting the deployment, you should understand some background informatio
The build commands provided by Rsbuild are:

- [build command](/guide/basic/cli#rsbuild-build), used to generate the build outputs for production deployment.
- [preview command](/guide/basic/cli#rsbuild-preview), used to preview the production build outputs locally. Note that you need to execute the `rsbuild build` command beforehand to generate the build outputs.
- [preview command](/guide/basic/cli#rsbuild-preview), used to preview the production build outputs locally. Note that you must first execute the `rsbuild build` command to generate the build outputs.

```json title="package.json"
{
Expand Down Expand Up @@ -50,7 +50,7 @@ We can divide the build output into two parts: **HTML files** and **static asset
- HTML files refer to files with the `.html` suffix in the output directory, which usually need to be deployed on the server.
- Static assets are located in the `static` directory of the output folder, which contains assets such as JavaScript, CSS, and images. They can be deployed either on the server or on a CDN.

If the static assets are deployed in a subdirectory of the server, you can set [output.assetPrefix](/config/output/asset-prefix) as the base path:
If the static assets are deployed in a subdirectory of the server, set [output.assetPrefix](/config/output/asset-prefix) as the base path:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
Expand All @@ -62,7 +62,7 @@ export default defineConfig({
});
```

If you want to place these static assets on a CDN for better performance rather than directly on the server with the HTML, you will need to set [output.assetPrefix](/config/output/asset-prefix) to the CDN address to ensure the application can properly reference these static assets.
If you want to place these static assets on a CDN for better performance rather than directly on the server with the HTML, set [output.assetPrefix](/config/output/asset-prefix) to the CDN address to ensure the application can properly reference these static assets.

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
Expand Down Expand Up @@ -92,12 +92,12 @@ The following sections describe how to deploy on several common platforms.

You can follow the [Cloudflare Pages - Git integration guide](https://developers.cloudflare.com/pages/get-started/git-integration/) to integrate with Git and deploy your site to Cloudflare Pages.

When configuring, you need to fill in the following fields under "Build settings":
When configuring, fill in the following fields under "Build settings":

- **Build command**: fill in the project's build command, typically `npm run build`.
- **Build output directory**: fill in the project's output directory, which defaults to `dist`.

Then click on the **Save and Deploy** button to start the deployment.
Then click the **Save and Deploy** button to start the deployment.

### GitHub pages

Expand Down
Loading