Configuration and scripts for Create React App.
Revolut standardized way of bootstrapping web react apps.
For the latest instructions of its usage please go here.
Latest version of original react-scripts: 3.2.0
> This is not a fork of create-react-app.
> It's just a fork of react-scripts with simple babel/webpack
> modifications that can toggle extra features.
The reason for this fork's existence is explained better in this Medium article.
#### ⚒ Babel plugins :
- Lodash
- Ramda
- styled-components
- polished
- ts-optchain
- imports
- graphql-tag
- optional-chaining and nullish coalescing
#### 📚 CSS Preprocessors:
- Stylus
- SASS/SCSS
- Modules support for all preprocessors and CSS
#### Webpack loaders:
- svg-sprite-loader
#### ⚙️ Webpack plugins:
- Webpack dashboard (Electron app required)
- Webpack bundle analyzer (Static mode)
- Sentry plugin (experimental)
The features are OPTIONAL and can be turned on/off individually
npx create-react-app name-of-my-app --typescript --scripts-version revolut-react-scripts
Modify the .env file in the root of the generated project, and add any of the configuration options to enable/disable that feature.
The generated project comes with some defaults, but you can change them at any time by making them true in the options from the .env file.
#### ESLint
ESLint config is made of airbnb, react-app, prettier, prettier/react presets with few modifications to some rules.
Keep injections as tiny as possible, and do a minimum change to the original configs.
Why? Because it will complicate migrations to the further react-scripts (which is right now simple merge) and it's the last thing
anyone would like to do.
To find injections to the original react-scripts in the project, search for INJECTION! phrase.
All customizations should be kept in the config/custom folder, try to not mix react-scripts stuff and our modifications
All modifications to the original react-scripts should be marked with INJECTION! phrase, so we can easily distinct our changes and Facebook team chagnes.