npm package: @revolut/cra-overrides
Description: Create React App overrides used in Revolut
Latest version: 4.0.2

# ☢ @revolut/cra-overrides ☢

This project give you two functions + one script to override [Create React App](https://github.com/facebookincubator/create-react-app)
using [react-app-rewired](https://github.com/timarney/react-app-rewired) in our own nicely tested and unified way.

Below you will find some information on how to perform common tasks.<br>
You can find the most recent version of `create-react-app` (CRA further) default capabilities in this guide
[here](https://create-react-app.dev/docs/getting-started).

## Getting started

Make sure your app is based on `create-react-app`

Follow getting started from `react-app-rewired` (RAR - in followed text)

```shell script
# 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`

```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](https://github.com/FormidableLabs/electron-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](https://bitbucket.org/revolut/react-scripts/src/master/revolut-cra-override/src/index.js) 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](https://bitbucket.org/revolut/backoffice-frontend/pull-requests/4922/wp-393-update-backoffice-frontend-to-use/diff#chg-packages/backoffice-ui-app-swift-messenger/config-overrides.js)
and referenced file and the next file, package.json