gitmyhub

craco

TypeScript ★ 7.4k updated 2y ago

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.

TypeScriptNode.jswebpackBabelsetup: easycomplexity 2/5

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