Craco screenshot

Craco

Author Avatar Theme by Dilanx
Updated: 29 Dec 2023
7456 Stars

Create React App Configuration Override, an easy and comprehensible configuration layer for Create React App.

Categories

Overview:

Create React App Configuration Override (CRACO) is a convenient and easy-to-understand configuration layer for create-react-app. It provides a simple way to configure and customize ESLint, Babel, PostCSS configurations, and more without having to eject from Create React App. By adding a single configuration file (e.g., craco.config.js) to the root of your application, you can enjoy all the benefits of Create React App while still being able to customize it to suit your needs.

Features:

  • Easy Configuration: Customize ESLint, Babel, PostCSS, and more through a single configuration file.
  • Avoid Ejecting: Modify Create React App settings without needing to eject from its default configuration.
  • Comprehensive Documentation: Find detailed config docs, API docs, plugins, and example configs at craco.js.org.

Installation:

To start using CRACO, follow these steps:

  1. Install CRACO as a dev dependency:
npm install @craco/craco --save
  1. Create a CRACO configuration file (e.g., craco.config.js) in your project’s root directory and configure it according to your needs.

  2. Update the existing calls to react-scripts in the scripts section of your package.json to use the craco CLI:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
  1. For more information and detailed configurations, visit craco.js.org.

Summary:

Create React App Configuration Override (CRACO) offers an intuitive way to customize Create React App configurations without the need to eject. By adding a single configuration file, users can tweak ESLint, Babel, PostCSS configurations, and more. With its comprehensive documentation and ease of use, CRACO provides a seamless solution for developers looking to tailor Create React App to their specific requirements.