CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-app-rewired

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

cli-commands.mddocs/

CLI Commands

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

Capabilities

React App Rewired Command

Main CLI command that replaces react-scripts commands with override-enabled versions.

react-app-rewired <command> [options]

# Available commands:
# start  - Run development server with overrides
# build  - Run production build with overrides  
# test   - Run test suite with Jest overrides
# eject  - Pass through to react-scripts eject

Command Detection Logic:

// CLI finds command using this logic from bin/index.js
const scriptIndex = args.findIndex(
  x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
);
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];

Command Line Options:

--scripts-version <package>     # Use custom react-scripts package
--config-overrides <path>       # Custom config-overrides location

Usage Examples:

# Standard usage
react-app-rewired start
react-app-rewired build
react-app-rewired test

# With custom scripts version
react-app-rewired start --scripts-version react-scripts-ts
react-app-rewired build --scripts-version react-scripts-ts

# With custom config-overrides location
react-app-rewired start --config-overrides ./custom/overrides.js

Start Command

Runs the development server with webpack and dev server overrides applied.

react-app-rewired start [options]

Process:

  1. Sets NODE_ENV to 'development' (if not already set)
  2. Applies paths overrides to memory
  3. Applies webpack configuration overrides
  4. Applies dev server configuration overrides
  5. Delegates to original react-scripts start

Build Command

Runs the production build with webpack overrides applied.

react-app-rewired build [options]

Process:

  1. Sets NODE_ENV to 'production'
  2. Applies paths overrides to memory
  3. Applies webpack configuration overrides
  4. Delegates to original react-scripts build

Test Command

Runs the test suite with Jest configuration overrides applied.

react-app-rewired test [options]

Process:

  1. Sets NODE_ENV to 'test' (if not already set)
  2. Applies paths overrides to memory
  3. Applies Jest configuration overrides
  4. Strips custom command line arguments from process.argv
  5. Delegates to original react-scripts test

Note: The --scripts-version and --config-overrides arguments are automatically stripped before passing to the original test script to avoid rejection.

Error Handling

The CLI handles various error scenarios with specific signal detection:

// Signal handling for build interruption from bin/index.js
if (result.signal) {
  if (result.signal === 'SIGKILL') {
    console.log(
      'The build failed because the process exited too early. ' +
      'This probably means the system ran out of memory or someone called ' +
      '`kill -9` on the process.'
    );
  } else if (result.signal === 'SIGTERM') {
    console.log(
      'The build failed because the process exited too early. ' +
      'Someone might have called `kill` or `killall`, or the system could ' +
      'be shutting down.'
    );
  }
  process.exit(1);
}

// Unknown command handling
console.log('Unknown script "' + script + '".');
console.log('Perhaps you need to update react-scripts?');
console.log(
  'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases'
);

Environment Variables

// Supported environment variables
REACT_SCRIPTS_VERSION  // Override react-scripts package name
NODE_ENV              // Set by commands (development/production/test)

Package.json Configuration

{
  "config-overrides-path": "node_modules/some-preconfigured-rewire"
}

Custom path for config-overrides.js file, useful for using third-party override configurations.

Install with Tessl CLI

npx tessl i tessl/npm-react-app-rewired

docs

cli-commands.md

configuration-overrides.md

index.md

utilities-helpers.md

tile.json