Skip to content
[DEPRECATED, use customize-cra] Allow custom config for create-react-app without ejecting
JavaScript Other
Branch: master
Clone or download
#150 Compare This branch is 179 commits ahead, 1016 commits behind facebook:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Issue template: fix env list ordering (facebook#2697) Jun 30, 2017
examples closes #116 - add an example ``.env`` file Nov 8, 2017
packages Fixed typo causing eslint warning Jun 27, 2018
tasks Merge branch 'master' of https://github.com/facebook/create-react-app May 13, 2018
.eslintignore Fix internal linting setup and add missing headers (facebook#1741) Mar 6, 2017
.eslintrc [Internal] Warn for missing brackets (facebook#2151) May 15, 2017
.gitignore ignore yarn lock Mar 6, 2018
.travis.yml Test Node 9 on CI (facebook#3793) Jan 14, 2018
.yarnrc Enable Yarn check files (facebook#3769) Jan 13, 2018
CHANGELOG-0.x.md Swap changelogs (facebook#2222) May 19, 2017
CHANGELOG.md Changelog for 1.1.4 Apr 4, 2018
CODE_OF_CONDUCT.md Add an explicit link to Code of Conduct (facebook#3781) Jan 14, 2018
CONTRIBUTING.md Tweak publishing note Jan 15, 2018
LICENSE BSD+Patents -> MIT (facebook#3189) Sep 26, 2017
README.md Update README.md Jan 15, 2019
appveyor.cleanup-cache.txt Update appveyor.cleanup-cache.txt Oct 28, 2017
appveyor.yml one-line waiting for app start (facebook#3411) Nov 5, 2017
lerna.json
package.json Pin Lerna Jan 12, 2018
screencast.svg Add SVG asciicast (facebook#3677) Jan 9, 2018

README.md

🙋‍♂️ Made by @thekitze

Other projects:

  • 🏫 React Academy - Interactive React and GraphQL workshops
  • 💌 Twizzy - A standalone app for Twitter DM
  • 💻 Sizzy - A tool for testing responsive design on multiple devices at once
  • 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

⚠️ This repo is deprecated.

Please use react-app-rewired if you want to customize CRA 1.
Please use customize-cra if you want to customize CRA 2.

☢ custom-react-scripts ☢

Latest version of original react-scripts: 1.1.14

⚠️ Disclaimer:

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.

💡Features:

  • Decorators
  • babel-preset-stage-0
  • Less
  • Sass
  • CSS modules
  • Sass modules
  • Less modules
  • Stylus modules

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

How to use it

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 every option turned on by default, but you can remove them at any time by removing the options from the .env file.

Adding to an existing project

npm uninstall --save react-scripts;
npm install --save custom-react-scripts;

Add a .env. file with the desired features.

📝 Configuration options

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=true - enable CSS modules
  • REACT_APP_SASS_MODULES=true - enable Sass modules
  • REACT_APP_LESS_MODULES=true - enable Less modules
  • REACT_APP_STYLUS_MODULES=true - enable Stylus modules
  • REACT_APP_CSS_MODULE_CLASSNAME_TEMPLATE='module-[sha512:hash:base32]-[name]-[local]' - add custom CSS Module hash ident name

Note: to use modules the file must be named in the following format: $name.module.$preprocessorName.

For example styles.module.css or header.module.sass or footer.module.less, etc. Files that are not prefixed with module will be parsed normally.

Babel

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

Other

  • REACT_APP_WEBPACK_DASHBOARD=true - Enables connection to the webpack-dashboard Electron app (the app must be installed on local machine)

🤔 Why?

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.

How does it work?

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.

Future plans

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.

You can’t perform that action at this time.