Gathering detailed insights and metrics for customize-cra
Gathering detailed insights and metrics for customize-cra
Gathering detailed insights and metrics for customize-cra
Gathering detailed insights and metrics for customize-cra
@types/customize-cra
TypeScript definitions for customize-cra
customize-cra-less-loader
Add less loader to any create-react-app using customize-cra
customize-cra-react-refresh
Add react-refresh to any create-react-app using customize-cra
customize-cra-eslint
customize cra use eslint config
Override webpack configurations for create-react-app 2.0
npm install customize-cra
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
2,783 Stars
148 Commits
268 Forks
22 Watching
22 Branches
37 Contributors
Updated on 20 Nov 2024
JavaScript (100%)
Cumulative downloads
Total Downloads
Last day
0.2%
36,622
Compared to previous day
Last week
-3.1%
185,840
Compared to previous week
Last month
6.2%
810,284
Compared to previous month
Last year
-7.9%
9,637,896
Compared to previous year
1
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.
1yarn 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:
1const {
2 override,
3 addDecoratorsLegacy,
4 disableEsLint,
5 addBundleVisualizer,
6 addWebpackAlias,
7 adjustWorkbox
8} = require("customize-cra");
9const path = require("path");
10
11module.exports = override(
12 // enable legacy decorators babel plugin
13 addDecoratorsLegacy(),
14
15 // disable eslint in webpack
16 disableEsLint(),
17
18 // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
19 process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),
20
21 // add an alias for "ag-grid-react" imports
22 addWebpackAlias({
23 ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
24 }),
25
26 // adjust the underlying workbox
27 adjustWorkbox(wb =>
28 Object.assign(wb, {
29 skipWaiting: true,
30 exclude: (wb.exclude || []).concat("index.html")
31 })
32 )
33);
webpack-dev-server
You can use the overrideDevServer
function to override the webpack-dev-server
config. It works the same way as override
:
1const { 2 override, 3 disableEsLint, 4 overrideDevServer, 5 watchAll 6} = require("customize-cra"); 7 8module.exports = { 9 webpack: override( 10 // usual webpack plugin 11 disableEsLint() 12 ), 13 devServer: overrideDevServer( 14 // dev server plugin 15 watchAll() 16 ) 17};
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!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 10/26 approved changesets -- score normalized to 3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
64 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More