customize-cra

What is customize-cra?

The customize-cra package is a utility for customizing Create React App (CRA) configurations without ejecting. It allows you to override the default Webpack configuration, Babel configuration, and other settings in a CRA project.

What are customize-cra's main functionalities?

Override Webpack Configuration

This feature allows you to override the default Webpack configuration. In this example, a Webpack alias is added to simplify imports from the 'src/components' directory.

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    ['@components']: path.resolve(__dirname, 'src/components')
  })
);

Modify Babel Configuration

This feature allows you to modify the Babel configuration. In this example, the 'babel-plugin-styled-components' plugin is added to the Babel configuration.

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('babel-plugin-styled-components')
);

Add PostCSS Plugins

This feature allows you to add PostCSS plugins to the configuration. In this example, the 'postcss-preset-env' plugin is added.

const { override, addPostcssPlugins } = require('customize-cra');

module.exports = override(
  addPostcssPlugins([require('postcss-preset-env')])
);

Other packages similar to customize-cra

react-app-rewired

react-app-rewired is a package that allows you to override Create React App configurations without ejecting. It is similar to customize-cra but provides a more general approach to modifying CRA configurations. While customize-cra provides specific functions for common modifications, react-app-rewired allows for more manual and flexible configuration changes.

craco

CRACO (Create React App Configuration Override) is another package that allows you to customize Create React App configurations without ejecting. It is similar to customize-cra but offers a more structured and extensible way to modify CRA configurations. CRACO supports plugins and provides a more organized way to manage configuration changes.

README

customize-cra

This project provides a set of utilities to customize create-react-app versions 2 and 3 configurations leveraging react-app-rewired core functionalities.

• How to install
• Warning
• Overview
• Usage
  • With webpack
  • With webpack-dev-server
  • With MobX
• Documentation
• Contributing
• Contributors

How to install

This project relies on react-app-rewired. You'll need to install that in order for customize-cra to work.

yarn add customize-cra react-app-rewired --dev

❗ Warning

"Stuff can break" - Dan Abramov

Using this library will override the default behavior and configuration of create-react-app, therefore invalidating the guarantees that come with it. Use with discretion!

Overview

customize-cra takes advantage of react-app-rewired's config-overrides.js file. By importing customize-cra functions and exporting a few function calls wrapped in our override function, you can easily modify the underlying config objects (webpack, webpack-dev-server, babel, etc.) that make up create-react-app.

Usage

Note: all code should be added to config-overrides.js at the same level as package.json.

See the api docs for documentation for each function.

With webpack

To use these plugins, import the override function, and call it with whatever plugins you need. Each of these plugin invocations will return a new function, that override will call with the newly modified config object. Falsy values will be ignored though, so if you need to conditionally apply any of these plugins, you can do so like below.

For example:

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox
} = 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 if BUNDLE_VISUALIZE flag is enabled
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
  }),

  // adjust the underlying workbox
  adjustWorkbox(wb =>
    Object.assign(wb, {
      skipWaiting: true,
      exclude: (wb.exclude || []).concat("index.html")
    })
  )
);

With webpack-dev-server

You can use the overrideDevServer function to override the webpack-dev-server config. It works the same way as override:

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

module.exports = {
  webpack: override(
    // usual webpack plugin
    disableEsLint()
  ),
  devServer: overrideDevServer(
    // dev server plugin
    watchAll()
  )
};

With MobX

If you want CRA 2 to work with MobX, use the addDecoratorsLegacy and disableEsLint.

Documentation

See api.md for documentation on the functions provided by customize-cra.

Contributing

For more information about contributing to this project, like a directory map or a how-to for reporting an issue about the project, please see contributing.md.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

dqu 💬	Breeze 💻	Terryand 💻	m-weeks 🐛	吴超 💡	James Thistlewood 💻	taddj 💬
MeiLin 💻	Graham Crockford 🤔	afei 💻	zoomdong 💻

This project follows the all-contributors specification. Contributions of any kind welcome!