facebook / create-react-app Goto Github PK

View Code? Open in Web Editor NEW

101.8K 1.9K 26.6K 24.63 MB

Set up a modern web app by running one command.

Home Page: https://create-react-app.dev

License: MIT License

JavaScript 98.35% CSS 0.15% HTML 0.12% Shell 1.21% AppleScript 0.09% TypeScript 0.07% Sass 0.01% SCSS 0.02%

react zero-configuration build-tools

create-react-app's Issues

add a simple test runner?

An important target group for this app (imo) are beginners and prototype builders. From my experience, both these groups would benefit greatly from having simple test infrastructure bundled with this starter.

From my own experience, I usually have a script.js that I'd include into the main module, but that's pretty hacky until I finally setup (whatever flavor of test infra is popular). The value I get is from being able to write code that'll run on every edit-save separately from my app, but that later morphs into a unit test suite or so on. For beginners, they'd build their app, but write tests for smaller parts of the app they're building, while learning to write tests for their code.

To be clear, I'm not advocating any specific framework/suite/assert libs; I'd just like to be able to run even a if(true) throw new Error script on every change.

Thoughts?

Thanks for the great tool!

If port is already being used then start server on a different port.

Currently if I already have a different server listening on port 3000 then react-scripts start still starts up and says The app is running at http://localhost:3000/, but it's actually not.

It should either fail to start up (in which case there should be a way to manually specify a different port) or automatically pick an available port.

No .jsx extension?

Note from Maintainers

We support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.

Shouldn't the default be to use .jsx extension in files where JSX is in use? As configured, the loader isn't set up to transpile jsx. Many code editors will provide better coloring/linting when detecting a .jsx file

Improve npm install time / space

Right now it takes 2m10s to create a new project (almost everything is npm install) and generates a 81meg node_modules/ folder. We need to figure out a way to cut this down, this is depressing :(

  "dependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-plugin-transform-react-constant-elements": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-es2016": "^6.11.3",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.23.1",
    "cross-spawn": "^4.0.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-loader": "^1.4.1",
    "eslint-plugin-import": "^1.10.3",
    "eslint-plugin-jsx-a11y": "^1.5.5",
    "eslint-plugin-react": "^5.2.2",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "json-loader": "^0.5.4",
    "opn": "^4.0.2",
    "postcss-loader": "^0.9.1",
    "rimraf": "^2.5.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  }

└─┬ [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   ├─┬ [email protected] 
  │   │ └── [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   └─┬ [email protected] 
  │ │ │     └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ ├── [email protected] 
  │ │ │   │ └─┬ [email protected] 
  │ │ │   │   └── [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   └─┬ [email protected] 
  │ │ │     └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   ├─┬ [email protected] 
  │ │ │   │ └── [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ └── [email protected] 
  │ │   └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ └─┬ [email protected] 
  │ │   │ │   └── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ └── [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├── [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   ├── [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├─┬ [email protected] 
  │ │ │ │ │ └─┬ [email protected] 
  │ │ │ │ │   ├── [email protected] 
  │ │ │ │ │   └── [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ └── [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ ├── [email protected] 
  │ │ │ │ └─┬ [email protected] 
  │ │ │ │   └── [email protected] 
  │ │ │ └── [email protected] 
  │ │ └── [email protected] 
  │ └── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ └── [email protected] 
  ├─┬ [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ └─┬ [email protected] 
  │ │ │   └── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├── [email protected] 
  │ │ │ └── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├─┬ [email protected] 
  │ │   │ │ ├─┬ [email protected] 
  │ │   │ │ │ ├── [email protected] 
  │ │   │ │ │ └── [email protected] 
  │ │   │ │ └── [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └── [email protected] 
  │ │   └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├── [email protected] 
  │ │ └─┬ [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └─┬ [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └─┬ [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├── [email protected] 
  │ │   │   ├── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   └─┬ [email protected] 
  │ │   │     ├── [email protected] 
  │ │   │     └── [email protected] 
  │ │   ├── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ ├── [email protected] 
  │ │   │ └─┬ [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ │ └── [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ │ └── [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ └─┬ [email protected] 
  │ │   │   │ │   └── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ ├── [email protected] 
  │ │   │   │ │ ├─┬ [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ ├── [email protected] 
  │ │   │   │ │ │ └── [email protected] 
  │ │   │   │ │ └─┬ [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   ├─┬ [email protected] 
  │ │   │   │ │   │ └── [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   ├─┬ [email protected] 
  │ │   │   │ │   │ └── [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   ├── [email protected] 
  │ │   │   │ │   └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ └─┬ [email protected] 
  │ │   │   │   ├── [email protected] 
  │ │   │   │   ├── [email protected] 
  │ │   │   │   ├─┬ [email protected] 
  │ │   │   │   │ └─┬ [email protected] 
  │ │   │   │   │   ├── [email protected] 
  │ │   │   │   │   └── [email protected] 
  │ │   │   │   └── [email protected] 
  │ │   │   ├── [email protected] 
  │ │   │   ├─┬ [email protected] 
  │ │   │   │ ├── [email protected] 
  │ │   │   │ ├─┬ [email protected] 
  │ │   │   │ │ └── [email protected] 
  │ │   │   │ └── [email protected] 
  │ │   │   └─┬ [email protected] 
  │ │   │     ├─┬ [email protected] 
  │ │   │     │ └── [email protected] 
  │ │   │     ├─┬ [email protected] 
  │ │   │     │ └── [email protected] 
  │ │   │     ├─┬ [email protected] 
  │ │   │     │ └── [email protected] 
  │ │   │     ├─┬ [email protected] 
  │ │   │     │ ├── [email protected] 
  │ │   │     │ ├── [email protected] 
  │ │   │     │ ├── [email protected] 
  │ │   │     │ ├── [email protected] 
  │ │   │     │ ├── [email protected] 
  │ │   │     │ └── [email protected] 
  │ │   │     └── [email protected] 
  │ │   ├── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ └── [email protected] 
  │ │   ├─┬ [email protected] 
  │ │   │ └── [email protected] 
  │ │   └─┬ [email protected] 
  │ │     └── [email protected] 
  │ └─┬ [email protected] 
  │   └─┬ [email protected] 
  │     └── [email protected] 
  └─┬ [email protected] 
    ├─┬ [email protected] 
    │ ├─┬ [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ └── [email protected] 
    ├── [email protected] 
    ├─┬ [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ ├── [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ ├── [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ ├── [email protected] 
    │ │ └── [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ └── [email protected] 
    │ └── [email protected] 
    ├─┬ [email protected] 
    │ ├── [email protected] 
    │ └── [email protected] 
    ├─┬ [email protected] 
    │ ├── [email protected] 
    │ ├─┬ [email protected] 
    │ │ └── [email protected] 
    │ └── [email protected] 
    ├─┬ [email protected] 
    │ ├─┬ [email protected] 
    │ │ └─┬ [email protected] 
    │ │   └── [email protected] 
    │ └── [email protected] 
    ├─┬ [email protected] 
    │ ├─┬ [email protected] 
    │ │ └─┬ [email protected] 
    │ │   └── [email protected] 
    │ ├── [email protected] 
    │ ├── [email protected] 
    │ └─┬ [email protected] 
    │   └── [email protected] 
    ├── [email protected] 
    ├── [email protected] 
    └─┬ [email protected] 
      └── [email protected]

Use the same JS language features as React Native

It will make our open source stuff confusing if each project uses a slightly different subset of language features. Tricky to cut n paste from examples, etc. React Native is the trickiest to match because it doesn't actually ship in ES5 form so it's hard to alter the babel config for it. My proposal is that we take ES6 and then cherry-pick individual features til we have the ones React Native uses. If that seems like "the right thing" I can take this on; otherwise what is "the right thing" here?

"Vendor" folder

Let’s wait until somebody asks before implementing but.. I think a vendor folder that just gets copied into the output could be a useful escape hatch. For example, if you have a global script that isn’t UMD-friendly, you want to have some way of importing it. With a vendor folder, you could just put it there, reference it from index.html, and read from window in your bundle.

Rename "graduate" to "eject"

Suggestion inspired by https://github.com/eanplatter/enclave — I probably saw that idea there anyway 😄 .

Don't assume the project is hosted at the root

We currently have an assumption in publicPath in webpack.config.prod.js that the bundle is served from the root, but it may not be (e.g. with GH Pages, it’ll be at you.github.io/projectname/).

I don’t want to add configuration for this but it would be great if we could parse homepage from package.json and use it to determine the publicPath. We can then document it or add a prompt (or a notice) as part of the creation flow.

Provide a way to run codemods

I feel like this could be a nice way to introduce people to the idea of codemods. Many people don't know about https://github.com/reactjs/react-codemod or think running it is complicated. Maybe providing something like npm run upgrade-to-react-16 would be helpful. (Just throwing this idea out there.)

Display an overlay for syntax errors

My dev flow is to edit the code, and thanks to hot reload, look at the browser window to see the effect. I love those dev tools that in dev mode show the equivalent of what create-react-app currently dumps on console into the browser, e.g. when there are syntax errors.

Consider using DllPlugin

http://engineering.invisionapp.com/post/optimizing-webpack/
https://robertknight.github.io/posts/webpack-dll-plugins/

I don’t quite understand how to integrate it, and community help would be most welcome.
It would be ideal if we could make both dev and prod builds faster.

The idea is that we’d only use it for react and react-dom.

src paths for files are '/' and for a static site should be './' in build

Currently the src paths are not friendly for a static site. They only work for using a server.

Is there any plan to make this work with a simple: open index.html?

Or is this project only intended for people running this on a server?

Do not move/delete things from the scripts folder during init

If the app gets npm installed by someone else, the folder will be in a different shape because those files have not been "init"-ed. Need to update the init command not to be destructive.

Provide require() in console

We should figure out a way to provide a global require() in DEV mode in the browser console.
It could be implemented as a webpack plugin (everything is a plugin in webpack right?)

It could work like this:

For modules with unique names, require('moduleName') just works
For modules with non-unique names, require('./full/path/from/root') is the only way

Still not too bad!

Add server side rendering?

We use SSR pretty religiously. wondering if this will eventually support SSR - realize the complexity it would add to this project

unejected version does not work if it is not a subdirectory of create-react-app

If I don't create the app inside the create-react-app directory itself, the resulting project can't find webpack-dev-server/client or babel. I'm using npm 2.14.4 in case that matters. It does work if I create a project within the create-react-app folder.

Let start-react-app provide a simple cli for common tasks?

Inspired by motion. It's very handy that I can type things into npm start to do some common tasks. Vorpal seems like a great tool for this.

Tasks that i can think of:

o, open: open in browser
e, edit: open project root in an editor (atom? 😃)
v, verbose: show/hide all webpack logs

Add generated code explanation to template README

Currently the README found in the template directory (https://github.com/facebookincubator/create-react-app/blob/master/template/README.md) explains the basic scripts for getting the app up and running, but it would also be nice for it to explain the generated code so that a user can easily get a grasp on the code in their app.

Nicer css module generated names

You may not even realize this, but your current config supports css modules, it just doesn't use them by default -- i.e. you can use :local in CSS files and it will generate class names, it just doesn't make all class selectors local by default.

I'm totally fine with global being the default scope for now (much less confusing for beginners) and adding the :local pseudo-class where I need it, but it would be nice if more human-readable classes were generated. Use something like:

style!css?localIdentName=[path][name]---[local]---[hash:base64:5]!postcss

as the loader config in webpack.

Automate updating bundledDependencies

Currently I run https://www.npmjs.com/package/bundle-deps in the root to update them after every npm install --save. Ideally this should be automated (can be part of the release process).

Remove purely stylistic ESLint rules

As discussed in #11, we don’t want to argue about semicolons.
We do want to keep the rules that help prevent bugs or undesired patterns.

Ensure eslint-loader works in a sensible way in prod

I haven’t actually checked what it does.
I think we don’t want to fatal on build, but we want to print any errors/warnings.
We also want to make sure it doesn’t include console.log()s with those warnings into prod bundle.

Autoprefixer config

Autoprefixer's default behaviour is to add prefixes to support configured browsers and remove any prefixes present which aren't required for them; at the time of writing the default config (> 1%, last 2 versions, Firefox ESR) supports the following browsers:

> console.log(require('autoprefixer')().info())
Browsers:
  Chrome for Android: 51
  UC for Android: 9.9
  Android: 4.4
  Chrome: 51, 50, 49, 29
  Edge: 13, 12
  Firefox: 47, 46, 45
  IE: 11, 10
  IE Mobile: 11, 10
  iOS: 9.3, 9.0-9.2
  Opera Mini: all
  Opera: 38, 37
  Safari: 9.1, 9
  Samsung: 4

These browsers account for 87.39% of all users globally

Are there others autoprefixer should be configured to support out of the box, e.g. ios >= 8?

One other thing - css-loader uses cssnano, which also runs Autoprefixer in remove mode by default. If you don't disable that (with css?-autoprefixer) or don't create a shared browserlist config when tweaking support, css-loader will happily remove everything autoprefixer just added!

Can't `npm start` new app, SyntaxError: Unexpected token => on a fresh install

Edit from maintainers: the project requires Node >= 4.0.
We’ll fix the CLI to report an error in earlier versions.

I can't get the local server started. My steps to the error:

npm install -g create-react-app
create-react-app hello
No errors creating the app
cd hello
npm start

> [email protected] start /Users/olivier/Sites/sandbox/hello
> react-scripts start

/Users/olivier/Sites/sandbox/hello/node_modules/react-scripts/scripts/start.js:23
var isSmokeTest = process.argv.some(arg =>
                                        ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Using npm v3.10.5 on OS X 10.11.6

Improve underlying projects

We rely on community projects now and we can help drive positive changes in them.
A few ideas:

WebpackDevServer should emit friendly messages instead of "Bundle is not VALID/INVALID"
Documentation of ESLint Plugin React rules could be improved with rationale and examples
It should be possible to remove hot reloading logs

Let’s use this thread to keep track of these improvements.

Add flags and dead code elimination

Hacks like #52 are frustrating.
We need a system that lets us write stuff like

if (__REPO__) {
  var path = ...
} else if (__DEPENDENCY__) {
  var path = ...
} else if (__EJECTED__) {
  var path = ...
}

and eliminate all other branches on eject.

Add a better Contributing guideline

We should explain:

Constraints (e.g. no flags, no configuration)
Strategies (find good defaults, good heuristics can make)
Actively find ways to improve DX (e.g. remove noise, implement things you didn’t see in other tools but wish were there)
Try to make the least controversial choices (would that work for 95% of users? would beginners understand this?)
Coordinate on an issue in case somebody else is already working on the PR you want
If you submit a PR please provide a test plan (how did you verify it works?)
Release guidelines (how to run the script, update changelog etc)

Licensing in autogenerated code

The autogenerated code says "copyright facebook according to the license in the root of this repo". However, that code won't actually go into a FB project. And there is no license at the root of the repo. Should we remove that?

Add favicon to the generated app

Seems like a nice thing to do + we need to figure out how to do it with webpack 😄

Write a lint rule against CSS modules

As much as we appreciate the pain points CSS Modules are solving, we’ve made a decision not to use them in this project. You can see some discussion on this in #90.

However Webpack currently lets you use custom :local syntax to “enable” them in regular CSS files. We don’t want people to do this because this limits our ability to add more CSS tools or migrate from Webpack to other bundlers in the future.

This is why we should enforce that people don’t use :local syntax. Otherwise we’ll just randomly break their apps when we change something in how we handle CSS. This won’t be fun, and people will blame us for that even though we explicitly do not support this feature.

Luckily, it is easy to fix. We should write a custom lint rule with ERROR level that is triggered on a statement like this:

import styles from './styles.css';

This, however, should work fine:

import './styles.css';

This semi-enforces that you don’t use CSS Modules because we just don’t support them. We can ensure your CSS stays reasonably portable in case we want to change the underlying architecture.

Reference on writing ESLint rules: http://eslint.org/docs/developer-guide/working-with-rules.

If you want to work on this, please write here so we don’t have multiple people doing it at the same time.

Set up an end-to-end test

This is boring but needed.

Write a script we can run on Travis that tests that create-react-app something && cd something && npm run build produces a build without error in the build folder, and that npm run eject (aka "graduate" before #9 is fixed) changes the project in a way that npm run build also works.

Support async/await

We'll want to support it eventually, the only question is when.

In #43 @gaearon stated

Not adding async yet because I’ll need to understand its stability better before doing it.

so that's the status quo.

General feedback

Let’s use this thread for a general discussion.

Does the flow feel good?
Did we pick the right plugins, presets, and loaders?
Do you see areas for improvement?

This project is in a very early stage so there’s plenty of all hanging fruit if you’d like to make React experience better.

Thanks for taking a look at this project!

Custom additional webpack config?

This would be helpful to set extra options to the config like publicPath and additional loaders as well as additional environment variables (I have a habit of using one for the public path).

One similar project, reactpack, that I used implemented this and I found it quite useful. They use webpack-merge if I am not wrong for merging the webpack configs.

unejected version does not work for a subdirectory of another npm module

I tried create-react-app in a subdirectory of a different project. It did not work. Then when I ejected, it worked. It might be related to the file:/// thing - just filing an issue to get this recorded.

Add “Recompiling...” log after file change

This is what webpack calls "INVALID".
I removed it completely but it was useful. We just need a better message.

Provide useful messages for missing files

index.html
favicon.ico
src/index.js

They are all required, and we should crash early with a descriptive message if they are not found.

(Probably we could make favicon optional but then it would be hard to guess where to put it. I see no harm in forcing it to be there since any real website needs it anyway.)

Dogfood our eslint config?

We can have a .eslintrc.js file in the root directory that re-exports './config/eslint.js'.

Make package.json complete

Currently missing repository and license fields so npm complains.
Would be good to add other meta information similar to React.

Don’t forget we have two package.jsons so both need to be updated.

Optional Sass Support

Note from Maintainers

We now have official Sass integration documentation.

Would be nice to include CSS compilers such as: Sass, Less, Stylus, or even CSS modules, etc.

Pointless stack trace on lint errors

The stack trace is for the parser, so it's meaningless to me. Is there a way to make webpack not print it?

Built-in project templates

Branching from discussion #11 (comment).
This is something I want to support in a potential v2.

create-react-app my-app # default like structure like now
create-react-app my-app --from empty
create-react-app my-app --from todomvc
create-react-app my-app --from relay-starter
create-react-app my-app --from you-see-where-im-going

I’m opposed to turning this project into a code generator. However I think initial templates can be useful because they offer a nice way to “clone” examples. We could move the official React examples into this system, and libraries could provide third party “starters”.

I’m not sure this is a good idea but I’d love to be able to tell people to run create-react-app my-app --from redux-todomvc instead of telling them to clone a project, run npm install, etc.

don't call it "My First React App" in the title

Because we don't want it to only be used by people making their first react app, do we?

How about taking the name from the directory it gets created in.

npm start should reuse the currently open tab

It is annoying to restart and have a new tab opened every time.
I’m not sure how to do it but we should try to refresh the existing tab instead of opening a new one.

CSS/React Hot Reloading

I think one of the best parts of something like this is that typically complex things to setup like hot reloading just work out of the box. It brings those advanced workflows to everyone.

Hot reloading is such a crucial part of my dev experience, and this project could expose it to others. The only problem is that React hot reloading doesn't work all the time, so I don't know if that is too confusing to beginners.

I haven't looked at how this project actually works yet, but I can't think of any reason why this wouldn't work. Just automatically include webpack-hot-middleware in dev mode, add the right entry point, add the right babel transform, etc. It can be completely hidden from the user.

Full Windows support

I believe @insin has access to Windows—would be great if we could keep track of things that are still broken/missing there. Let’s close this issue when the support is complete.

@insin Can I ask you to write up a checklist if there’s more than a few broken things so we keep track of them?

TODO:

fix eject
fix fs-events crash on install
fix fs-events crash on eject
bundle-deps shouldn't be in dependencies

Feature suggestion: npm run doctor

If something’s messed up with your project setup, it would be great to have a way to repair it.
The most common problem I’ve seen in React apps is duplicate React installation.
It caused countless lost hours and people still bump into it: facebook/react#2402

We could offer npm run doctor that checks for common problems. As the first step, it would check npm ls | grep react and if there are two React installations, explain how to fix it (i.e. remove the nested one).

Include README with instructions into the generated project

I got this nice suggestion from one of our collaborators (sorry I don't remember who 😄 ).
We should put README.md into the generated project.

In this README we can reiterate the commands and explain how to do common things (e.g. how to add CSS).

Make the generated app work if you flowcheck it

It would be nice if it were possible to add flow to the default project. I tried a minimal flow setup, adding a blank .flowconfig to the root and // @flow to App.css. Four errors:

For the first two I might be configuring things wrong? The second two seem like flow doesn't know how to handle the non-js imports that webpack is handling for us. I'm not sure what the right way to resolve this.

I was using flow version 0.29.0

Deployment with Surge or similar

Right now I just ran the program, did npm run build, and then surge -p build. Five seconds later I can show this to others:

https://highfalutin-sofa.surge.sh

I can also customize the URL to whatever I want (if available).

I feel like this is a great feature that could be added—one command, no config deployments. Imagine you're learning React and did something cool and want to share it but have no idea what Heroku, Digital Ocean, etc. are. This did it for you!

surge can be added as a dev dependency and a deploy script can be added that would be npm run build && surge -p build.

What do you think?

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.