Quick Start Guide

This guide will walk you through the essential steps to rewire your create-react-app project.

Step 1: Install react-app-rewired

First, make sure you have installed react-app-rewired as a development dependency. If you haven't, please follow the Installation guide.

Step 2: Create config-overrides.js

In the root directory of your project (the same level as package.json), create a file named config-overrides.js.

Your project structure should look like this:

+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

Add the following basic configuration to your new config-overrides.js file. This function receives the default webpack config and allows you to modify and return it.

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

Step 3: Modify package.json Scripts

Next, update the scripts section of your package.json to use react-app-rewired instead of react-scripts for the start, build, and test commands.

Important: Do not change the eject script. react-app-rewired is an alternative to ejecting, and the eject script is no longer needed.

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}

Step 4: Run Your App

That's it! You can now start your development server as you normally would.

npm start
# or
yarn start

Your app will run with your customized configuration. To add customizations, modify the override function in your config-overrides.js file. For more details, see the Configuration Guide.