|
1 | | -# ☢ custom-react-scripts ☢ |
| 1 | +# react-scripts |
2 | 2 |
|
3 | | -### ⚠️ Disclaimer: |
4 | | -> 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. |
| 3 | +This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). |
| 4 | +Please refer to its documentation: |
5 | 5 |
|
6 | | -The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a). |
7 | | - |
8 | | -### 💡Features: |
9 | | -* Decorators |
10 | | -* babel-preset-stage-0 |
11 | | -* LESS |
12 | | -* SASS |
13 | | -* Stylus |
14 | | -* CSS modules |
15 | | - |
16 | | -**the features are optional and can be turned on/off individually* |
17 | | - |
18 | | -### ❔How to use it |
19 | | -```create-react-app my-app --scripts-version custom-react-scripts``` |
20 | | - |
21 | | -Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature. |
22 | | - |
23 | | -The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file. |
24 | | - |
25 | | -### 📝 Configuration options |
26 | | - |
27 | | -#### Styling |
28 | | -- ```REACT_APP_SASS=true``` - enable SASS support |
29 | | -- ```REACT_APP_LESS=true``` - enable LESS support |
30 | | -- ```REACT_APP_STYLUS=true``` - enable Stylus support |
31 | | -- ```REACT_APP_CSS_MODULES``` - enable CSS modules |
32 | | - |
33 | | -#### Babel |
34 | | -- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset |
35 | | -- ```REACT_APP_DECORATORS=true``` - enable decorators support |
36 | | - |
37 | | -> ⚠️ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification. |
38 | | -> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec. |
39 | | -
|
40 | | -#### Others |
41 | | -- ```PORT=3015``` - change default port (supported in CRA by default) |
42 | | -- ```OPEN_BROWSER=false``` - don't open browser after running webpack server |
43 | | - |
44 | | -### 🤔 Why? |
45 | | -The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons: |
46 | | - |
47 | | -* Some of the babel presets and plugins that people might use are experimental. If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility. |
48 | | -* It's hard to maintain code for all of these custom configurations that people want to use. |
49 | | - |
50 | | -But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature. |
51 | | - |
52 | | -So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config. |
53 | | - |
54 | | -### How does it work? |
55 | | -The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project. |
56 | | - |
57 | | -From the original readme: |
58 | | -> To define permanent environment vairables, create a file called .env in the root of your project: |
59 | | -> REACT_APP_SECRET_CODE=abcdef |
60 | | -
|
61 | | -I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```. |
62 | | - |
63 | | -### Future plans |
64 | | - |
65 | | -I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions. |
| 6 | +* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. |
| 7 | +* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. |
0 commit comments