dilanx/craco

★ 7,435TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((craco))
    What it does
      Overrides CRA config
      No eject needed
      Intercepts build step
    Customisable areas
      webpack settings
      Babel plugins
      ESLint rules
      PostCSS setup
    Setup
      Install CRACO package
      Add craco.config.js
      Update package.json scripts
    Audience
      React developers
      CRA project owners

mindmap root((craco)) What it does Overrides CRA config No eject needed Intercepts build step Customisable areas webpack settings Babel plugins ESLint rules PostCSS setup Setup Install CRACO package Add craco.config.js Update package.json scripts Audience React developers CRA project owners

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a custom Babel plugin to a Create React App project without ejecting, by defining it in craco.config.js

USE CASE 2

Override webpack settings in a CRA project to support path aliases or custom file loaders while keeping react-scripts updatable

USE CASE 3

Set up custom ESLint rules or PostCSS plugins in a CRA project through a single CRACO config file

Tech stack

TypeScriptNode.jswebpackBabel

Getting it running

Difficulty · easy Time to first run · 5min

Full configuration API and plugin system docs live on the external CRACO website, not in this repository.

In plain English

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.

Copy-paste prompts

Prompt 1

I have a Create React App project and want to use CRACO to add webpack path aliases. Show me the craco.config.js I need and how to update the package.json scripts.

Prompt 2

Using dilanx/craco, how do I add a Babel plugin to my CRA project? Show me the install command and the craco.config.js entry.

Prompt 3

My CRA project uses CRACO. How do I override the webpack config to add a custom loader for SVG files as React components?

Prompt 4

What do I need to change in package.json when switching a Create React App project from react-scripts to craco commands?

Open on GitHub → Explain another repo

← dilanx on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.