or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

babel-customizers.mdcore-overrides.mdindex.mdutilities.mdwebpack-customizers.md
tile.json

tessl/npm-customize-cra

A set of utilities to customize create-react-app configurations leveraging react-app-rewired core functionalities

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/customize-cra@1.0.x

To install, run

npx @tessl/cli install tessl/npm-customize-cra@1.0.0

index.mddocs/

Customize CRA

Customize CRA provides a comprehensive set of utilities to customize create-react-app configurations by leveraging react-app-rewired functionality. It offers a wide range of customizers for webpack, babel, and dev-server configurations including adding babel plugins/presets, configuring loaders (Less, PostCSS, TypeScript), disabling ESLint, adding webpack aliases, bundle visualization, and workbox adjustments.

Package Information

  • Package Name: customize-cra
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install customize-cra react-app-rewired --dev

Core Imports

const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra");

For ES modules:

import { override, addDecoratorsLegacy, disableEsLint } from "customize-cra";

Basic Usage

Customize CRA works by creating a config-overrides.js file that uses the override function to compose multiple customizers:

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // Enable legacy decorators babel plugin
  addDecoratorsLegacy(),
  
  // Disable eslint in webpack
  disableEsLint(),
  
  // Add webpack bundle visualizer conditionally
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
  
  // Add webpack alias
  addWebpackAlias({
    ["@components"]: path.resolve(__dirname, "src/components")
  })
);

For webpack-dev-server customization:

const { override, overrideDevServer, watchAll } = require("customize-cra");

module.exports = {
  webpack: override(
    // webpack customizers here
  ),
  devServer: overrideDevServer(
    // dev server customizers here
    watchAll()
  )
};

Architecture

Customize CRA is built around several key components:

  • Override Functions: Core composition functions (override, overrideDevServer) that use lodash.flow to apply multiple customizers
  • Functional Composition: All customizers follow the pattern (options) => (config) => modifiedConfig for easy composition
  • Configuration Targeting: Separate customizers for webpack, babel, and dev-server configurations
  • Utility Functions: Helper functions like getBabelLoader and tap for navigating and debugging configurations

Capabilities

Core Override Functions

Main functions for composing configuration customizers with functional composition approach.

/**
 * Composes multiple customizer functions using lodash.flow
 * @param {...Function} plugins - Customizer functions to apply
 * @returns {Function} Composed configuration function
 */
function override(...plugins);

/**
 * Compose customizers for webpack-dev-server configuration
 * @param {...Function} plugins - Dev server customizer functions
 * @returns {Function} Dev server configuration function
 */
function overrideDevServer(...plugins);

Core Override Functions

Babel Customizers

Configuration customizers for Babel transpilation including plugins, presets, and loader options.

/**
 * Add plugin to babel configuration
 * @param {string|Array} plugin - Babel plugin name or [name, options] array
 * @returns {Function} Configuration customizer function
 */
function addBabelPlugin(plugin);

/**
 * Add preset to babel configuration  
 * @param {string|Array} preset - Babel preset name or [name, options] array
 * @returns {Function} Configuration customizer function
 */
function addBabelPreset(preset);

/**
 * Add legacy decorators support
 * @returns {Function} Configuration customizer function
 */
function addDecoratorsLegacy();

Babel Customizers

Webpack Customizers

Configuration customizers for webpack including loaders, plugins, aliases, and build optimization.

/**
 * Remove ESLint from webpack configuration
 * @returns {Function} Configuration customizer function
 */
function disableEsLint();

/**
 * Add webpack resolve aliases
 * @param {Object} alias - Object mapping alias names to paths
 * @returns {Function} Configuration customizer function  
 */
function addWebpackAlias(alias);

/**
 * Add plugin to webpack configuration
 * @param {Object} plugin - Webpack plugin instance
 * @returns {Function} Configuration customizer function
 */
function addWebpackPlugin(plugin);

/**
 * Add webpack-bundle-analyzer plugin
 * @param {Object} options - Bundle analyzer options
 * @param {boolean} behindFlag - Whether to only enable with --analyze flag
 * @returns {Function} Configuration customizer function
 */
function addBundleVisualizer(options = {}, behindFlag = false);

Webpack Customizers

Utilities

Helper functions for navigating webpack configurations and debugging.

/**
 * Extracts babel loader from webpack config
 * @param {Object} config - Webpack configuration object
 * @param {boolean} isOutsideOfApp - Whether to get loader for files outside src/
 * @returns {Object} Babel loader configuration object
 */
function getBabelLoader(config, isOutsideOfApp);

/**
 * Debug utility for inspecting configuration objects
 * @param {Object} options - Options object with message and dest properties
 * @returns {Function} Configuration pass-through function with logging
 */
function tap(options);

Utilities

Types

/**
 * Configuration customizer function type
 * @callback ConfigCustomizer
 * @param {Object} config - Webpack configuration object to modify
 * @returns {Object} Modified webpack configuration object
 */

/**
 * Dev server customizer function type  
 * @callback DevServerCustomizer
 * @param {Object} config - Dev server configuration object to modify
 * @returns {Object} Modified dev server configuration object
 */

/**
 * Tap options for debugging configurations
 * @typedef {Object} TapOptions
 * @property {string} [message] - Message to print before configuration
 * @property {string} [dest] - File path to write logs to
 */