Guide
Config
Plugin
API
Blog
About
Contribute
Guide
Config
Plugin
API
Blog
About
Contribute

Quick start

Get up to speed quickly with a new Rspack based project.

Creating project using scaffolding

Using Rsbuild

Rsbuild is a new generation build tool based on Rspack and developed by the Rspack team. It provides out-of-the-box build capabilities that can significantly improve the development experience and lower the barrier to get started.

We recommend using Rsbuild to create new projects, simply run the following command:

npm
yarn
pnpm
bun
npm create rsbuild@latest

For more information, refer to Rsbuild - Quick Start.

Using the Rspack CLI

Rspack CLI is a tool comparable to Webpack CLI, offering the basic serve and build commands.

Run the following command to create an Rspack CLI project:

npm
yarn
pnpm
bun
npm create rspack@latest

Then follow the prompts in your terminal.

Online examples

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:

Migrating from existing projects

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

Community toolchain

There are already some Rspack-based toolchains in the community:

  • If you want to build a static site, you can try Rspress.
  • If you want to analyze the build process and build artifacts, you can try Rsdoctor.
  • If you're looking for a full-stack React framework, you can try Modern.js.
  • If you want a fast and production-ready setup that works in a monorepo, you can try Nx.

Rspress

Rspress is a static site generator based on Rspack. It provides a complete solution for building static sites and includes the following features:

  • 🚀 Fast Startup: Based on Rust-based build tool and markdown/mdx compiler, the build speed is extremely fast, bringing you the ultimate development experience.
  • 📚 MDX Support: MDX is a powerful way to write content, allowing you to use React components in Markdown.
  • 📦 Built-in Full Text Search: Automatically generates a full-text search index for you during building process, providing out-of-the-box full-text search capabilities.
  • 🌈 Static Site Generation: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
  • 🔌 Providing Plugin System: Providing a plugin system, you can customize the build process and theme according to your needs.

Learn more about Rspress in the official documentation.

Modern.js

Modern.js Framework is a Rspack-based progressive React framework that provides a complete solution for building web applications. It supports nested routes, server-side rendering, and provides out-of-the-box CSS solutions such as styled components and Tailwind CSS.

Learn more about Modern.js in the official documentation.

Using Nx

The fastest way to get up to speed quickly and leverage Rspack and React in a production-ready setting is to use the dedicated Rspack Nx plugin. This gives you a pre-configured setup, integrating Rspack with React, TypeScript, ESLint, Jest, and Cypress for e2e testing.

Run the following command to set up a new Nx workspace with React and Rspack:

npm
yarn
pnpm
npx create-nx-workspace myrspackapp --preset=@nx/rspack

The pre-configured setup is already ready to work with Rspack, TypeScript, TSX and React. In addition it also comes with Jest and Cypress for testing and ESLint for linting.

Once created you can simply npm start (or pnpm start or yarn start) to start the development server. You can also run npm run build (or pnpm run build or yarn run build) to build the application for production and similarly run npm run test (or pnpm run test or yarn run test) to run the unit tests.

You can learn more about Nx at https://nx.dev.

Manual installation

Installation

We'll start by creating a project directory, generating an NPM package.json, and then installing @rspack/cli locally:

npm
yarn
pnpm
mkdir rspack-demo
cd rspack-demo
npm init -y
npm install -D @rspack/cli