☢ @revolut/cra-overrides ☢
This project give you two functions + one script to override Create React App
using react-app-rewired in our own nicely tested and unified way.
Below you will find some information on how to perform common tasks.
You can find the most recent version of create-react-app
(CRA further) default capabilities in this guide
here.
Getting started
Make sure your app is based on create-react-app
Follow getting started from react-app-rewired
(RAR - in followed text)
# it has dependecies on customize-cra stuff, so we need it as peer dependency + rewired since it makes not sense without it, prettier (optional, read below)
yarn add @revolut/cra-overrides react-app-rewired customize-cra prettier --dev
NOTE: Prettier can be ignored, if you're not going to use revolut-scripts format
nor revolut-react
ESLint preset in your project.
Then add following code into your config-overrides.js
const { webpackRevolutOverrides, jestOverride } = require('@revolut/cra-overrides')
module.exports = {
webpack: webpackRevolutOverrides,
jest: jestOverride,
}
You're done, you don't need to do anything unless you want to customize something using powers of RAR.
To customize default prepacked and tested to be compatible features please use configuration options below adding them into your .env
files
(supports other environments .env
s such as .env.development
etc., take a look at CRA docs)
📝 Configuration options
All CRA defaults are supported, but some are disabled cause defaults are suboptimal (especially for big projects).
What is disabled and cannot be changed back to defaults
yarn start
and yarn build
-
When yarn start
ESLint is not running through Webpack. E.g. ESLint loader is switched off. This is proved
to destroy performance of initial and incremental builds by 1000% for huge projects.
-
TS Compilation is outloaded to a separate worker in dev, so it's enabled in yarn start
mode but disabled in yarn build
mode. Since running tsc
in parallel is proven to be faster than pass it through Webpack pipelines.
-
TS Compilation errors treated as warnings in dev mode by default not to break app, giving developer ability to iterate faster
and fix types later once your code/logic whatever is done.
What @cra-overrides defaults give.
All setup is goes through the .env since it's easier to maintain and it's backward compatible with old fork of react-scripts
In the future we may get rid of this practice. But .env is kinda convenient anyway cause of abilities it gives for CI/CD customizations etc.
Below is the list of the possbile envs:
Babel
REACT_APP_STYLED_COMPONENTS=true
- enable styled-components babel
plugin with optimal defaults (default: true)REACT_APP_POLISHED=true
- enable polished babel plugin (default: true)REACT_APP_RAMDA=false
- enable ramda babel plugin (default: false)REACT_APP_LODASH=true
- enable lodash babel plugin (default: true)
(this needed if you're about to support IE11 and TS, otherwise ignore it) (default: false) (this is not needed mostly
now, since we're having native optional chaining)REACT_APP_LEGACY_DECORATORS=true
- enable legacy decorators support
(in TS files suppose to work even with this set to false) (default: false)
Checkers
REACT_APP_ENABLE_PROD_CHECKS=true
- enables ESLint/type-checks for
builds through Webpack (implicit default: false)
Loaders
REACT_APP_SVG_SPRITES=true
- enables svg-sprite-loader
for all .svg
that are imported from any /symbol
dir. (default: false)- GraphQL-tag loader is switched on by default with no option to disable
Other
REACT_APP_WEBPACK_DASHBOARD=true
- Enables connection to the
webpack-dashboard
Electron app (the app must be installed on local machine) (default: false)REACT_APP_BUNDLE_ANALYZER=true
- Runs Bundle Analyzer every time you
run build or start for further analyses (default: false)REACT_APP_NO_OPTIMISATION_BUILD=true
- Makes a build flow but without any compression/minification.
Suitable for Pipelines and branch builds to check if "it compiles". Not for production builds. (default: false)
API
This is what default export exposes.
Refer to source code to see usage :)
The most useful below are commented
webpackRevolutOverrides,
REACT_APP_RAMDA, // All those are string constants of possible options
REACT_APP_LODASH,
REACT_APP_STYLED_COMPONENTS,
REACT_APP_POLISHED,
REACT_APP_TS_OPTCHAIN,
REACT_APP_LEGACY_DECORATORS,
REACT_APP_NO_OPTIMISATION_BUILD,
REACT_APP_SVG_SPRITES,
REACT_APP_WEBPACK_DASHBOARD,
REACT_APP_BUNDLE_ANALYZER,
isEnvActive, // Properly checks is some env option is set to true
getLoaders, // Helpful to get loaders from config
addLoader, // Super helpful when adding additional loaders. (adds loader in proper position + adds exclude to 'file-loader'
removeWebpackTSCompilation, // Removes TS Compilation through the Webpack on production
disableProductionMinimizing, // REACT_APP_NO_OPTIMISATION_BUILD but as a funciton
simplifyTerserConfig, // Makes Terser less superoptimize stuff, that adds up around 3-4% into the production bundle size, while reducing build times by 30-40%
jestOverride,
changeTsCompilerMemoryLimit // This is to be able to bump TS Compiler memory limit when in development mode when project is too huge. (default is 2048)
Migration from revolut-react-scipts v3.2.0
Pretty much all you need to know in this PR
and referenced file and the next file, package.json