### onAfterStartDevServer Hook Example

Source: https://rsbuild.rs/plugins/dev/hooks

This hook is executed after the development server has started. It provides the port number and route information, useful for logging or triggering actions after the server is live.

```typescript
const myPlugin = () => ({
  setup(api) {
    api.onAfterStartDevServer(({ port, routes }) => {
      console.log('this port is: ', port);
      console.log('this routes is: ', routes);
    });
  },
});
```

--------------------------------

### onBeforeStartDevServer Hook Example

Source: https://rsbuild.rs/plugins/dev/hooks

This hook is called before the development server starts. It provides access to the server instance and environment contexts, allowing for pre-start configurations and logging.

```typescript
const myPlugin = () => ({
  setup(api) {
    api.onBeforeStartDevServer(({ server, environments }) => {
      console.log('before starting dev server.');
      console.log('the server is ', server);
      console.log('the environments contexts are: ', environments);
    });
  },
});
```

--------------------------------

### Install Rsbuild Core

Source: https://rsbuild.rs/guide/migration/webpack

Install the Rsbuild core package as a dev dependency using different package managers.

```shell
yarn add @rsbuild/core -D
```

```shell
pnpm add @rsbuild/core -D
```

```shell
bun add @rsbuild/core -D
```

```shell
deno add npm:@rsbuild/core -D
```

--------------------------------

### Optimize Tailwind CSS Build Performance (Monorepo Example)

Source: https://rsbuild.rs/guide/styling/tailwindcss-v3

Illustrates a common mistake in monorepo setups where the 'content' path incorrectly includes node_modules. Ensure paths accurately target source files containing Tailwind classes.

```javascript
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    // Incorrectly includes the `packages/ui/node_modules` directory
    // Should be '../../packages/ui/src/**/*.{html,js,ts,jsx,tsx}'
    '../../packages/ui/**/*.{html,js,ts,jsx,tsx}',
  ],
};
```

--------------------------------

### Install ESLint dependencies

Source: https://rsbuild.rs/guide/migration/cra

Commands to install ESLint v8 and the React app configuration across various package managers.

```bash
npm add eslint@8 eslint-config-react-app -D
```

```bash
yarn add eslint@8 eslint-config-react-app -D
```

```bash
pnpm add eslint@8 eslint-config-react-app -D
```

```bash
bun add eslint@8 eslint-config-react-app -D
```

```bash
deno add npm:eslint@8 npm:eslint-config-react-app -D
```

--------------------------------

### rsbuild.startDevServer

Source: https://rsbuild.rs/api/javascript-api/instance

Starts the local development server, enables file watching, and returns server instance details.

```APIDOC
## rsbuild.startDevServer

### Description
Starts the local development server to serve the application and enables file watching for recompilation.

### Method
Async Function

### Parameters
#### Request Body
- **getPortSilently** (boolean) - Optional - Whether to get the port silently without printing logs. Default: false.

### Response
#### Success Response (Promise<StartServerResult>)
- **urls** (string[]) - The URLs the server is listening on.
- **port** (number) - The actual port used by the server.
- **server** (object) - Server instance containing a `close()` method.

### Request Example
```javascript
await rsbuild.startDevServer({
  getPortSilently: false
});
```
```

--------------------------------

### Start Development Server (JavaScript)

Source: https://rsbuild.rs/api/start/index

Shows how to start a local development server using the `rsbuild.startDevServer()` method on an Rsbuild instance. This method is used for local development and provides logs for local and network access.

```javascript
await rsbuild.startDevServer();
```

--------------------------------

### Install Rsbuild Solid Plugin

Source: https://rsbuild.rs/plugins/list/plugin-solid

Commands to install the Solid and Babel plugins as development dependencies using various package managers.

```npm
npm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```yarn
yarn add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```pnpm
pnpm add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```bun
bun add @rsbuild/plugin-babel @rsbuild/plugin-solid -D
```

```deno
deno add npm:@rsbuild/plugin-babel npm:@rsbuild/plugin-solid -D
```

--------------------------------

### Migrate plugins in configuration

Source: https://rsbuild.rs/guide/migration/modern-builder

Example of replacing legacy Builder plugins with their Rsbuild counterparts in the configuration file.

```typescript
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
});
```

--------------------------------

### onAfterStartProdServer Hook

Source: https://rsbuild.rs/plugins/dev/hooks

This hook is called after the production preview server has started. It provides the port number and route information.

```APIDOC
## onAfterStartProdServer

### Description
Called after starting the production preview server. You can get the port number with the `port` parameter, and the page routes info with the `routes` parameter.

### Method
`api.onAfterStartProdServer(callback)`

### Parameters
#### Callback Parameters
- **port** (number) - The port number the server is running on.
- **routes** (Routes) - An array of route objects, each containing `entryName` and `pathname`.
- **environments** (Record<string, EnvironmentContext>) - The environment contexts.

### Request Example
```javascript
const myPlugin = () => ({
  setup(api) {
    api.onAfterStartProdServer(({ port, routes }) => {
      console.log('this port is: ', port);
      console.log('this routes is: ', routes);
    });
  },
});
```

### Response
This hook does not return a value, but the callback can perform asynchronous operations.
```

--------------------------------

### Install Rsbuild Core and Vue Plugin (npm, yarn, pnpm, bun, deno)

Source: https://rsbuild.rs/guide/migration/vue-cli

Installs the Rsbuild core package and the Vue plugin for various package managers. Use `@rsbuild/plugin-vue2` if your project is based on Vue 2.

```npm
npm add @rsbuild/core @rsbuild/plugin-vue -D
```

```yarn
yarn add @rsbuild/core @rsbuild/plugin-vue -D
```

```pnpm
pnpm add @rsbuild/core @rsbuild/plugin-vue -D
```

```bun
bun add @rsbuild/core @rsbuild/plugin-vue -D
```

```deno
deno add npm:@rsbuild/core npm:@rsbuild/plugin-vue -D
```

--------------------------------

### Install Rsbuild Plugins

Source: https://rsbuild.rs/config/plugins

Commands to install the Sass plugin using various package managers.

```bash
npm add @rsbuild/plugin-sass -D
yarn add @rsbuild/plugin-sass -D
pnpm add @rsbuild/plugin-sass -D
bun add @rsbuild/plugin-sass -D
deno add npm:@rsbuild/plugin-sass -D
```

--------------------------------

### Start Rsbuild Production Preview Server

Source: https://rsbuild.rs/api/javascript-api/instance

This function starts a server to preview the production build locally after `rsbuild.build` has been executed. It returns the server URLs, the port it's listening on, and a close function for the server instance. The `getPortSilently` option can be used to suppress port occupancy logs.

```javascript
import { logger } from '@rsbuild/core';

// Start preview server
await rsbuild.preview();

// Start preview server and handle the error
try {
  await rsbuild.preview();
} catch (err) {
  logger.error('Failed to start preview server.');
  logger.error(err);
  process.exit(1);
}
```

```javascript
const { urls, port } = await rsbuild.preview();
console.log(urls); // ['http://localhost:3000', 'http://192.168.0.1:3000']
console.log(port); // 3000
```

```javascript
await rsbuild.preview({
  getPortSilently: true,
  checkDistDir: false
});
```

--------------------------------

### Create and Start Rsbuild Dev Server Instance

Source: https://rsbuild.rs/api/javascript-api/instance

Rsbuild provides a built-in dev server for an improved development experience, offering features like page preview and hot module reloading. This snippet shows how to create a dev server instance and start it, which is also used internally by `rsbuild.startDevServer`.

```javascript
const server = await rsbuild.createDevServer();
await server.listen();
```

--------------------------------

### onBeforeStartProdServer Hook

Source: https://rsbuild.rs/plugins/dev/hooks

This hook is called right before the production preview server starts.

```APIDOC
## onBeforeStartProdServer

### Description
Called before starting the production preview server.

### Method
`api.onBeforeStartProdServer(callback)`

### Parameters
#### Callback Parameters
This hook's callback takes no parameters.

### Request Example
```javascript
const myPlugin = () => ({
  setup(api) {
    api.onBeforeStartProdServer(() => {
      console.log('before start!');
    });
  },
});
```

### Response
This hook does not return a value, but the callback can perform asynchronous operations.
```

--------------------------------

### Install UnoCSS and PostCSS Plugin (deno)

Source: https://rsbuild.rs/guide/styling/unocss

Installs the UnoCSS core package and its PostCSS integration for use in Rsbuild projects. This command is executed using deno.

```bash
deno add npm:unocss npm:@unocss/postcss -D
```

--------------------------------

### Install Rsbuild Dependencies (npm, yarn, pnpm, bun, deno)

Source: https://rsbuild.rs/guide/migration/cra

Commands to install the core Rsbuild package and the React plugin using various package managers. These are development dependencies.

```npm
npm add @rsbuild/core @rsbuild/plugin-react -D
```

```yarn
yarn add @rsbuild/core @rsbuild/plugin-react -D
```

```pnpm
pnpm add @rsbuild/core @rsbuild/plugin-react -D
```

```bun
bun add @rsbuild/core @rsbuild/plugin-react -D
```

```deno
deno add npm:@rsbuild/core npm:@rsbuild/plugin-react -D
```

--------------------------------

### Install UnoCSS and PostCSS Plugin (bun)

Source: https://rsbuild.rs/guide/styling/unocss

Installs the UnoCSS core package and its PostCSS integration for use in Rsbuild projects. This command is executed using bun.

```bash
bun add unocss @unocss/postcss -D
```

--------------------------------

### Install Tailwind CSS dependency

Source: https://rsbuild.rs/guide/styling/tailwindcss-v3

Use Deno to add Tailwind CSS as a development dependency to the project.

```shell
deno add npm:tailwindcss@^3 -D
```

--------------------------------

### Synchronize assetPrefix with server.base

Source: https://rsbuild.rs/config/output/asset-prefix

Example showing how to align output.assetPrefix with server.base to ensure consistent asset loading during preview.

```typescript
export default {
  output: {
    assetPrefix: '/foo/bar/',
  },
  server: {
    base: '/foo',
  },
};
```

--------------------------------

### Configure PostCSS with postcss.config.cjs

Source: https://rsbuild.rs/guide/styling/css-usage

This example demonstrates configuring PostCSS using a `postcss.config.cjs` file. It includes the `postcss-px-to-viewport` plugin to convert pixel units to viewport units, a common requirement for responsive design.

```javascript
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};
```

--------------------------------

### Create Rsbuild project via CLI

Source: https://rsbuild.rs/guide/start/quick-start

Initializes a new Rsbuild project using the create-rsbuild package. Supports non-interactive mode for CI/CD environments by specifying templates and additional tools via flags.

```bash
npx -y create-rsbuild@latest my-app --template react

# Using abbreviations
npx -y create-rsbuild@latest my-app -t react

# Specify multiple tools
npx -y create-rsbuild@latest my-app -t react --tools eslint,prettier
```

--------------------------------

### Debug Mode Log Output Example

Source: https://rsbuild.rs/guide/debug/debug-mode

This example shows the typical log output when Rsbuild's debug mode is enabled. Logs starting with 'rsbuild' provide insights into internal operations and the Rspack version being used.

```shell
$ DEBUG=rsbuild pnpm dev

  ...

```

--------------------------------

### POST /afterListen

Source: https://rsbuild.rs/api/javascript-api/dev-server-api

Notifies the Rsbuild system that a custom server has successfully started, triggering the onAfterStartDevServer hook.

```APIDOC
## POST /afterListen

### Description
Notifies Rsbuild that the custom server has successfully started. This is essential when using custom server implementations to ensure hooks are triggered correctly.

### Method
POST

### Endpoint
/afterListen

### Response
#### Success Response (200)
- **void** - Returns nothing upon successful notification.
```

--------------------------------

### Starting Rsbuild Development Server

Source: https://rsbuild.rs/api/javascript-api/instance

The `rsbuild.startDevServer()` function initiates a local development server that serves your application and watches for file changes, triggering recompilations. It returns the server URLs, the port it's listening on, and a server instance with a `close` method. Error handling is recommended.

```javascript
import { logger } from '@rsbuild/core';

// Start dev server
await rsbuild.startDevServer();

// Start dev server and handle the error
try {
  await rsbuild.startDevServer();
} catch (err) {
  logger.error('Failed to start dev server.');
  logger.error(err);
  process.exit(1);
}
```

```javascript
const { urls, port } = await rsbuild.startDevServer();
console.log(urls); // ['http://localhost:3000', 'http://192.168.0.1:3000']
console.log(port); // 3000
```

--------------------------------

### Configuring and Using BASE_URL

Source: https://rsbuild.rs/guide/advanced/env-vars

Shows how to set the server base path in the Rsbuild configuration and consume it via import.meta.env.BASE_URL or process.env.BASE_URL to construct asset URLs.

```javascript
export default {
  server: {
    base: '/foo',
  },
};

// Usage in JS
const image = new Image();
image.src = `${import.meta.env.BASE_URL}/favicon.ico`;
```

```html
<link rel="icon" href="<%= process.env.BASE_URL %>/favicon.ico" />
```

--------------------------------

### Rsbuild onBeforeStartProdServer Hook

Source: https://rsbuild.rs/api/javascript-api/instance

This hook is called before the production preview server starts. It allows for any necessary pre-server setup or logging. The callback can be synchronous or asynchronous.

```typescript
rsbuild.onBeforeStartProdServer(() => {
  console.log('before start!');
});
```

--------------------------------

### Initialize Rsbuild Project with Solid Framework (Bun)

Source: https://rsbuild.rs/guide/framework/solid

This command uses Bun to create a new Rsbuild project. It prompts the user to select a framework, and choosing 'Solid' configures the project for Solid development.

```bash
bun create rsbuild@latest
```

--------------------------------

### Configure TanStack Router with Rsbuild

Source: https://rsbuild.rs/guide/framework/react

Integrates TanStack Router with Rsbuild for file-based routing. Requires installing `@tanstack/router-plugin` and configuring it in `rsbuild.config.ts`. This setup enables automatic route generation based on file structure.

```typescript
import { defineConfig } from '@rsbuild/core';
import { pluginTanStackRouter } from '@rsbuild/plugin-tanstack-router';

export default defineConfig({
  plugins: [
    pluginTanStackRouter({
      // Options for TanStack Router plugin
    }),
  ],
});
```

--------------------------------

### Initialize Rsbuild Project with Solid Framework

Source: https://rsbuild.rs/guide/framework/solid

This command uses npm to create a new Rsbuild project. It prompts the user to select a framework, and choosing 'Solid' configures the project for Solid development.

```bash
npm create rsbuild@latest
```

--------------------------------

### Register a Custom Rsbuild Plugin (TypeScript)

Source: https://rsbuild.rs/plugins/dev

This example demonstrates how to register a custom Rsbuild plugin, 'pluginFoo', in the Rsbuild configuration file. It shows how to pass options to the plugin during registration. The configuration is written in TypeScript.

```typescript
import { pluginFoo } from './pluginFoo';

export default {
  plugins: [pluginFoo({ message: 'world!' })],
};
```

--------------------------------

### Configure Rsbuild for styled-components

Source: https://rsbuild.rs/guide/styling/css-in-js

This snippet shows how to configure Rsbuild to use styled-components by importing and applying the @rsbuild/plugin-styled-components plugin in the rsbuild.config.ts file. This setup enhances debugging and enables SSR support for styled-components.

```typescript
import { defineConfig } from '@rsbuild/core';
import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';

export default defineConfig({
  plugins: [pluginStyledComponents()],
});
```

--------------------------------

### Initialize Preact Project with Rsbuild

Source: https://rsbuild.rs/guide/framework/preact

This command initializes a new Preact project using Rsbuild. It prompts the user to select 'Preact' as the framework. This is the recommended way to start a new Preact application with Rsbuild.

```bash
npm create rsbuild@latest
yarn create rsbuild
pnpm create rsbuild@latest
bun create rsbuild@latest
```

--------------------------------

### Configure Rsbuild CLI scripts

Source: https://rsbuild.rs/guide/start/quick-start

Defines standard build, development, and preview scripts within the package.json file to enable Rsbuild CLI commands.

```json
{
  "scripts": {
    "dev": "rsbuild dev",
    "build": "rsbuild build",
    "preview": "rsbuild preview"
  }
}
```

--------------------------------

### Configuring CSS Loader to Skip Absolute Path Resolution (JavaScript)

Source: https://rsbuild.rs/guide/basic/static-assets

Provides a JavaScript configuration object for Rsbuild's tools.cssLoader to customize how absolute paths in CSS url() are resolved. The example filters out paths starting with '/image/font', preventing them from being processed.

```javascript
export default {
  tools: {
    cssLoader: {
      url: {
        filter: (url) => {
          if (//image/font/.test(url)) {
            return false;
          }
          return true;
        },
      },
    },
  },
};
```

--------------------------------

### Register plugins correctly

Source: https://rsbuild.rs/config/plugins

Shows the correct pattern for registering multiple plugins by returning an array, as plugins cannot be dynamically added inside the setup hook.

```typescript
// Correct
function myPlugin() {
  return [fooPlugin(), barPlugin()];
}

export default {
  plugins: [myPlugin()],
};
```

--------------------------------

### Access Extended Rsbuild Plugin API in a Plugin

Source: https://rsbuild.rs/plugins/dev

Illustrates how a custom Rsbuild plugin can access the extended APIs exposed by the Rsbuild instance using `api.useExposed()`. This example shows retrieving state and updating a count.

```typescript
import { MY_TOOLKIT_ID } from './myToolkit';

const myPlugin = {
  name: 'my-plugin',
  setup(api) {
    const toolkitApi = api.useExposed(MY_TOOLKIT_ID);
    if (toolkitApi) {
      const { count } = toolkitApi.getState();
      toolkitApi.setCount(count + 1);
    }
  },
};
```

--------------------------------

### Define a Scoped Rsbuild Plugin (TypeScript)

Source: https://rsbuild.rs/plugins/dev

This snippet illustrates how to define an Rsbuild plugin with a scoped name, 'scope:foo-bar', to avoid naming conflicts. The plugin itself is minimal, with an empty setup function, and is written in TypeScript.

```typescript
import type { RsbuildPlugin } from '@rsbuild/core';

export const pluginFooBar = (): RsbuildPlugin => ({
  name: 'scope:foo-bar',
  setup() {}
});
```

--------------------------------

### Configure Dev Server Middleware: Vite vs. Rsbuild

Source: https://rsbuild.rs/guide/migration/vite-plugin

This example shows how to add custom middleware to the development server. Vite uses the `configureServer` hook, while Rsbuild utilizes the `onBeforeStartDevServer` hook to access and modify the server's middleware stack.

```typescript
const vitePlugin = () => ({
  name: 'setup-middleware',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // custom handle request...
    });
  },
});

```

```typescript
const rsbuildPlugin = {
  name: 'setup-middleware',
  setup(api) {
    api.onBeforeStartDevServer(({ server }) => {
      server.middlewares.use((req, res, next) => {
        // custom handle request...
      });
    });
  },
};

```

--------------------------------

### Configure Server Proxy Rules in Rsbuild

Source: https://rsbuild.rs/config/server/proxy

This snippet demonstrates how to configure proxy rules for the Rsbuild dev server or preview server. It shows basic proxying to a local or remote server, including an example of proxying requests starting with '/api' to 'http://localhost:3000'.

```typescript
export default {
  server: {
    proxy: {
      // http://localhost:3000/api -> http://localhost:3000/api
      // http://localhost:3000/api/foo -> http://localhost:3000/api/foo
      '/api': 'http://localhost:3000'
    }
  }
};
```

--------------------------------

### Define a Basic Rsbuild Plugin with Options (TypeScript)

Source: https://rsbuild.rs/plugins/dev

This snippet shows how to define a functional Rsbuild plugin named 'pluginFoo' that accepts an options object. The plugin logs a message when the development server starts. It's written in TypeScript and uses Rsbuild's plugin API.

```typescript
import type { RsbuildPlugin } from '@rsbuild/core';

export type PluginFooOptions = {
  message?: string;
};

export const pluginFoo = (options: PluginFooOptions = {}): RsbuildPlugin => ({
  name: 'plugin-foo',

  setup(api) {
    api.onAfterStartDevServer(() => {
      const msg = options.message || 'hello!';
      console.log(msg);
    });
  },
});
```

--------------------------------

### Accessing Build Mode and Environment Flags

Source: https://rsbuild.rs/guide/advanced/env-vars

Demonstrates how to use import.meta.env.MODE, DEV, and PROD to execute conditional logic based on the current build environment. These values are evaluated and replaced during the build process.

```javascript
if (import.meta.env.MODE === 'development') {
  console.log('this is development mode');
}

if (import.meta.env.DEV) {
  console.log('this is development mode');
}

if (import.meta.env.PROD) {
  console.log('this is production mode');
}
```

--------------------------------

### Initialize Theme and Analytics

Source: https://rsbuild.rs/config/performance/preconnect

This JavaScript snippet handles the initialization of the site's color theme based on user preferences or system settings and sets up Google Analytics tracking.

```javascript
{const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.classList.toggle('rp-dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';} window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-L6BZ6TKW4R');
```

--------------------------------

### Develop an Environment-Aware Rsbuild Plugin (TypeScript)

Source: https://rsbuild.rs/plugins/dev

This example shows a TypeScript plugin, 'pluginFoo', designed to work with Rsbuild's environment features. It uses `modifyEnvironmentConfig` to set the HTML title and `modifyBundlerChain` to name the chain based on the environment's title. This allows the plugin to behave differently across various build environments.

```typescript
import type { RsbuildPlugin } from '@rsbuild/core';

export type PluginFooOptions = {
  title?: string;
};

export const pluginFoo = (options: PluginFooOptions = {}): RsbuildPlugin => ({
  name: 'plugin-foo',

  setup(api) {
    api.modifyEnvironmentConfig((config) => {
      config.html.title = options.title || 'My Default Title';
    });
    api.modifyBundlerChain((chain, { environment }) => {
      chain.name(environment.config.html.title);
    });
  },
});
```

--------------------------------

### Install Rstest dependencies

Source: https://rsbuild.rs/guide/advanced/testing

Commands to install the @rstest/core package as a development dependency across various JavaScript package managers.

```bash
npm add @rstest/core -D
yarn add @rstest/core -D
pnpm add @rstest/core -D
bun add @rstest/core -D
deno add npm:@rstest/core -D
```

--------------------------------

### Install Node.js Types for process.env

Source: https://rsbuild.rs/guide/advanced/env-vars

If your project is missing types for `process.env`, you need to install the `@types/node` package. This provides type definitions for Node.js environment variables, improving type safety in your TypeScript projects. The installation command varies slightly depending on your package manager.

```npm
npm add @types/node -D
```

```yarn
yarn add @types/node -D
```

```pnpm
pnpm add @types/node -D
```

```bun
bun add @types/node -D
```

```deno
deno add npm:@types/node -D
```

--------------------------------

### Install Tailwind CSS dependencies

Source: https://rsbuild.rs/guide/styling/tailwindcss

Installs the required tailwindcss and @tailwindcss/postcss packages as development dependencies using various package managers.

```npm
npm add tailwindcss @tailwindcss/postcss -D
```

```yarn
yarn add tailwindcss @tailwindcss/postcss -D
```

```pnpm
pnpm add tailwindcss @tailwindcss/postcss -D
```

```bun
bun add tailwindcss @tailwindcss/postcss -D
```

```deno
deno add npm:tailwindcss npm:@tailwindcss/postcss -D
```

--------------------------------

### Install Rsbuild dependencies

Source: https://rsbuild.rs/api/start

Commands to install the @rsbuild/core package using various package managers.

```npm
npm add @rsbuild/core -D
```

```yarn
yarn add @rsbuild/core -D
```

```pnpm
pnpm add @rsbuild/core -D
```

```bun
bun add @rsbuild/core -D
```

```deno
deno add npm:@rsbuild/core -D
```

--------------------------------

### Initialize Rsbuild Project with Solid Framework (pnpm)

Source: https://rsbuild.rs/guide/framework/solid

This command uses pnpm to create a new Rsbuild project. It prompts the user to select a framework, and choosing 'Solid' configures the project for Solid development.

```bash
pnpm create rsbuild@latest
```

--------------------------------

### Install Stylus Plugin

Source: https://rsbuild.rs/plugins/list/plugin-stylus

Commands to install the @rsbuild/plugin-stylus package as a development dependency using various package managers.

```bash
npm add @rsbuild/plugin-stylus -D
yarn add @rsbuild/plugin-stylus -D
pnpm add @rsbuild/plugin-stylus -D
bun add @rsbuild/plugin-stylus -D
deno add npm:@rsbuild/plugin-stylus -D
```

--------------------------------

### Basic CSS Module Usage

Source: https://rsbuild.rs/guide/styling/css-modules

Demonstrates writing CSS in a `.module.css` file and importing it into a React component. Rsbuild automatically handles class name hashing for uniqueness.

```css
.red {
  background: red;
}
```

```typescript
import styles from './button.module.css';

export default () => {
  return <button className={styles.red}>Button</button>;
};
```

--------------------------------

### Initialize Rsbuild Project with Solid Framework (Yarn)

Source: https://rsbuild.rs/guide/framework/solid

This command uses Yarn to create a new Rsbuild project. It prompts the user to select a framework, and choosing 'Solid' configures the project for Solid development.

```bash
yarn create rsbuild
```

--------------------------------

### Install Vue Plugin using deno

Source: https://rsbuild.rs/plugins/list/plugin-vue

Command to install the Rsbuild Vue plugin as a development dependency using deno.

```bash
deno add npm:@rsbuild/plugin-vue -D
```

--------------------------------

### Managing Static Asset Prefixes

Source: https://rsbuild.rs/guide/advanced/env-vars

Demonstrates using ASSET_PREFIX to dynamically point to different asset origins depending on the build environment (development vs production).

```javascript
export default {
  dev: {
    assetPrefix: '/',
  },
  output: {
    copy: [{ from: './static', to: 'static' }],
    assetPrefix: 'https://example.com',
  },
};

const Image = <img src={`${import.meta.env.ASSET_PREFIX}/static/icon.png`} />;
```

--------------------------------

### Install Vue Plugin using bun

Source: https://rsbuild.rs/plugins/list/plugin-vue

Command to install the Rsbuild Vue plugin as a development dependency using bun.

```bash
bun add @rsbuild/plugin-vue -D
```

--------------------------------

### Install Vue Plugin using pnpm

Source: https://rsbuild.rs/plugins/list/plugin-vue

Command to install the Rsbuild Vue plugin as a development dependency using pnpm.

```bash
pnpm add @rsbuild/plugin-vue -D
```

--------------------------------

### Install Vue Plugin using yarn

Source: https://rsbuild.rs/plugins/list/plugin-vue

Command to install the Rsbuild Vue plugin as a development dependency using yarn.

```bash
yarn add @rsbuild/plugin-vue -D
```

--------------------------------

### Configure multiple environments in rsbuild.config.ts

Source: https://rsbuild.rs/guide/advanced/environments

This example demonstrates how to define 'web' and 'node' environments within the Rsbuild configuration. It specifies unique entry points, build targets, and path aliases for each environment to support SSR and client-side rendering.

```typescript
export default {
  environments: {
    // Configure the web environment for browsers
    web: {
      source: {
        entry: {
          index: './src/index.client.js',
        },
      },
      output: {
        // Use 'web' target for the browser outputs
        target: 'web',
      },
      resolve: {
        alias: {
          '@common': './src/client/common',
        },
      },
    },
    // Configure the node environment for SSR
    node: {
      source: {
        entry: {
          index: './src/index.server.js',
        },
      },
      output: {
        // Use 'node' target for the Node.js outputs
        target: 'node',
      },
      resolve: {
        alias: {
          '@common': './src/server/common',
        },
      },
    },
  },
};
```

--------------------------------

### Install Vue Plugin using npm

Source: https://rsbuild.rs/plugins/list/plugin-vue

Command to install the Rsbuild Vue plugin as a development dependency using npm.

```bash
npm add @rsbuild/plugin-vue -D
```

--------------------------------

### Configure Rsbuild for Simultaneous Main App and Web Worker Builds

Source: https://rsbuild.rs/guide/basic/web-workers

This example shows how to use Rsbuild's 'environments' configuration to build both the main application and Web Workers concurrently. Each environment can have its own specific build options, such as setting the output target for Web Workers.

```typescript
export default {
  environments: {
    web: {
      // Build configuration for the main application
    },
    webWorker: {
      // Build configuration for Web Workers
      output: {
        target: 'web-worker',
      },
    },
  },
};
```

--------------------------------

### Install Sass Plugin with deno

Source: https://rsbuild.rs/plugins/list/plugin-sass

This command installs the Sass plugin for Rsbuild using deno. It is a development dependency.

```bash
deno add npm:@rsbuild/plugin-sass -D
```

--------------------------------

### Install Sass Plugin with bun

Source: https://rsbuild.rs/plugins/list/plugin-sass

This command installs the Sass plugin for Rsbuild using bun. It is a development dependency.

```bash
bun add @rsbuild/plugin-sass -D
```

--------------------------------

### Install Sass Plugin with pnpm

Source: https://rsbuild.rs/plugins/list/plugin-sass

This command installs the Sass plugin for Rsbuild using pnpm. It is a development dependency.

```bash
pnpm add @rsbuild/plugin-sass -D
```

--------------------------------

### Install Sass Plugin with yarn

Source: https://rsbuild.rs/plugins/list/plugin-sass

This command installs the Sass plugin for Rsbuild using yarn. It is a development dependency.

```bash
yarn add @rsbuild/plugin-sass -D
```

--------------------------------

### Install Sass Plugin with npm

Source: https://rsbuild.rs/plugins/list/plugin-sass

This command installs the Sass plugin for Rsbuild using npm. It is a development dependency.

```bash
npm add @rsbuild/plugin-sass -D
```

--------------------------------

### Correct Asset Referencing Patterns

Source: https://rsbuild.rs/guide/basic/static-assets

Illustrates best practices for referencing public assets and importing source assets, highlighting common mistakes to avoid.

```html
<!-- Correct -->
<link rel="icon" href="/favicon.ico" />
```

```javascript
// Correct
import logo from './assets/logo.png';
```

--------------------------------

### Async Plugin Registration

Source: https://rsbuild.rs/config/plugins

Shows how to handle asynchronous plugin initialization by returning a Promise or using an async function.

```typescript
async function myPlugin() {
  await someAsyncOperation();
  return {
    name: 'my-plugin',
    setup(api) {
      // ...
    },
  };
}

export default {
  plugins: [myPlugin()],
};
```

--------------------------------

### Install Rsbuild React Plugin

Source: https://rsbuild.rs/plugins/list/plugin-react

Commands to install the @rsbuild/plugin-react package as a development dependency using various package managers.

```bash
npm add @rsbuild/plugin-react -D

yarn add @rsbuild/plugin-react -D

pnpm add @rsbuild/plugin-react -D

bun add @rsbuild/plugin-react -D

deno add npm:@rsbuild/plugin-react -D
```

--------------------------------

### Install Svelte Plugin for Rsbuild

Source: https://rsbuild.rs/plugins/list/plugin-svelte

Commands to install the Svelte plugin as a development dependency using various package managers.

```npm
npm add @rsbuild/plugin-svelte -D
```

```yarn
yarn add @rsbuild/plugin-svelte -D
```

```pnpm
pnpm add @rsbuild/plugin-svelte -D
```

```bun
bun add @rsbuild/plugin-svelte -D
```

```deno
deno add npm:@rsbuild/plugin-svelte -D
```

--------------------------------

### Example Manifest JSON Structure

Source: https://rsbuild.rs/config/output/manifest

Shows the expected structure of the generated manifest.json file, containing a flat list of all files and a detailed mapping of entry points to their initial, async, and static assets.

```json
{
  "allFiles": [
    "/static/css/index.[hash].css",
    "/static/js/index.[hash].js",
    "/static/images/logo.[hash].png",
    "/index.html"
  ],
  "entries": {
    "index": {
      "initial": {
        "js": ["/static/js/index.[hash].js"],
        "css": ["/static/css/index.[hash].css"]
      },
      "assets": ["/static/images/logo.[hash].png"],
      "html": ["/index.html"]
    }
  }
}
```