#Quick start

#Online examples

We provide online Rsbuild examples that showcase Rspack's build performance and Rsbuild's development experience:

• StackBlitz example
• CodeSandbox example

#Environment preparation

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

Use the following installation guides to choose a runtime:

• Install Node.js
• Install Bun
• Install Deno

#Create an Rsbuild application

Use create-rsbuild to create a new Rsbuild application. Run the following command:

npm create rsbuild@latest

yarn create rsbuild

pnpm create rsbuild@latest

bun create rsbuild@latest

deno init --npm rsbuild@latest

Follow the prompts to choose from available options, including whether to add optional tools like TypeScript and ESLint.

After creating the application, complete these steps:

• Run git init to initialize a Git repository.
• Run npm install (or your package manager's install command) to install dependencies.
• Run npm run dev to start the dev server, which runs on http://localhost:3000 by default.

#Templates

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

create-rsbuild provides basic templates. You can find more templates at:

• Visit Rspack - Ecosystem to learn about higher-level tools built on Rsbuild.
• Visit awesome-rstack - Starter for community-maintained templates.

#Optional tools

create-rsbuild can help you set up commonly used tools, including Biome, ESLint, Prettier, and Storybook. Use the arrow keys to navigate and the space bar to select. Press Enter without selecting anything if you don't need these tools.

◆  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
│  ◻ Add Storybook for component development
└

#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 supports a non-interactive mode through 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:

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

All CLI flags supported by create-rsbuild:

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
  --tools <tool>        select additional tools (biome, eslint, prettier, storybook)
  --override            override files in target directory
  --packageName <name>  specify the package name

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:

• Migrate from webpack
• Migrate from Create React App
• Migrate from Vue CLI
• Migrate from Vite
• Migrate from Modern.js Builder
• Migrate from Tsup to Rslib
• Migrate from Storybook to Storybook Rsbuild

#Other projects

If your project doesn't match the above migration guides, you can manually install the @rsbuild/core package:

npm add @rsbuild/core -D

yarn add @rsbuild/core -D

pnpm add @rsbuild/core -D

bun add @rsbuild/core -D

deno add npm:@rsbuild/core -D

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

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

#CLI

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

{
  "scripts": {
    // start the dev server
    "dev": "rsbuild dev",
    // build 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.

export default {
  source: {
    entry: {
      foo: './src/pages/foo/index.ts',
      bar: './src/pages/bar/index.ts',
    },
  },
};

#Core packages

#@rsbuild/core

Core Rsbuild package that provides the CLI commands and JavaScript API.

#create-rsbuild

Create a new Rsbuild project.

#Next step

You may want: