Quick start

Online example

We provide an online example based on Rsbuild. The example gives an intuitive feel for the build performance of Rspack and the development experience of Rsbuild:

Setup environment

Rsbuild supports using Node.js, Deno, or Bun as the runtime.

Node.js

For Node.js, you will need to install Node.js >= version 16, it is recommended to use the Node.js LTS version.

Check the current Node.js version with the following command:

node -v

If you do not have Node.js installed in current environment, or the installed version is too low, you can use nvm or fnm to install.

Here is an example of how to install via nvm:

# Install Node.js LTS
nvm install --lts
# Switch to Node.js LTS
nvm use --lts

Creating an Rsbuild project

You can use the create-rsbuild to create a new Rsbuild project. Just execute the following command:

npm
yarn
pnpm
bun
npm create rsbuild@latest

Follow the prompts step by step. During the creation process, you can choose whether you need additional tools like TypeScript, ESLint, etc.

After the project is created, you can follow these steps:

  • Run git init to initialize the Git repository.
  • Run npm install (or the install command of your package manager) to install project dependencies.
  • Run npm run dev to start the development server, which runs on localhost:5173 by default.

Templates

When creating a project, you can choose from the following templates provided by create-rsbuild:

Template Description Optional Features
vanilla Vanilla JavaScript TypeScript
react React 19 TypeScript
react18 React 18 TypeScript
vue Vue 3 TypeScript
vue2 Vue 2 TypeScript
lit Lit TypeScript
preact Preact TypeScript
svelte Svelte 5 TypeScript
solid Solid TypeScript

Optional tools

create-rsbuild can help you set up some commonly used tools, including Biome, ESLint, and prettier. You can use the arrow keys and the space bar to make your selections. If you don't need these tools, you can simply press Enter to skip.

◆  Select additional tools (Use <space> to select, <enter> to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
TIP

Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to choose ESLint or Prettier as well.

Current directory

To create a project 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

Quick creation

create-rsbuild provides some CLI flags. By setting these CLI flags, you can skip the interactive selection steps and create the project with one command.

For example, to create a React project in the my-project directory with one command:

npx create-rsbuild --dir my-project --template react

# Using abbreviations
npx create-rsbuild -d my-project -t react

All the CLI flags of create-rsbuild:

Usage: create-rsbuild [options]

Options:

  -h, --help       display help for command
  -d, --dir        create project in specified directory
  -t, --template   specify the template to use
  --tools          select additional tools (biome, eslint, prettier)
  --override       override files in target directory

Templates:

  react-js, react-ts, vue3-js, vue3-ts, vue2-js, vue2-ts, svelte-js, svelte-ts, solid-js, solid-ts, vanilla-js, vanilla-ts

Migrate from existing projects

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

Other projects

If your project does not belong to the above migration guides, you can manually install the @rsbuild/core package:

npm
yarn
pnpm
bun
npm add @rsbuild/core -D

After installation, you can refer to the following documents to configure your project:

CLI

Rsbuild comes with a lightweight CLI that includes commands such as dev and build.

package.json
{
  "scripts": {
    // starting the dev server
    "dev": "rsbuild dev",
    // build the app for production
    "build": "rsbuild build",
    // preview the production build locally
    "preview": "rsbuild preview"
  }
}

Refer to the CLI to learn about all available commands and options.

Entry module

By default, Rsbuild CLI uses src/index.(js|ts|jsx|tsx) as the entry module. You can modify the entry module using the source.entry option.

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

Rsbuild core package, providing CLI commands and JavaScript API.

create-rsbuild

create-rsbuild

Create a new Rsbuild project.

Next step

You may want: