You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: website/docs/en/guide/advanced/environments.mdx
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ Rsbuild supports building outputs for multiple environments at the same time. Yo
4
4
5
5
## What is environment
6
6
7
-
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.
7
+
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.
8
8
9
9
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.
10
10
@@ -13,15 +13,15 @@ You can also define different environments for the same build target, for exampl
13
13
- Define `rsc` and `ssr` environments, both targeting `node`, used separately for React Server Components and SSR.
14
14
- Define `desktop` and `mobile` environments, both targeting `web`, used separately for desktop and mobile browsers.
15
15
16
-
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)).
16
+
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)).
17
17
18
18
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.
19
19
20
20
## Environment configs
21
21
22
22
Rsbuild supports defining different Rsbuild configurations for each environment through [environments](/config/environments).
23
23
24
-
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.
24
+
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.
25
25
26
26
```ts title="rsbuild.config.ts"
27
27
exportdefault {
@@ -77,7 +77,7 @@ Then, Rsbuild will use these environment configurations to internally generate t
77
77
78
78
### Debug config
79
79
80
-
When you execute the command `npx rsbuild inspect` in the project root directory, you will find the following output:
80
+
When you execute the command `npx rsbuild inspect` in the project root directory, you will see the following output:
81
81
82
82
-`rsbuild.config.[name].mjs`: The Rsbuild config used for a certain environment during build.
83
83
-`rspack.config.[name].mjs`: The Rspack config corresponding to a certain environment when building.
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)).
98
+
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)).
Copy file name to clipboardExpand all lines: website/docs/en/guide/advanced/hmr.mdx
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
# Hot module replacement
2
2
3
-
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:
3
+
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:
4
4
5
-
-Retain application state that is lost during a full reload.
6
-
-Save valuable development time by updating only what changed.
7
-
- Instantly update the browser when modifying CSS / JS in source code, almost comparable to changing styles directly in the browser's dev tools.
5
+
-Preserves application state that would be lost during a full reload.
6
+
-Saves valuable development time by updating only what changed.
7
+
- Instantly updates the browser when modifying CSS/JS in source code, similar to changing styles directly in the browser's dev tools.
8
8
9
9
## HMR toggle
10
10
@@ -20,7 +20,7 @@ export default {
20
20
};
21
21
```
22
22
23
-
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.
23
+
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.
24
24
25
25
```ts title="rsbuild.config.ts"
26
26
exportdefault {
@@ -50,9 +50,9 @@ export default {
50
50
51
51
## File watching
52
52
53
-
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.
53
+
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.
54
54
55
-
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.
55
+
If you want to watch these directories, manually configure Rspack's [watchOptions.ignored](https://rspack.rs/config/watch#watchoptionsignored) to override the default behavior.
56
56
57
57
For example, to watch the `node_modules/` directory and ignore the `.git/` directory, you can configure it as follows:
Copy file name to clipboardExpand all lines: website/docs/en/guide/advanced/ssr.mdx
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@
2
2
3
3
This chapter introduces how to implement SSR functionality using Rsbuild.
4
4
5
-
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).
5
+
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).
6
6
7
7
## What is SSR
8
8
9
9
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.
10
10
11
-
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.
11
+
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.
12
12
13
-
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.
13
+
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 file name to clipboardExpand all lines: website/docs/en/guide/basic/server.mdx
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ Rsbuild includes a built-in dev server that enhances the development experience.
6
6
7
7
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/`.
8
8
9
-
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:
9
+
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:
10
10
11
11
```ts title="rsbuild.config.ts"
12
12
exportdefault {
@@ -18,7 +18,7 @@ export default {
18
18
19
19
## View static assets
20
20
21
-
After starting the dev server, you can access `/rsbuild-dev-server` to view all static assets generated during the current build.
21
+
After starting the dev server, access `/rsbuild-dev-server` to view all static assets generated during the current build.
22
22
23
23
For example, open `http://localhost:3000/rsbuild-dev-server` in your browser:
24
24
@@ -36,9 +36,9 @@ The Rsbuild server provides default routing conventions and allows customization
36
36
37
37
The Rsbuild server generates page routes based on the [server.base](/config/server/base) and [source.entry](/config/source/entry) configurations.
38
38
39
-
When the entry is `index`, you can access the page at `/`. When the entry is `foo`, you can access the page at `/foo`.
39
+
When the entry is `index`, access the page at `/`. When the entry is `foo`, access the page at `/foo`.
40
40
41
-
When `server.base` is `/base`, you can access the index page at `/base`, and the foo page at `/base/foo`.
41
+
When `server.base` is `/base`, access the index page at `/base`, and the foo page at `/base/foo`.
42
42
43
43
```ts title="rsbuild.config.ts"
44
44
exportdefault {
@@ -60,7 +60,7 @@ If a request meets the following conditions but no corresponding static asset is
60
60
61
61
### Custom fallback behavior
62
62
63
-
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).
63
+
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).
64
64
65
65
```ts title="rsbuild.config.ts"
66
66
exportdefault {
@@ -80,11 +80,11 @@ export default {
80
80
81
81
### HTML output path
82
82
83
-
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`.
83
+
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`.
84
84
85
85
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`.
86
86
87
-
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`.
87
+
For example, if you set HTML files to output to the `HTML` directory, access index.html at `/html/`, and foo.html at `/html/foo`.
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.
193
193
194
-
If you need to reuse existing middleware in Rsbuild, you can integrate the entire server application as middleware using the following approach:
194
+
To reuse existing middleware in Rsbuild, integrate the entire server application as middleware using the following approach:
195
195
196
196
```ts title="rsbuild.config.ts"
197
197
importexpressfrom'express';
@@ -213,6 +213,6 @@ export default {
213
213
214
214
## Custom server
215
215
216
-
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.
216
+
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.
217
217
218
218
For details, refer to [Rsbuild - createDevServer](/api/javascript-api/instance#rsbuildcreatedevserver).
Copy file name to clipboardExpand all lines: website/docs/en/guide/basic/static-deploy.mdx
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@ This section introduces how to deploy the build outputs of Rsbuild as a static s
4
4
5
5
## Background information
6
6
7
-
Before starting the deployment, you should understand some background information:
7
+
Before starting the deployment, you should understand the following:
8
8
9
9
- The CLI commands used for building and previewing outputs.
10
10
- The directory structure of the build outputs.
@@ -15,7 +15,7 @@ Before starting the deployment, you should understand some background informatio
15
15
The build commands provided by Rsbuild are:
16
16
17
17
-[build command](/guide/basic/cli#rsbuild-build), used to generate the build outputs for production deployment.
18
-
-[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.
18
+
-[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.
19
19
20
20
```json title="package.json"
21
21
{
@@ -50,7 +50,7 @@ We can divide the build output into two parts: **HTML files** and **static asset
50
50
- HTML files refer to files with the `.html` suffix in the output directory, which usually need to be deployed on the server.
51
51
- 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.
52
52
53
-
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:
53
+
If the static assets are deployed in a subdirectory of the server, set [output.assetPrefix](/config/output/asset-prefix) as the base path:
54
54
55
55
```ts title="rsbuild.config.ts"
56
56
import { defineConfig } from'@rsbuild/core';
@@ -62,7 +62,7 @@ export default defineConfig({
62
62
});
63
63
```
64
64
65
-
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.
65
+
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.
66
66
67
67
```ts title="rsbuild.config.ts"
68
68
import { defineConfig } from'@rsbuild/core';
@@ -92,12 +92,12 @@ The following sections describe how to deploy on several common platforms.
92
92
93
93
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.
94
94
95
-
When configuring, you need to fill in the following fields under "Build settings":
95
+
When configuring, fill in the following fields under "Build settings":
96
96
97
97
-**Build command**: fill in the project's build command, typically `npm run build`.
98
98
-**Build output directory**: fill in the project's output directory, which defaults to `dist`.
99
99
100
-
Then click on the **Save and Deploy** button to start the deployment.
100
+
Then click the **Save and Deploy** button to start the deployment.
0 commit comments