Giter VIP home page Giter VIP logo

custom-react-scripts's Introduction

☢ custom-react-scripts ☢

Latest version of original react-scripts: 1.0.11

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

📝 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 - enable CSS modules
  • REACT_APP_SASS_MODULES - enable Sass modules
  • REACT_APP_LESS_MODULES - enable Less modules
  • REACT_APP_STYLUS_MODULES - enable Stylus modules

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.

custom-react-scripts's People

Contributors

anilreddykatta avatar bebbi avatar dceddia avatar eanplatter avatar enoahnetzach avatar existentialism avatar forbeslindesay avatar fson avatar gaearon avatar gaumala avatar hnordt avatar johann-sonntagbauer avatar keyz avatar kitze avatar koistya avatar lacker avatar mareksuscak avatar mxstbr avatar n3tr avatar nhajidin avatar pd4d10 avatar ro-savage avatar ryansully avatar sidoshi avatar themre avatar timer avatar tuchk4 avatar valscion avatar viankakrisna avatar vjeux avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.