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#

Please 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()],
});

With this, the basic migration from CRA to Rsbuild is complete. 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.