|
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