#Quick start

#Online examples

We provide online examples based on Rsbuild. These examples give you an intuitive feel for the build performance of Rspack and the development experience of Rsbuild:

• 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 step by step. During setup, choose whether you need additional tools like TypeScript, ESLint, etc.

After creating the application, run these commands:

• Run git init to initialize the Git repository.
• Run npm install (or the install command of your package manager) to install npm dependencies.
• Run npm run dev to start the development server, which runs on 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 out of the box. You can also get more templates in the following ways:

• Visit Rspack - Ecosystem to learn about various higher-level tools based on Rsbuild.
• Visit awesome-rstack - Starter to find more 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 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 some CLI flags. By setting these CLI flags, you can skip the interactive selection steps and create the application with one 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 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:

• 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, 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 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.

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: