adds super powers to create-react-app and allows custom configs without ejecting.
Pull request Compare This branch is 27 commits ahead, 780 commits behind facebook:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github
packages
tasks
template
.eslintignore
.eslintrc
.gitignore
.travis.yml
CHANGELOG-0.x.md
CHANGELOG.md
CONTRIBUTING.md
LICENSE
PATENTS
README.md
appveyor.cleanup-cache.txt
appveyor.yml
bootstrap.js
lerna.json
package.json

README.md

⚡ react -super-scripts

This package adds super powers and allows custom configs without ejecting Create React App

⚠️ This is not a fork of create-react-app, it is just a fork of react-scripts.

Create bootstraped React apps simply by

create-react-app my-app --scripts-version react-super-scripts

* If you don't have Create React App, then npm -g install create-react-app

Features

Apart from features provided by CRA, this package adds more goodies listed below.

Webpack

  • Webpack Dasboard
    • you got to love webpack dashboard
    • Webpack dashboard is turned on by default,but it is configurable
    • you can disable it able it setting dashboard as false in react_super_script in package.json
      {
        ...
    
        "react_super_scripts": {
          "dashboard": true
        }
      }
  • Hot module replacement
    • supports HMR for js files too.
  • Supports SASS and LESS
    • write styles in css, sass or less
  • Webpack image loader
    • for compressing images
  • Vendor splitting
    • you can split out vendor files from app logic, simply by creating a vendor.js file in src folder, and import all your vendor dependencies in that file.
  • Build Progress Bar
    • During build process a progress bar is shown.

Babel

  • Custom babel config
    • Want to use latest and greatest of javascript, no worries include custom babel presets by installing packages and adding them to .babelrc in root directory of the app
    • Note: This will completly override existing presets. You will need to create the .babelrc file inside your app folder and remember to add react-hmre preset to babel development. This script relies on react-hmre for hot module replacement.

ESLint

  • Custom eslint config
    • Not happy with the default linting rules, simply include custom eslint by installing packages and adding them to .eslintrc in root directory of the app
    • Note: This will completly override existing linting rules. You will need to create the .eslintrc file inside your app folder.

Preact

  • Using preact instead of react

    • Preact is a fast, 3kB alternative to React, with the same ES2015 API,
    • In your package.json add usePreact to react-super-scripts and set it to true. Your package.json should look like
      {
        ...
    
        "react_super_scripts": {
          "usePreact": true
        }
      }

    Then uninstall react and react-dom and install preact and preact-compat

    npm uninstall react react-dom && npm install --save preact preact-compat

    • You can keep using you existing react code without any changes, under the hood webpack will alias react and react-dom to use preact.
    • Note: This package uses preact-compat for maintaining compatibility with react. This doesn't guarantee complete compatibility, test all features fully first.

Others

  • Custom entry point
    • You can specify app entry point for webpack.
    • In your package.json specify the file path to appEntry property of react_super_scripts field. Your package.json should look like
      {
        ...
    
        "react_super_scripts": {
          "appEntry": "src/index.js"
        }
      }
    a default entry point (src/index.js) is already provided in package.json.
    • Note: if you don't provide appEntry in your package.json it will default to scr/index.js