CRACO (Create React App Configuration Override)

CRACO allows you to customize the configuration of a Create React App project without having to eject. You can override settings for tools like ESLint, Babel, PostCSS, and more using a single configuration file located at the root of your project.

Warning: Using CRACO breaks the configuration guarantees provided by Create React App. By using it, you take ownership of your configurations, and the project does not provide support for the underlying CRA settings.

If you are using TypeScript and encounter a "Cannot find module" error when importing HTML files (e.g., import foo from './foo.html';), add the following declaration to your typings.d.ts file to allow HTML modules to be treated as strings.

/**
 * To resolve "Cannot find module error on importing html file in webpack" if you use Typescript
 * Usage: import foo from './foo.html';
 */
declare module '*.html' {
  const value: string;
  export default value;
}

To use less-loader in a Create React App project managed by CRACO, install the craco-less plugin and add it to the plugins array in your craco.config.js file. You can pass configuration options to the plugin, such as noIeCompat.

// Official documentation available at: https://github.com/FormAPI/craco-less

module.exports = {
  plugins: [
    {
      plugin: require('craco-less'),
      options: {
        noIeCompat: true,
      },
    },
  ],
};

Generate static content for the website. The output will be placed in the build directory and can be hosted on any static content hosting service.

yarn build

CRACO looks for configuration files in a specific order of precedence. You can use any of the following filenames:

1. craco.config.ts
2. craco.config.js
3. craco.config.cjs
4. .cracorc.ts
5. .cracorc.js
6. .cracorc

If multiple files exist, the one highest on this list is used. You can also override this behavior by specifying a path in your package.json or via the CLI.

By default, Create React App (CRA) manages ESLint configuration internally. To use your own external ESLint configuration file (e.g., .eslintrc.js), set the eslint.mode option to 'file' in your craco.config.js file.

// craco.config.js
module.exports = {
  eslint: {
    mode: 'file',
  },
};

The website can be deployed using different methods depending on your hosting setup.

Deploy via SSH

Use the USE_SSH=true environment variable to deploy via SSH:

USE_SSH=true yarn deploy

Deploy to GitHub Pages

To deploy to GitHub Pages (which pushes the build to the gh-pages branch), provide your GitHub username via the GIT_USER environment variable:

GIT_USER=<Your GitHub username> yarn deploy

To use CRACO in your project, install the @craco/craco package as a development dependency using npm.

npm i -D @craco/craco

To get type checking and IDE autocompletion in your craco.config.js file, install the @craco/types package as a dev dependency.

npm i -D @craco/types

To use babel-plugin-react-css-modules in a Create React App project via CRACO, you must synchronize the localIdentName in the style.modules configuration with the generateScopedName option in the babel.plugins configuration. This ensures that the class names generated by CSS Modules match the names expected by the Babel plugin when transforming component attributes.

Example configuration for craco.config.js:

const CSS_MODULE_LOCAL_IDENT_NAME = '[local]___[hash:base64:5]';

module.exports = {
  style: {
    modules: {
      localIdentName: CSS_MODULE_LOCAL_IDENT_NAME,
    },
  },
  babel: {
    plugins: [
      [
        'babel-plugin-react-css-modules',
        {
          generateScopedName: CSS_MODULE_LOCAL_IDENT_NAME,
          attributeNames: { activeStyleName: 'activeClassName' },
        },
      ],
    ],
  },
};