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:

• Rsbuild codesandbox example

Setup Environment#

Before getting started, 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 create rsbuild@latest

Then follow the prompts to complete the operation.

Templates#

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

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 (press enter to continue)
│  ◻ Add Biome for code linting and formatting
│  ◻ Add ESLint for code linting
│  ◻ Add Prettier for code formatting
└

Current Directory#

If you need to create a project in the current directory, you can 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 options. By setting these CLI options, 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

The complete CLI options for create-rsbuild are as follows:

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            react-ts
  vue3             vue3-ts
  vue2             vue2-ts
  lit              lit-ts
  preact           preact-ts
  svelte           svelte-ts
  solid            solid-ts
  vanilla          vanilla-ts

Migrate from Existing Projects#

If you need to migrate from an existing project to Rsbuild, you can refer to the following guides:

• Migrate from Webpack
• Migrate from Create React App
• Migrate from Vue CLI
• Migrate from Vite
• Migrate from Modern.js Builder

Other Projects#

For other types of projects, you can manually install the @rsbuild/core package:

npm add @rsbuild/core -D

Then refer to the guide and documentation to enable the features you need:

• See CLI to learn about available CLI commands.
• See Plugin List to select Rsbuild plugins.
• See Configure Rsbuild to configure Rsbuild.

Command Line Interface#

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

{
  "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.

Next Step#

You may want: