customize-cra
This project provides a set of utilities to customize create-react-app
versions 2 and 3 configurations leveraging react-app-rewired
core functionalities.
How to install
This project relies on react-app-rewired
. You'll need to install that in order for customize-cra
to work.
yarn add customize-cra react-app-rewired --dev
β Warning
"Stuff can break" - Dan Abramov
Using this library will override the default behavior and configuration of create-react-app
, therefore invalidating the guarantees that come with it. Use with discretion!
Overview
customize-cra
takes advantage of react-app-rewired
's config-overrides.js
file. By importing customize-cra
functions and exporting a few function calls wrapped in our override
function, you can easily modify the underlying config objects (webpack
, webpack-dev-server
, babel
, etc.) that make up create-react-app
.
Usage
Note: all code should be added to config-overrides.js
at the same level as package.json
.
See the api docs for documentation for each function.
webpack
With To use these plugins, import the override
function, and call it with whatever plugins you need. Each of these plugin invocations will return a new function, that override
will call with the newly modified config object. Falsy values will be ignored though, so if you need to conditionally apply any of these plugins, you can do so like below.
For example:
const {
override,
addDecoratorsLegacy,
disableEsLint,
addBundleVisualizer,
addWebpackAlias,
adjustWorkbox
} = require("customize-cra");
const path = require("path");
module.exports = override(
// enable legacy decorators babel plugin
addDecoratorsLegacy(),
// disable eslint in webpack
disableEsLint(),
// add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
// add an alias for "ag-grid-react" imports
addWebpackAlias({
["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
}),
// adjust the underlying workbox
adjustWorkbox(wb =>
Object.assign(wb, {
skipWaiting: true,
exclude: (wb.exclude || []).concat("index.html")
})
)
);
webpack-dev-server
With You can use the overrideDevServer
function to override the webpack-dev-server
config. It works the same way as override
:
const {
override,
disableEsLint,
overrideDevServer,
watchAll
} = require("customize-cra");
module.exports = {
webpack: override(
// usual webpack plugin
disableEsLint()
),
devServer: overrideDevServer(
// dev server plugin
watchAll()
)
};
MobX
With If you want CRA 2 to work with MobX, use the addDecoratorsLegacy
and disableEsLint
.
Documentation
See api.md
for documentation on the functions provided by customize-cra
.
Contributing
For more information about contributing to this project, like a directory map or a how-to for reporting an issue about the project, please see contributing.md
.
Contributors β¨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!