> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Quick start

## Environment preparation

Rsbuild supports using [Node.js](https://nodejs.org/), [Deno](https://deno.com/), or [Bun](https://bun.sh/) as the JavaScript runtime.

Use one of the following installation guides to set up a runtime:

- [Install Node.js](https://nodejs.org/en/download)
- [Install Bun](https://bun.com/docs/installation)
- [Install Deno](https://docs.deno.com/runtime/getting_started/installation/)

:::tip Version requirements

- Rsbuild v2 requires Node.js version 20.19+, 22.12+.
- Rsbuild v1 requires Node.js 18.12.0 or higher.

:::

## Create an Rsbuild application

[create-rsbuild](https://www.npmjs.com/package/create-rsbuild) lets you quickly create an Rsbuild application. We recommend using [pnpm](https://pnpm.io/) as your package manager.


```sh [pnpm]
pnpm create rsbuild@latest
```

```sh [npm]
npm create rsbuild@latest
```

```sh [yarn]
yarn create rsbuild
```

```sh [bun]
bun create rsbuild@latest
```

```sh [deno]
deno init --npm rsbuild@latest
```

Follow the prompts to complete the setup.

After creating the application, do the following:

- Run `pnpm install` (or your package manager's install command) to install dependencies.
- Run `pnpm run dev` to start the [dev server](/guide/basic/server.md).

### Templates

When creating an application, choose from the following templates provided by `create-rsbuild`:

| Template | Official docs                   | Rsbuild integration guide                                     |
| -------- | ------------------------------- | ------------------------------------------------------------- |
| vanilla  | Native JavaScript               | -                                                             |
| react    | [React](https://react.dev/)     | [Using React](/guide/framework/react.md)                      |
| vue      | [Vue](https://vuejs.org/)       | [Using Vue](/guide/framework/vue.md)                          |
| lit      | [Lit](https://lit.dev/)         | -                                                             |
| preact   | [Preact](https://preactjs.com/) | [Using Preact](/guide/framework/preact.md)                    |
| svelte   | [Svelte](https://svelte.dev/)   | [Using Svelte](/guide/framework/svelte.md)                    |
| solid    | [Solid](https://solidjs.com/)   | [Using Solid](/guide/framework/solid.md)                      |
| octane   | [Octane](https://octanejs.dev/) | [Using Octane](https://octanejs.dev/docs/build-tools#rsbuild) |

`create-rsbuild` provides basic templates. For more options, see:

- Visit [Rspack - Ecosystem](https://rspack.rs/guide/start/quick-start#ecosystem) to learn about higher-level tools built on Rsbuild.
- Visit [awesome-rstack - Starter](https://github.com/rstackjs/awesome-rstack#starter) for community-maintained templates.

### Optional tools

`create-rsbuild` can help you set up the following commonly used tools. Use the arrow keys to navigate and the space bar to select. Press Enter without selecting anything to skip these tools.

| Tool                                                       | Use                                          |
| ---------------------------------------------------------- | -------------------------------------------- |
| [Rstest](https://github.com/web-infra-dev/rstest)          | Testing                                      |
| [Rslint](https://github.com/web-infra-dev/rslint)          | Linting                                      |
| [ESLint](https://github.com/eslint/eslint)                 | Linting                                      |
| [Prettier](https://github.com/prettier/prettier)           | Formatting                                   |
| [Biome](https://github.com/biomejs/biome)                  | Linting and formatting                       |
| [Storybook](https://storybook.js.org/)                     | Component development                        |
| [Tailwind CSS](https://tailwindcss.com)                    | Styling                                      |
| [React Compiler](/guide/framework/react.md#react-compiler) | Optimizing React apps (React templates only) |

### Current directory

To create an application in the current directory, set the target folder to `.`:

```
◆  Create Rsbuild Project
│
◇  Project name or path
│  .
│
◇  "." is not empty, please choose:
│  Continue and override files
```

### Non-interactive mode

[create-rsbuild](https://npmjs.com/package/create-rsbuild) supports a non-interactive mode via command-line options. This mode skips prompts and creates the project directly, which is useful for scripts, CI, and automation.

For example, the following command creates a React app in the `my-app` directory:

```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 rslint,prettier
```

> See [Template examples](https://github.com/web-infra-dev/rsbuild/tree/main/packages/create-rsbuild#template-examples) for commands that create each template.

All CLI flags supported by `create-rsbuild`:

```text wrapCode
Usage: create-rsbuild [dir] [options]

Options:
  -h, --help                display help for command
  -d, --dir <dir>           create project in specified directory
  -t, --template <tpl>      specify the template to use
  --no-git                  skip Git repository initialization
  --tools <tool>            add additional tools, comma separated
  --skill <skill>           add optional skills, comma separated
  --override                override files in target directory
  --package-name <name>     specify the package name
  --template-version <ver>  specify the npm template version

Available templates: vanilla-js, vanilla-ts, react-js, react-ts, vue-js, vue-ts, lit-js, lit-ts, preact-js, preact-ts, svelte-js, svelte-ts, solid-js, solid-ts, solid2-js, solid2-ts, octane-js, octane-ts

Optional tools: react-compiler, rstest, eslint, rslint, biome, prettier, tailwindcss, storybook

Optional skills: rsbuild-best-practices, rstest-best-practices, vercel-react-best-practices
```

## Use Rsbuild in monorepos

The following monorepo tools provide Rsbuild integrations or examples for creating and managing Rsbuild applications in a workspace.

- [Nx](https://nx.dev/docs/technologies/build-tools/rsbuild/introduction) supports Rsbuild through the `@nx/rsbuild` plugin, including generators and executors for Nx workspaces.
- [Turborepo](https://turborepo.dev/docs/guides/frameworks/rsbuild) provides examples and guides for creating Rsbuild applications and using Rsbuild with Module Federation.

## Full-stack frameworks

If your application needs full-stack capabilities, you can directly use a full-stack framework built on Rsbuild, such as [TanStack Start](https://tanstack.com/start/latest) or [Modern.js](https://github.com/web-infra-dev/modern.js). These frameworks build on Rsbuild and add higher-level application features, such as SSR and routing.

- [React full-stack frameworks](/guide/framework/react.md#full-stack-frameworks)
- [Solid full-stack frameworks](/guide/framework/solid.md#full-stack-frameworks)

## Migrate from existing projects

To migrate from an existing project to Rsbuild, refer to the following guides:

- [Migrate from webpack](/guide/migration/webpack.md)
- [Migrate from Create React App](/guide/migration/cra.md)
- [Migrate from Vue CLI](/guide/migration/vue-cli.md)
- [Migrate from Vite](/guide/migration/vite.md)
- [Migrate from Tsup to Rslib](https://rslib.rs/guide/migration/tsup)
- [Migrate from Storybook to Storybook Rsbuild](https://rspack.rs/guide/migration/storybook)

### Other projects

If your project doesn't match the above migration guides, you can manually install the [@rsbuild/core](https://npmjs.com/package/@rsbuild/core) package:


```sh [npm]
npm add @rsbuild/core -D
```

```sh [yarn]
yarn add @rsbuild/core -D
```

```sh [pnpm]
pnpm add @rsbuild/core -D
```

```sh [bun]
bun add @rsbuild/core -D
```

```sh [deno]
deno add npm:@rsbuild/core -D
```

After installation, use the following documents to configure your project:

- See [CLI](/guide/basic/cli.md) to learn about available CLI commands.
- See [Plugin list](/plugins/list/index.md) to select Rsbuild plugins.
- See [Configure Rsbuild](/guide/configuration/rsbuild.md) to configure Rsbuild.

## CLI

Rsbuild includes a lightweight CLI with commands like `dev` and `build`.

```json title="package.json"
{
  "scripts": {
    // start the dev server, equivalent to "rsbuild dev"
    "dev": "rsbuild",
    // build for production
    "build": "rsbuild build",
    // preview the production build locally
    "preview": "rsbuild preview"
  }
}
```

Refer to the [CLI](/guide/basic/cli.md) to learn about all available commands and options.

## Entry module

By default, Rsbuild CLI auto-detects `src/index.(ts|js|tsx|jsx|mts|cts|mjs|cjs)` as the entry module. You can modify the entry module using the [source.entry](/config/source/entry.md) option.

```ts title="rsbuild.config.ts"
export default {
  source: {
    entry: {
      foo: './src/pages/foo/index.ts',
      bar: './src/pages/bar/index.ts',
    },
  },
};
```

## Core packages

### @rsbuild/core

[![@rsbuild/core](https://img.shields.io/npm/v/@rsbuild/core?style=flat-square&colorA=564341&colorB=EDED91)](https://npmjs.com/package/@rsbuild/core)
Core Rsbuild package that provides the CLI commands and JavaScript API.

### create-rsbuild

[![create-rsbuild](https://img.shields.io/npm/v/create-rsbuild?style=flat-square&colorA=564341&colorB=EDED91)](https://npmjs.com/package/create-rsbuild)
Create a new Rsbuild project.

## Next step

You may want:


[All features

Learn all features of Rsbuild

](/guide/start/features)[Config

Learn how to configure Rsbuild

](/guide/configuration/rsbuild)[Support Rsbuild

Support us with a star ⭐️

](https://github.com/web-infra-dev/rsbuild)