Security News
JSR Working Group Kicks Off with Ambitious Roadmap and Plans for Open Governance
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
customize-cra
Advanced tools
[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)
The customize-cra package is a utility for customizing Create React App (CRA) configurations without ejecting. It allows you to override the default Webpack configuration, Babel configuration, and other settings in a CRA project.
Override Webpack Configuration
This feature allows you to override the default Webpack configuration. In this example, a Webpack alias is added to simplify imports from the 'src/components' directory.
const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = override(
addWebpackAlias({
['@components']: path.resolve(__dirname, 'src/components')
})
);
Modify Babel Configuration
This feature allows you to modify the Babel configuration. In this example, the 'babel-plugin-styled-components' plugin is added to the Babel configuration.
const { override, addBabelPlugin } = require('customize-cra');
module.exports = override(
addBabelPlugin('babel-plugin-styled-components')
);
Add PostCSS Plugins
This feature allows you to add PostCSS plugins to the configuration. In this example, the 'postcss-preset-env' plugin is added.
const { override, addPostcssPlugins } = require('customize-cra');
module.exports = override(
addPostcssPlugins([require('postcss-preset-env')])
);
react-app-rewired is a package that allows you to override Create React App configurations without ejecting. It is similar to customize-cra but provides a more general approach to modifying CRA configurations. While customize-cra provides specific functions for common modifications, react-app-rewired allows for more manual and flexible configuration changes.
CRACO (Create React App Configuration Override) is another package that allows you to customize Create React App configurations without ejecting. It is similar to customize-cra but offers a more structured and extensible way to modify CRA configurations. CRACO supports plugins and provides a more organized way to manage configuration changes.
customize-cra
📌📌 Breaking change: With the 1.0
release of customize-cra breaking changes have been made to the addLessLoader
customizer to support the changes to create-react-app
in #7876. Please follow the migration guide in #253.
This project provides a set of utilities to customize create-react-app
versions 2 and 3 configurations leveraging react-app-rewired
core functionalities.
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
"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!
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
.
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
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
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
If you want CRA 2 to work with MobX, use the addDecoratorsLegacy
and disableEsLint
.
See api.md
for documentation on the functions provided by customize-cra
.
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
.
Thanks goes to these wonderful people (emoji key):
dqu 💬 | Breeze 💻 | Terryand 💻 | m-weeks 🐛 | 吴超 💡 | James Thistlewood 💻 | taddj 💬 |
MeiLin 💻 | Graham Crockford 🤔 | afei 💻 | zoomdong 💻 | Danilo Campana Fuchs 💻 | Rodrigo Narvaez 💻 | blackmatch 💻 |
billypon 💻 | Juetta 💻 | LING_ZI_QING 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)
The npm package customize-cra receives a total of 142,816 weekly downloads. As such, customize-cra popularity was classified as popular.
We found that customize-cra demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.