ali-aka-ahmed/react-super-scripts

adds super powers to create-react-app and allows custom configs without ejecting.

⚡ 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