shrynx / react-super-scripts Goto Github PK

View Code? Open in Web Editor NEW

This project forked from facebook/create-react-app

87.0 4.0 7.0 3.59 MB

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

Home Page: https://react-super-scripts.netlify.com

License: Other

JavaScript 69.84% AppleScript 1.77% HTML 1.43% CSS 1.13% Shell 25.83%

react-super-scripts's Introduction

⚡ 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

react-super-scripts's People

Contributors

Stargazers

Watchers

Forkers

10chars rishantagarwal qstyler bunney ali-aka-ahmed kothariji

react-super-scripts's Issues

Failed to run tests

Can you reproduce the problem with latest npm?

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Done, the problem can still be reproduced ([email protected]).

Description

npm install -g create-react-app
create-react-app my-app --scripts-version react-super-scripts
Running npm test fails with

 FAIL  src/App.test.js
  ● Test suite failed to run

    Cannot find module 'src/App' from 'App.test.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:151:17)
      at Object.<anonymous> (src/App.test.js:3:38)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.734s
Ran all test suites.

Expected behavior

src/App should be found from App.test.js and tests should be passed

Actual behavior

Test suite failed to run

    Cannot find module 'src/App' from 'App.test.js'

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected):

~/temp/my-app6 $ npm ls react-scripts
[email protected] /home/segrey/temp/my-app6
└── (empty)

~/temp/my-app6 $ npm ls react-super-scripts
[email protected] /home/segrey/temp/my-app6
└── [email protected]

node -v:
v8.2.0
npm -v:
5.3.0

Operating system: Linux 3.19.0-32-generic 37~14.04.1-Ubuntu SMP Thu Oct 22 09:41:40 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux

Browser and version:
No browser involved here

Reproducible Demo

It can be reproduced on a freshly generated app.

Adding boiler plate generator options

Initially add options during installation to either generate a basic app (like the one now) or generate an advanced one.

Thing to include in advanced

Redux
- Dev tools
- Hot reloading
React Router (probably v4)

pre-execution question...

Is this a bug report? NO

This is a pre-execution question: Is the following environment supported?

Environment

node -v: 10.10.0
npm -v: 6.4.1
yarn --version: 1.9.4
npm ls react-scripts (if you haven’t ejected): 1.5.2
Operating system: Linux Ubuntu 18.04
Browser and version (if relevant): n/a

Thank you in advance, AgileQ

Maybe add support for preact

Not sure if preact will play well with it, though i see no apparent issues with using preact. More research needed. Plans to add it via package.json option

{
     ...
    "react-super-scripts": {
       "preact": true
   }
}

How to install in a existing application?

Hello, first, thanks for this repo.

How to install in an existing application?

Support for configuring default browser on starting dev server

Add options to support changing default browser on starting dev server
can take options chrome/firefox/safari/ie/none

{
      ...

      "react-super-scripts": {
           "defaultBrowser": "firefox"
      }
}

Nofication issue: not responding

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes, I messaged you like yesterday
Many errors, especially related to "missing modules", are due to npm bugs.

If you're using Windows, follow these instructions to update npm.

If you're using OS X or Linux, run this to update npm:

npm install -g npm@latest

cd your_project_directory
rm -rf node_modules
npm install

Then try to reproduce the issue again.

Can you still reproduce it?
Josh has also tried messaging you

Description

What are you reporting?

Expected behavior

A response from our friend
Tell us what you think should happen.
He should reply and not be a b-arch

Actual behavior

No response after messaging several attempts at contact
Tell us what actually happens.

Environment

Friendship
Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected):
node -v:
npm -v:

Then, specify:

Operating system:
Browser and version:

Reproducible Demo

Please take the time to create a new app that reproduces the issue.

Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.

(Accidentally, you might get to the root of your problem during that process.)

Push to GitHub and paste the link here.

By doing this, you're helping the Create React App contributors a big time!
Demonstrable issues gets fixed faster.

How is this different from 'custom-react-scripts' ?

HMR setup

Is HMR supposed to work without any configs?
Mine doesnt seem to work. using Preact though.

support for Offline Plugin

Add support for offline plugin, and make it configurable via a packge.json option

{
     ...

    "react-super-scripts": {
           "offline": true
     }
}

not sure how best to achieve this...

but something where i can just add a "postcss" section to my package.json would be lovely.

Customize build folder

There is already an issue in official repo: facebook#1354

I wonder whether react-super-scripts support customizing build folder? If not, would you consider to add this feature?

shrynx / react-super-scripts Goto Github PK

react-super-scripts's Introduction

⚡ react -super-scripts ⚡

Create bootstraped React apps simply by

Features

Webpack

Babel

ESLint

Preact

Others

react-super-scripts's People

Contributors

Stargazers

Watchers

Forkers

react-super-scripts's Issues

Can you reproduce the problem with latest npm?

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

Is this a bug report? NO

Environment

Can you reproduce the problem with latest npm?

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

Recommend Projects

Recommend Topics

Recommend Org

⚡ react ^{-super-scripts} ⚡