craco
Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.
A tool that lets you customise Create React App's build configuration, webpack, Babel, ESLint, PostCSS, by adding one config file, without ejecting from CRA and losing the ability to update it.
Create React App (CRA) is a popular tool that sets up a React project with sensible defaults and a pre-configured build system. The tradeoff is that those defaults are mostly locked in, and to change them you typically have to "eject," which exposes all the internal configuration files and means you are responsible for maintaining them going forward. Once you eject, you cannot undo it.
CRACO (Create React App Configuration Override) solves this by adding a layer on top of CRA that intercepts the build configuration before it runs, allowing you to modify it without ever ejecting. You add a single file called craco.config.js to the root of your project, write your overrides there, and then replace the react-scripts commands in your package.json with craco commands. From that point on, your project starts, builds, and runs tests through CRACO, which applies your overrides before handing off to the underlying CRA tooling.
The things you can customize through CRACO include ESLint rules, Babel plugins and presets, PostCSS setup, webpack settings, and more. There is also a plugin system documented on the project website, where the full configuration API and example configs are available.
The README is brief and focuses on the three-step setup: install the package, create the config file, and update the scripts in package.json. All further documentation lives on the external website rather than in this repository.
This is a developer tool, not something end users interact with directly. If you received a React codebase that uses CRACO and are wondering what it does, it is the layer that lets the project customize its build process without having ejected from Create React App.
Where it fits
- Add a custom Babel plugin to a Create React App project without ejecting, by defining it in craco.config.js
- Override webpack settings in a CRA project to support path aliases or custom file loaders while keeping react-scripts updatable
- Set up custom ESLint rules or PostCSS plugins in a CRA project through a single CRACO config file