Skip to content

quick-start.mdx

Latest commit

 

History

History
264 lines (193 loc) · 8.63 KB

quick-start.mdx

File metadata and controls

264 lines (193 loc) · 8.63 KB
description Get started with Rsbuild by creating a project, starting the dev server, and building for production.

Quick start

Online examples

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

Environment preparation

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

Use one of the following installation guides to set up a runtime:

:::tip Version requirements

  • Rsbuild v2 requires Node.js version 20.19+, 22.12+.
  • Rsbuild v1 requires Node.js 18.12.0 or higher.

:::

Create an Rsbuild application

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

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command={{ npm: 'npm create rsbuild@latest', yarn: 'yarn create rsbuild', pnpm: 'pnpm create rsbuild@latest', bun: 'bun create rsbuild@latest', deno: 'deno init --npm rsbuild@latest', }} />

Follow the prompts to choose options, such as whether to add optional tools like TypeScript and ESLint.

After creating the application, do the following:

  • 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:

Template Official docs Rsbuild integration guide
vanilla Native JavaScript -
react React Using React
vue Vue 3 Using Vue
vue2 Vue 2 Using Vue
lit Lit -
preact Preact Using Preact
svelte Svelte Using Svelte
solid Solid Using Solid

create-rsbuild provides basic templates. For more options, see:

Optional tools

create-rsbuild can help you set up commonly used tools, including Rstest, Biome, ESLint, Prettier, Tailwind CSS and Storybook. Use the arrow keys to navigate and the space bar to select. Press Enter without selecting anything to skip these tools.

◆  Select additional tools (Use <space> to select, <enter> to continue)
│  ◻ Rstest - testing
│  ◻ Biome - linting & formatting
│  ◻ ESLint - linting
│  ◻ Prettier - formatting
│  ◻ Tailwind CSS - styling
│  ◻ Storybook - component development
└

:::tip

  • Biome provides similar linting and formatting features to ESLint and Prettier. If you select Biome, you typically won't need to add ESLint or Prettier.
  • When you select a React template, you can also select React Compiler as an optional tool to enable React Compiler support.

:::

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 via 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>        add additional tools, comma separated
  --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

Optional tools:
  react-compiler, rstest, biome, eslint, prettier, tailwindcss, storybook

Migrate from existing projects

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

Other projects

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

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

CLI

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

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

<a href="https://npmjs.com/package/@rsbuild/core" target="_blank" style={{ display: 'block', marginTop: '16px' }}

<img src="https://img.shields.io/npm/v/@rsbuild/core?style=flat-square&colorA=564341&colorB=EDED91" alt="@rsbuild/core" style={{ pointerEvents: 'none' }} />

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

create-rsbuild

<a href="https://npmjs.com/package/create-rsbuild" target="_blank" style={{ display: 'block', marginTop: '16px' }}

<img src="https://img.shields.io/npm/v/create-rsbuild?style=flat-square&colorA=564341&colorB=EDED91" alt="create-rsbuild" style={{ pointerEvents: 'none' }} />

Create a new Rsbuild project.

Next step

You may want:

import NextSteps from '@components/NextSteps'; import Step from '@components/Step';