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

⚠️ make sure you have react-app-rewired installed. You need to use this project with react-app-rewired; be sure to read their docs if you never have. The code in this project, documented below, is designed to work inside of react-app-rewired's config-overrides.js file.

npm

npm install customize-cra --save-dev

yarn

yarn add customize-cra --dev

Warning

"Stuff can break" - Dan Abramov

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

Overview

To start, this project will export functions I need for what I'm using CRA for, but PRs will of course be welcome.

The functions documented below can be imported by name, and used in your config-overrides.js file, as explained below.

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.