@revolut/cra-overrides

☢ @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 .envs 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