Create React App#

This chapter introduces how to migrate a Create React App (CRA) project to Rsbuild.

Installing Dependencies#

First, you need to replace the npm dependencies of CRA with Rsbuild's dependencies.

Remove CRA dependencies:

npm remove react-scripts

Install Rsbuild dependencies:

npm add @rsbuild/core @rsbuild/plugin-react -D

Updating npm scripts#

Next, you need to update the npm scripts in package.json to Rsbuild's CLI commands.

{
  "scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "eject": "react-scripts eject"
+   "start": "rsbuild dev",
+   "build": "rsbuild build",
+   "preview": "rsbuild preview"
  }
}

Creating Configuration File#

Create a Rsbuild configuration file rsbuild.config.ts in the same directory as package.json and add the following content:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

This completes the basic migration from CRA to Rsbuild. You can now run the npm run start command to try starting the development server.

Using SVGR#

If you are using the "SVG to React Component" feature of CRA (i.e., SVGR), you also need to install the SVGR plugin for Rsbuild.

For example, if you are using the following usage:

import { ReactComponent as Logo } from './logo.svg';

const App = () => (
  <div>
    <Logo />
  </div>
);

Please refer to the SVGR plugin documentation to learn how to use SVGR in Rsbuild.

Contents Supplement#

The current document only covers part of the migration process. If you find suitable content to add, feel free to contribute to the documentation via pull request 🤝.

The documentation for rsbuild can be found in the rsbuild/packages/document directory.