0
# React App Rewired
1

2
React App Rewired allows you to tweak the create-react-app webpack configuration without ejecting and without creating a fork of react-scripts. It provides a way to customize webpack, Jest, dev server, and paths configurations through a simple override system.
3

4
## Package Information
5

6
- **Package Name**: react-app-rewired
7
- **Package Type**: npm
8
- **Language**: JavaScript/Node.js
9
- **Installation**: `npm install react-app-rewired --save-dev`
10

11
## Core Imports
12

13
```javascript
14
// Main module exports (most helpers deprecated as of v2.0)
15
const reactAppRewired = require('react-app-rewired');
16
const { paths } = require('react-app-rewired');
17

18
// For third-party webpack config integration
19
const overrides = require('react-app-rewired/config-overrides');
20
```
21

22
## Basic Usage
23

24
### 1. Install and Configure
25

26
```bash
27
npm install react-app-rewired --save-dev
28
```
29

30
### 2. Create Configuration File
31

32
Create `config-overrides.js` in your project root:
33

34
```javascript
35
module.exports = function override(config, env) {
36
  // Modify the webpack config
37
  return config;
38
};
39
```
40

41
### 3. Update Package Scripts
42

43
```json
44
{
45
  "scripts": {
46
    "start": "react-app-rewired start",
47
    "build": "react-app-rewired build", 
48
    "test": "react-app-rewired test"
49
  }
50
}
51
```
52

53
## Architecture
54

55
React App Rewired is built around several key components:
56

57
- **CLI Interface**: Command-line tool that intercepts react-scripts commands
58
- **Override System**: Configuration files that modify webpack, Jest, and dev server settings
59
- **Script Wrappers**: Modified versions of react-scripts that apply overrides before execution
60
- **Path Resolution**: Custom path handling for different react-scripts versions
61
- **Memory Patching**: Runtime modification of require cache to apply overrides
62

63
## Capabilities
64

65
### CLI Commands
66

67
Command-line interface for running customized create-react-app scripts with webpack and configuration overrides.
68

69
```javascript { .api }
70
// Available commands
71
"react-app-rewired start"   // Development server with overrides
72
"react-app-rewired build"   // Production build with overrides  
73
"react-app-rewired test"    // Test runner with Jest overrides
74
```
75

76
[CLI Commands](./cli-commands.md)
77

78
### Configuration Override System
79

80
Core system for customizing webpack, Jest, dev server, and paths configurations through override functions.
81

82
```javascript { .api }
83
// Single function export
84
module.exports = function override(config, env) {
85
  return config;
86
};
87

88
// Object export with multiple override functions
89
module.exports = {
90
  webpack: function(config, env) { return config; },
91
  jest: function(config) { return config; },
92
  devServer: function(configFunction) { return configFunction; },
93
  paths: function(paths, env) { return paths; }
94
};
95
```
96

97
[Configuration Overrides](./configuration-overrides.md)
98

99
### Utilities and Helpers
100

101
Utility functions and path resolution helpers for accessing react-scripts internals and integrating with third-party tools.
102

103
```javascript { .api }
104
// Main module exports
105
const {
106
  getLoader,           // function - deprecated, throws error
107
  loaderNameMatches,   // function - deprecated, throws error
108
  getBabelLoader,      // function - deprecated, throws error
109
  injectBabelPlugin,   // function - deprecated, throws error
110
  compose,             // function - deprecated, throws error
111
  paths                // object - current paths configuration
112
} = require('react-app-rewired');
113

114
// Dependency resolution utilities
115
const { dependRequire, dependRequireResolve } = require('react-app-rewired/scripts/utils/dependRequire');
116

117
// Jest configuration utilities  
118
const rewireJestConfig = require('react-app-rewired/scripts/utils/rewireJestConfig');
119
```
120

121
[Utilities and Helpers](./utilities-helpers.md)
122

123
## Types
124

125
```javascript { .api }
126
interface OverrideFunction {
127
  (config: any, env: string): any;
128
}
129

130
interface DevServerOverrideFunction {
131
  (configFunction: Function, env: string): Function;
132
}
133

134
interface JestOverrideFunction {
135
  (config: any): any;
136
}
137

138
interface PathsOverrideFunction {
139
  (paths: any, env: string): any;
140
}
141

142
interface ConfigOverrides {
143
  webpack?: OverrideFunction;
144
  jest?: JestOverrideFunction;
145
  devServer?: DevServerOverrideFunction;
146
  paths?: PathsOverrideFunction;
147
}
148
```