#Quick start

#Online examples

We provide online examples based on Rsbuild. These examples demonstrate 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.

You can refer to the following installation guides and 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

Follow the prompts to choose from available options. During setup, you can select whether to add optional tools like TypeScript and ESLint.

After creating the application, follow 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:5173 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, and Prettier. Use the arrow keys and space bar to make your selections. If you don't need these tools, 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
└

#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

#Quick creation

create-rsbuild provides CLI flags that let you skip the interactive prompts and create applications with a single command.

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

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

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

# Specify multiple tools
npx create-rsbuild -d my-app -t react --tools eslint --tools prettier

All CLI flags supported by 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:

• 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

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

Rsbuild core package, providing CLI commands and JavaScript API.

#create-rsbuild

Create a new Rsbuild project.

#Next step

You may want: