Coder Social home page Coder Social logo

facebook / create-react-app Goto Github PK

View Code? Open in Web Editor NEW
102.6K 102.6K 26.8K 24.08 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%
build-tools react zero-configuration

create-react-app's Introduction

Create React App Build & Test PRs Welcome

Logo

Create React apps with no build configuration.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
If you have questions or need help, please ask in GitHub Discussions.

Quick Overview

npx create-react-app my-app
cd my-app
npm start

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

Get Started Immediately

You don’t need to install or configure tools like webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Create a project, and you’re good to go.

Creating an App

You’ll need to have Node 14.0.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

npx create-react-app my-app

(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create <starter-kit-package> is available in Yarn 0.25+

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

No configuration or complicated folder structures, only the files you need to build your app.
Once the installation is done, you can open your project folder:

cd my-app

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.

Build errors

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed.

User Guide

You can find detailed instructions on using Create React App and many tips in its documentation.

How to Update to New Versions?

Please refer to the User Guide for this and other information.

Philosophy

  • One Dependency: There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a modern single-page React app:

  • React, JSX, ES6, TypeScript and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. (Note: Using the service worker is opt-in as of [email protected] and higher)
  • Hassle-free updates for the above tools with a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.

Popular Alternatives

Create React App is a great fit for:

  • Learning React in a comfortable and feature-rich development environment.
  • Starting new single-page React applications.
  • Creating examples with React for your libraries and components.

Here are a few common cases where you might want to try something else:

  • If you want to try React without hundreds of transitive build tool dependencies, consider using a single HTML file or an online sandbox instead.

  • If you need to integrate React code with a server-side template framework like Rails, Django or Symfony, or if you’re not building a single-page app, consider using nwb, or Neutrino which are more flexible. For Rails specifically, you can use Rails Webpacker. For Symfony, try Symfony's webpack Encore.

  • If you need to publish a React component, nwb can also do this, as well as Neutrino's react-components preset.

  • If you want to do server rendering with React and Node.js, check out Next.js or Razzle. Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles.

  • If your website is mostly static (for example, a portfolio or a blog), consider using Gatsby or Next.js. Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering.

  • Finally, if you need more customization, check out Neutrino and its React preset.

All of the above tools can work with little to no configuration.

If you prefer configuring the build yourself, follow this guide.

React Native

Looking for something similar, but for React Native?
Check out Expo CLI.

Contributing

We'd love to have your helping hand on create-react-app! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Supporting Create React App

Create React App is a community maintained project and all contributors are volunteers. If you'd like to support the future development of Create React App then please consider donating to our Open Collective.

Credits

This project exists thanks to all the people who contribute.

Thanks to Netlify for hosting our documentation.

Acknowledgements

We are grateful to the authors of existing related projects for their ideas and collaboration:

License

Create React App is open source software licensed as MIT. The Create React App logo is licensed under a Creative Commons Attribution 4.0 International license.

create-react-app's People

Contributors

amyrlam avatar andriijas avatar arcanis avatar brunolemos avatar enoahnetzach avatar existentialism avatar fson avatar gaearon avatar greengremlin avatar heyimalex avatar ianschmitz avatar iansu avatar jamesgeorge007 avatar jeffposnick avatar matrush avatar michaeldeboey avatar mrmckeb avatar mxstbr avatar n3tr avatar raix avatar ro-savage avatar ryansully avatar selbekk avatar sidoshi avatar tharakawj avatar timer avatar tuchk4 avatar viankakrisna avatar vjeux avatar xiaoxiangmoe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

create-react-app's Issues

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.

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.

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

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.

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.

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?

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?

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:
screen shot 2016-07-21 at 10 06 32 pm

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

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

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.

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

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.

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] 

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.

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!

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.

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.

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.

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 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)

"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.

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.)

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?

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.

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.

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.

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).

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).

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.

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

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!

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!

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.