☢ custom-react-scripts ☢

Latest version of original react-scripts: 0.8.5

$3

> 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.

$3

* Decorators
* babel-preset-stage-0
* LESS
* SASS
* CSS modules

*the features are optional and can be turned on/off individually

$3

`create-react-app my-app --scripts-version custom-react-scripts`

Modify the `.env` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature.

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.

$3

#### Styling
- `REACT_APP_SASS=true` - enable SASS support
- `REACT_APP_LESS=true` - enable LESS support
- `REACT_APP_STYLUS=true` - enable Stylus support
- `REACT_APP_CSS_MODULES` - enable CSS modules

#### Babel
- `REACT_APP_BABEL_STAGE_0=true` - enable stage-0 Babel preset
- `REACT_APP_DECORATORS=true` - enable decorators support

> ⚠️ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification.
> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec.

#### Others
- `PORT=3015` - change default port (supported in CRA by default)
- `OPEN_BROWSER=false` - don't open browser after running webpack server

$3


The `create-react-app` app doesn't allow user configuration and modifications for few reasons:

* 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.
* It's hard to maintain code for all of these custom configurations that people want to use.

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.

So instead of searching npm 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.

$3


The CRA team recently added support for an `.env` file in the root of the generated CRA project.

From the original readme:
> To define permanent environment vairables, create a file called .env in the root of your project:
> REACT_APP_SECRET_CODE=abcdef

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`.

$3

No configuration or complicated folder structures, just the files you need to build your app.

Once the installation is done, you can run some commands inside the project folder:

$3

Runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will see the build errors and lint warnings in the console.

$3

Runs the test watcher in an interactive mode.

By default, runs tests related to files changed since the last commit.

Read more about testing.

$3

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!


User Guide

The User Guide includes information on different topics, such as:

- Updating to New Releases
- Folder Structure
- Available Scripts
- Supported Language Features and Polyfills
- Syntax Highlighting in the Editor
- Displaying Lint Output in the Editor
- Debugging in the Editor
- Changing the Page