{createElement(feature, {
@@ -57,114 +54,132 @@ class App extends Component {
const feature = window.location.hash.slice(1);
switch (feature) {
case 'array-destructuring':
- import(
- './features/syntax/ArrayDestructuring'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/ArrayDestructuring').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'array-spread':
import('./features/syntax/ArraySpread').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'async-await':
import('./features/syntax/AsyncAwait').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'class-properties':
import('./features/syntax/ClassProperties').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'computed-properties':
- import(
- './features/syntax/ComputedProperties'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/ComputedProperties').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'css-inclusion':
import('./features/webpack/CssInclusion').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'custom-interpolation':
- import(
- './features/syntax/CustomInterpolation'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/CustomInterpolation').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'default-parameters':
import('./features/syntax/DefaultParameters').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'destructuring-and-await':
- import(
- './features/syntax/DestructuringAndAwait'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/DestructuringAndAwait').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'file-env-variables':
import('./features/env/FileEnvVariables').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'generators':
import('./features/syntax/Generators').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'image-inclusion':
import('./features/webpack/ImageInclusion').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'json-inclusion':
import('./features/webpack/JsonInclusion').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'linked-modules':
import('./features/webpack/LinkedModules').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'node-path':
import('./features/env/NodePath').then(f => this.setFeature(f.default));
break;
case 'no-ext-inclusion':
import('./features/webpack/NoExtInclusion').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'object-destructuring':
- import(
- './features/syntax/ObjectDestructuring'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/ObjectDestructuring').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'object-spread':
import('./features/syntax/ObjectSpread').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'promises':
import('./features/syntax/Promises').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'public-url':
import('./features/env/PublicUrl').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'rest-and-default':
import('./features/syntax/RestAndDefault').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'rest-parameters':
import('./features/syntax/RestParameters').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'shell-env-variables':
import('./features/env/ShellEnvVariables').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'svg-inclusion':
import('./features/webpack/SvgInclusion').then(f =>
- this.setFeature(f.default));
+ this.setFeature(f.default)
+ );
break;
case 'template-interpolation':
- import(
- './features/syntax/TemplateInterpolation'
- ).then(f => this.setFeature(f.default));
+ import('./features/syntax/TemplateInterpolation').then(f =>
+ this.setFeature(f.default)
+ );
break;
case 'unknown-ext-inclusion':
- import(
- './features/webpack/UnknownExtInclusion'
- ).then(f => this.setFeature(f.default));
+ import('./features/webpack/UnknownExtInclusion').then(f =>
+ this.setFeature(f.default)
+ );
break;
default:
throw new Error(`Missing feature "${feature}"`);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js
index 55ae368e4..03d638471 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js
@@ -9,7 +9,7 @@
import React from 'react';
-export default () => (
+export default () =>
{process.env.REACT_APP_ORIGINAL_1}
@@ -18,8 +18,10 @@ export default () => (
{process.env.REACT_APP_ORIGINAL_2}
- {process.env.REACT_APP_DEVELOPMENT}{process.env.REACT_APP_PRODUCTION}
+ {process.env.REACT_APP_DEVELOPMENT}
+ {process.env.REACT_APP_PRODUCTION}
- {process.env.REACT_APP_X}
-
-);
+
+ {process.env.REACT_APP_X}
+
+ ;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
index a039cefed..6d2437a64 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js
@@ -33,7 +33,11 @@ export default class extends Component {
render() {
return (
-);
+export default () =>
+ ;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js
index e81f76397..66425c66c 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js
@@ -10,4 +10,7 @@
import React from 'react';
import { abstract } from './assets/abstract.json';
-export default () => {abstract} ;
+export default () =>
+
+ {abstract}
+ ;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js
index de8a5e4ab..395ebd7ed 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js
@@ -16,5 +16,9 @@ export default () => {
if (!test() || v !== '2.0.0') {
throw new Error('Functionality test did not pass.');
}
- return /src/**/__tests__/**/*.ts?(x)',
'/src/**/?(*.)(spec|test).ts?(x)',
@@ -49,7 +59,7 @@ module.exports = (resolve, rootDir) => {
'ts-jest': {
tsConfigFile: paths.appTsTestConfig,
},
- },
+ }
};
if (rootDir) {
config.rootDir = rootDir;
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index dd7a48299..577502840 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -17,6 +17,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
- [Debugging in the Editor](#debugging-in-the-editor)
+- [Formatting Code Automatically](#formatting-code-automatically)
- [Changing the Page ``](#changing-the-page-title)
- [Installing a Dependency](#installing-a-dependency)
- [Importing a Component](#importing-a-component)
@@ -44,6 +45,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Proxying API Requests in Development](#proxying-api-requests-in-development)
- ["Invalid Host Header" Errors After Configuring Proxy](#invalid-host-header-errors-after-configuring-proxy)
- [Configuring the Proxy Manually](#configuring-the-proxy-manually)
+ - [Configuring a WebSocket Proxy](#configuring-a-websocket-proxy)
- [Using HTTPS in Development](#using-https-in-development)
- [Generating Dynamic `<meta>` Tags on the Server](#generating-dynamic-meta-tags-on-the-server)
- [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files)
@@ -62,9 +64,13 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Disabling jsdom](#disabling-jsdom)
- [Snapshot Testing](#snapshot-testing)
- [Editor Integration](#editor-integration)
+- [Developing Components in Isolation](#developing-components-in-isolation)
+ - [Getting Started with Storybook](#getting-started-with-storybook)
+ - [Getting Started with Styleguidist](#getting-started-with-styleguidist)
- [Making a Progressive Web App](#making-a-progressive-web-app)
- [Offline-First Considerations](#offline-first-considerations)
- [Progressive Web App Metadata](#progressive-web-app-metadata)
+- [Analyzing the Bundle Size](#analyzing-the-bundle-size)
- [Deployment](#deployment)
- [Static Server](#static-server)
- [Other Solutions](#other-solutions)
@@ -83,7 +89,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Troubleshooting](#troubleshooting)
- [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
- [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
- - [`npm run build` silently fails](#npm-run-build-silently-fails)
+ - [`npm run build` exits too early](#npm-run-build-exits-too-early)
- [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
- [Moment.js locales are missing](#momentjs-locales-are-missing)
- [Something Missing?](#something-missing)
@@ -138,7 +144,7 @@ For the project to build, **these files must exist with exact filenames**:
You can delete or rename the other files.
You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.<br>
-You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them.
+You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them.
Only files inside `public` can be used from `public/index.html`.<br>
Read instructions below for using assets from JavaScript and HTML.
@@ -263,6 +269,56 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
+## Formatting Code Automatically
+
+Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
+
+To format our code whenever we make a commit in git, we need to install the following dependencies:
+
+```sh
+npm install --save husky lint-staged prettier
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add husky lint-staged prettier
+```
+
+* `husky` makes it easy to use githooks as if they are npm scripts.
+* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+* `prettier` is the JavaScript formatter we will run before commits.
+
+Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
+
+Add the following line to `scripts` section:
+
+```diff
+ "scripts": {
++ "precommit": "lint-staged",
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+```
+
+Next we add a 'lint-staged' field to the `package.json`, for example:
+
+```diff
+ "dependencies": {
+ // ...
+ },
++ "lint-staged": {
++ "src/**/*.{js,jsx,json,css}": [
++ "prettier --single-quote --write",
++ "git add"
++ ]
++ },
+ "scripts": {
+```
+
+Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time.
+
+Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
+
## Changing the Page `<title>`
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
@@ -277,10 +333,18 @@ If you use a custom server for your app in production and want to modify the tit
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:
+```sh
+npm install --save react-router
```
-npm install --save <library-name>
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add react-router
```
+This works for any library, not just `react-router`.
+
## Importing a Component
This project setup supports ES6 modules thanks to Babel.<br>
@@ -377,6 +441,10 @@ This will make `moduleA.js` and all its unique dependencies as a separate chunk
You can also use it with `async` / `await` syntax if you prefer it.
+### With React Router
+
+If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app).
+
## Adding a Stylesheet
This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
@@ -450,9 +518,16 @@ Following this rule often makes CSS preprocessors less useful, as features like
First, let’s install the command-line interface for Sass:
+```sh
+npm install --save node-sass-chokidar
```
-npm install node-sass-chokidar --save-dev
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add node-sass-chokidar
```
+
Then in `package.json`, add the following lines to `scripts`:
```diff
@@ -488,8 +563,14 @@ At this point you might want to remove all CSS files from the source control, an
As a final step, you may find it convenient to run `watch-css` automatically with `npm start`, and run `build-css` as a part of `npm run build`. You can use the `&&` operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this:
+```sh
+npm install --save npm-run-all
```
-npm install --save-dev npm-run-all
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add npm-run-all
```
Then we can change `start` and `build` scripts to include the CSS preprocessor commands:
@@ -647,9 +728,14 @@ You don’t have to use [React Bootstrap](https://react-bootstrap.github.io) tog
Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
+```sh
+npm install --save react-bootstrap bootstrap@3
```
-npm install react-bootstrap --save
-npm install bootstrap@3 --save
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add react-bootstrap bootstrap@3
```
Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file:
@@ -688,9 +774,9 @@ Recent versions of [Flow](http://flowtype.org/) work with Create React App proje
To add Flow to a Create React App project, follow these steps:
-1. Run `npm install --save-dev flow-bin` (or `yarn add --dev flow-bin`).
+1. Run `npm install --save flow-bin` (or `yarn add flow-bin`).
2. Add `"flow": "flow"` to the `scripts` section of your `package.json`.
-3. Run `npm run flow -- init` (or `yarn flow -- init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory.
+3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory.
4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`).
Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors.
@@ -972,7 +1058,7 @@ You may also narrow down matches using `*` and/or `**`, to match the path exactl
"target": "<url_3>",
// ...
},
- // Matches /bar/abc.html and /bar/sub/def.html
+ // Matches /baz/abc.html and /baz/sub/def.html
"/baz/**/*.html": {
"target": "<url_4>"
// ...
@@ -982,6 +1068,36 @@ You may also narrow down matches using `*` and/or `**`, to match the path exactl
}
```
+### Configuring a WebSocket Proxy
+
+When setting up a WebSocket proxy, there are a some extra considerations to be aware of.
+
+If you’re using a WebSocket engine like [Socket.io](https://socket.io/), you must have a Socket.io server running that you can use as the proxy target. Socket.io will not work with a standard WebSocket server. Specifically, don't expect Socket.io to work with [the websocket.org echo test](http://websocket.org/echo.html).
+
+There’s some good documentation available for [setting up a Socket.io server](https://socket.io/docs/).
+
+Standard WebSockets **will** work with a standard WebSocket server as well as the websocket.org echo test. You can use libraries like [ws](https://github.com/websockets/ws) for the server, with [native WebSockets in the browser](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
+
+Either way, you can proxy WebSocket requests manually in `package.json`:
+
+```js
+{
+ // ...
+ "proxy": {
+ "/socket": {
+ // Your compatible WebSocket server
+ "target": "ws://<socket_url>",
+ // Tell http-proxy-middleware that this is a WebSocket proxy.
+ // Also allows you to proxy WebSocket requests without an additional HTTP request
+ // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
+ "ws": true
+ // ...
+ }
+ }
+ // ...
+}
+```
+
## Using HTTPS in Development
>Note: this feature is available with `react-scripts@0.4.0` and higher.
@@ -1082,7 +1198,7 @@ The watcher includes an interactive command-line interface with the ability to r
### Version Control Integration
-By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests runs fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.
+By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.
Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests.
@@ -1127,12 +1243,20 @@ This test mounts a component and makes sure that it didn’t throw during render
When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior.
-If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too:
+If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run:
+
+```sh
+npm install --save enzyme react-test-renderer
+```
+
+Alternatively you may use `yarn`:
```sh
-npm install --save-dev enzyme react-test-renderer
+yarn add enzyme react-test-renderer
```
+You can write a smoke test with it too:
+
```js
import React from 'react';
import { shallow } from 'enzyme';
@@ -1171,18 +1295,24 @@ Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzym
expect(wrapper).toContainReact(welcome)
```
-To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. **Note that currently only version 2.x is compatible with Create React App.**
+To enable this, install `jest-enzyme`:
```sh
-npm install --save-dev jest-enzyme@2.x
+npm install --save jest-enzyme
```
+Alternatively you may use `yarn`:
+
+```sh
+yarn add jest-enzyme
+```
+
+Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test:
+
```js
-// src/setupTests.js
import 'jest-enzyme';
```
-
### Using Third Party Assertion Libraries
We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566).
@@ -1244,7 +1374,6 @@ Popular CI servers already set the environment variable `CI` by default but you
```
language: node_js
node_js:
- - 4
- 6
cache:
directories:
@@ -1256,6 +1385,10 @@ script:
1. Trigger your first build with a git push.
1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed.
+#### CircleCI
+
+Follow [this article](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) to set up CircleCI with a Create React App project.
+
### On your own environment
##### Windows (cmd.exe)
@@ -1290,14 +1423,22 @@ The build command will check for linter warnings and fail if any are found.
By default, the `package.json` of the generated project looks like this:
```js
- // ...
"scripts": {
- // ...
+ "start": "react-scripts start",
+ "build": "react-scripts build",
"test": "react-scripts test --env=jsdom"
- }
```
-If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.<br>
+If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster:
+
+```diff
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+- "test": "react-scripts test --env=jsdom"
++ "test": "react-scripts test"
+```
+
To help you make up your mind, here is a list of APIs that **need jsdom**:
* Any browser globals like `window` and `document`
@@ -1322,30 +1463,31 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
-<!--
## Developing Components in Isolation
Usually, in an app, you have a lot of UI components, and each of them has many different states.
For an example, a simple button component could have following states:
-* With a text label.
-* With an emoji.
+* In a regular state, with a text label.
* In the disabled mode.
+* In a loading state.
Usually, it’s hard to see these states without running a sample app or some examples.
-Create React App doesn’t include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
+Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
-
+
-You can also deploy your Storybook as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.
+You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.
-**Here’s how to setup your app with Storybook:**
+### Getting Started with Storybook
+
+Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
First, install the following npm package globally:
```sh
-npm install -g getstorybook
+npm install -g @storybook/cli
```
Then, run the following command inside your app’s directory:
@@ -1359,10 +1501,47 @@ After that, follow the instructions on the screen.
Learn more about React Storybook:
* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
-* [GitHub Repo](https://github.com/kadirahq/react-storybook)
-* [Documentation](https://storybooks.js.org/docs/react-storybook/basics/introduction/)
-* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook
--->
+* [GitHub Repo](https://github.com/storybooks/storybook)
+* [Documentation](https://storybook.js.org/basics/introduction/)
+* [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
+
+### Getting Started with Styleguidist
+
+Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground.
+
+First, install Styleguidist:
+
+```sh
+npm install --save react-styleguidist
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add react-styleguidist
+```
+
+Then, add these scripts to your `package.json`:
+
+```diff
+ "scripts": {
++ "styleguide": "styleguidist server",
++ "styleguide:build": "styleguidist build",
+ "start": "react-scripts start",
+```
+
+Then, run the following command inside your app’s directory:
+
+```sh
+npm run styleguide
+```
+
+After that, follow the instructions on the screen.
+
+Learn more about React Styleguidist:
+
+* [GitHub Repo](https://github.com/styleguidist/react-styleguidist)
+* [Documentation](https://react-styleguidist.js.org/docs/getting-started.html)
## Making a Progressive Web App
@@ -1381,7 +1560,7 @@ and it will take care of generating a service worker file that will automaticall
precache all of your local assets and keep them up to date as you deploy updates.
The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
for handling all requests for local assets, including the initial HTML, ensuring
-that you web app is reliably fast, even on a slow or unreliable network.
+that your web app is reliably fast, even on a slow or unreliable network.
If you would prefer not to enable service workers prior to your initial
production deployment, then remove the call to `serviceWorkerRegistration.register()`
@@ -1464,6 +1643,52 @@ icons, names, and branding colors to use when the web app is displayed.
provides more context about what each field means, and how your customizations
will affect your users' experience.
+## Analyzing the Bundle Size
+
+[Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes
+JavaScript bundles using the source maps. This helps you understand where code
+bloat is coming from.
+
+To add Source map explorer to a Create React App project, follow these steps:
+
+```sh
+npm install --save source-map-explorer
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add source-map-explorer
+```
+
+Then in `package.json`, add the following line to `scripts`:
+
+```diff
+ "scripts": {
++ "analyze": "source-map-explorer build/static/js/main.*",
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+```
+
+>**Note:**
+>
+>This doesn't quite work on Windows because it doesn't automatically expand `*` in the filepath. For now, the workaround is to look at the full hashed filename in `build/static/js` (e.g. `main.89b7e95a.js`) and copy it into `package.json` when you're running the analyzer. For example:
+>
+>```diff
+>+ "analyze": "source-map-explorer build/static/js/main.89b7e95a.js",
+>```
+>
+>Unfortunately it will be different after every build. You can express support for fixing this on Windows [in this issue](https://github.com/danvk/source-map-explorer/issues/52).
+
+Then to analyze the bundle run the production build then run the analyze
+script.
+
+```
+npm run build
+npm run analyze
+```
+
## Deployment
`npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file.
@@ -1526,7 +1751,7 @@ This is because when there is a fresh page load for a `/todos/42`, the server lo
});
```
-If you’re using [Apache](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
+If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
```
Options -MultiViews
@@ -1535,7 +1760,9 @@ If you’re using [Apache](https://httpd.apache.org/), you need to create a `.ht
RewriteRule ^ index.html [QSA,L]
```
-It will get copied to the `build` folder when you run `npm run build`.
+It will get copied to the `build` folder when you run `npm run build`.
+
+If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
Now requests to `/todos/42` will be handled correctly both in development and in production.
@@ -1660,18 +1887,23 @@ Now, whenever you run `npm run build`, you will see a cheat sheet with instructi
To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run:
```sh
-npm install --save-dev gh-pages
+npm install --save gh-pages
+```
+
+Alternatively you may use `yarn`:
+
+```sh
+yarn add gh-pages
```
Add the following scripts in your `package.json`:
-```js
- // ...
+```diff
"scripts": {
- // ...
- "predeploy": "npm run build",
- "deploy": "gh-pages -d build"
- }
++ "predeploy": "npm run build",
++ "deploy": "gh-pages -d build",
+ "start": "react-scripts start",
+ "build": "react-scripts build",
```
The `predeploy` script will run automatically before `deploy` is run.
@@ -1698,7 +1930,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
-* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
+* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
### Heroku
@@ -1774,27 +2006,23 @@ When you build the project, Create React App will place the `public` folder cont
### Now
-[now](https://zeit.co/now) offers a zero-configuration single-command deployment.
+[now](https://zeit.co/now) offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free.
1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.
-2. Install `serve` by running `npm install --save serve`.
+2. Build your app by running `npm run build`.
-3. Add this line to `scripts` in `package.json`:
+3. Move into the build directory by running `cd build`.
- ```
- "now-start": "serve -s build/",
- ```
-
-4. Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
+4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this:
```
- > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
+ > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard)
```
Paste that URL into your browser when the build is complete, and you will see your deployed app.
-Details are available in [this article.](https://zeit.co/blog/now-static)
+Details are available in [this article.](https://zeit.co/blog/unlimited-static)
### S3 and CloudFront
@@ -1824,6 +2052,7 @@ PORT | :white_check_mark: | :x: | By default, the development web server will at
HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode.
PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.
CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.
+REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder.
## Troubleshooting
@@ -1865,9 +2094,13 @@ If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchA
There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
-### `npm run build` silently fails
+### `npm run build` exits too early
+
+It is reported that `npm run build` can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:
+
+> The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
-It is reported that `npm run build` can fail on machines with no swap space, which is common in cloud environments. If [the symptoms are matching](https://github.com/facebookincubator/create-react-app/issues/1133#issuecomment-264612171), consider adding some swap space to the machine you’re building on, or build the project locally.
+If you are completely sure that you didn't terminate the process, consider [adding some swap space](https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04) to the machine you’re building on, or build the project locally.
### `npm run build` fails on Heroku
diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts
index 69e361673..11c4bc72c 100644
--- a/packages/react-scripts/template/src/registerServiceWorker.ts
+++ b/packages/react-scripts/template/src/registerServiceWorker.ts
@@ -1,49 +1,108 @@
+// tslint:disable:no-console
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
+// will only see deployed updates on the 'N+1' visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.1/8 is considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(
+ process.env.PUBLIC_URL!,
+ window.location.toString()
+ );
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+ return;
+ }
+
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (!installingWorker) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the old content will have been purged and
- // the fresh content will have been added to the cache.
- // It's the perfect time to display a "New content is
- // available; please refresh." message in your web app.
- console.log('New content is available; please refresh.'); // tslint:disable-line
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.'); // tslint:disable-line
- }
+ if (!isLocalhost) {
+ // Is not local host. Just register service worker
+ registerValidSW(swUrl);
+ } else {
+ // This is running on localhost. Lets check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl: string) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker) {
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the old content will have been purged and
+ // the fresh content will have been added to the cache.
+ // It's the perfect time to display a 'New content is
+ // available; please refresh.' message in your web app.
+ console.log('New content is available; please refresh.');
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // 'Content is cached for offline use.' message.
+ console.log('Content is cached for offline use.');
}
- };
+ }
};
- })
- .catch(error => {
- console.error('Error during service worker registration:', error); // tslint:disable-line
+ }
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl: string) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl)
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ if (
+ response.status === 404 ||
+ response.headers.get('content-type')!.indexOf('javascript') === -1
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
});
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
});
- }
}
export function unregister() {
diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh
index b27b1239e..588642632 100755
--- a/tasks/e2e-installs.sh
+++ b/tasks/e2e-installs.sh
@@ -55,15 +55,6 @@ function checkDependencies {
echo "There are extraneous dependencies in package.json"
exit 1
fi
-
-
- if ! awk '/"devDependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \
- grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then
- echo "Dev Dependencies are correct"
- else
- echo "There are extraneous devDependencies in package.json"
- exit 1
- fi
}
function create_react_app {
@@ -83,9 +74,37 @@ set -x
cd ..
root_path=$PWD
-# Prevent lerna bootstrap, we only want top-level dependencies
+# Clear cache to avoid issues with incorrect packages being used
+if hash yarnpkg 2>/dev/null
+then
+ # AppVeyor uses an old version of yarn.
+ # Once updated to 0.24.3 or above, the workaround can be removed
+ # and replaced with `yarnpkg cache clean`
+ # Issues:
+ # https://github.com/yarnpkg/yarn/issues/2591
+ # https://github.com/appveyor/ci/issues/1576
+ # https://github.com/facebookincubator/create-react-app/pull/2400
+ # When removing workaround, you may run into
+ # https://github.com/facebookincubator/create-react-app/issues/2030
+ case "$(uname -s)" in
+ *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;;
+ *) yarn=yarnpkg;;
+ esac
+ $yarn cache clean
+fi
+
+if hash npm 2>/dev/null
+then
+ # npm 5 is too buggy right now
+ if [ $(npm -v | head -c 1) -eq 5 ]; then
+ npm i -g npm@^4.x
+ fi;
+ npm cache clean || npm cache verify
+fi
+
+# Prevent bootstrap, we only want top-level dependencies
cp package.json package.json.bak
-grep -v "lerna bootstrap" package.json > temp && mv temp package.json
+grep -v "postinstall" package.json > temp && mv temp package.json
npm install
mv package.json.bak package.json
@@ -97,7 +116,7 @@ then
fi
# We removed the postinstall, so do it manually
-./node_modules/.bin/lerna bootstrap --concurrency=1
+node bootstrap.js
cd packages/react-error-overlay/
npm run build:prod
diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh
index 2295615e8..ebbac271e 100755
--- a/tasks/e2e-kitchensink.sh
+++ b/tasks/e2e-kitchensink.sh
@@ -22,7 +22,7 @@ temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'`
function cleanup {
echo 'Cleaning up.'
- ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -s 9
+ ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -9
cd "$root_path"
# TODO: fix "Device or resource busy" and remove ``|| $CI`
rm -rf "$temp_cli_path" "$temp_app_path" "$temp_module_path" || $CI
@@ -66,9 +66,37 @@ set -x
cd ..
root_path=$PWD
-# Prevent lerna bootstrap, we only want top-level dependencies
+# Clear cache to avoid issues with incorrect packages being used
+if hash yarnpkg 2>/dev/null
+then
+ # AppVeyor uses an old version of yarn.
+ # Once updated to 0.24.3 or above, the workaround can be removed
+ # and replaced with `yarnpkg cache clean`
+ # Issues:
+ # https://github.com/yarnpkg/yarn/issues/2591
+ # https://github.com/appveyor/ci/issues/1576
+ # https://github.com/facebookincubator/create-react-app/pull/2400
+ # When removing workaround, you may run into
+ # https://github.com/facebookincubator/create-react-app/issues/2030
+ case "$(uname -s)" in
+ *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;;
+ *) yarn=yarnpkg;;
+ esac
+ $yarn cache clean
+fi
+
+if hash npm 2>/dev/null
+then
+ # npm 5 is too buggy right now
+ if [ $(npm -v | head -c 1) -eq 5 ]; then
+ npm i -g npm@^4.x
+ fi;
+ npm cache clean || npm cache verify
+fi
+
+# Prevent bootstrap, we only want top-level dependencies
cp package.json package.json.bak
-grep -v "lerna bootstrap" package.json > temp && mv temp package.json
+grep -v "postinstall" package.json > temp && mv temp package.json
npm install
mv package.json.bak package.json
@@ -80,7 +108,7 @@ then
fi
# We removed the postinstall, so do it manually
-./node_modules/.bin/lerna bootstrap --concurrency=1
+node bootstrap.js
cd packages/react-error-overlay/
npm run build:prod
@@ -156,7 +184,7 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
CI=true \
NODE_PATH=src \
NODE_ENV=test \
- npm test -- --no-cache --testPathPattern="/src/"
+ npm test -- --no-cache --testPathPattern=src
# Test "development" environment
tmp_server_log=`mktemp`
@@ -220,7 +248,7 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
CI=true \
NODE_PATH=src \
NODE_ENV=test \
- npm test -- --no-cache --testPathPattern='/src/'
+ npm test -- --no-cache --testPathPattern=src
# Test "development" environment
tmp_server_log=`mktemp`
diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh
index 72a3698a3..2918fc0f5 100755
--- a/tasks/e2e-simple.sh
+++ b/tasks/e2e-simple.sh
@@ -65,9 +65,37 @@ set -x
cd ..
root_path=$PWD
-# Prevent lerna bootstrap, we only want top-level dependencies
+# Clear cache to avoid issues with incorrect packages being used
+if hash yarnpkg 2>/dev/null
+then
+ # AppVeyor uses an old version of yarn.
+ # Once updated to 0.24.3 or above, the workaround can be removed
+ # and replaced with `yarnpkg cache clean`
+ # Issues:
+ # https://github.com/yarnpkg/yarn/issues/2591
+ # https://github.com/appveyor/ci/issues/1576
+ # https://github.com/facebookincubator/create-react-app/pull/2400
+ # When removing workaround, you may run into
+ # https://github.com/facebookincubator/create-react-app/issues/2030
+ case "$(uname -s)" in
+ *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;;
+ *) yarn=yarnpkg;;
+ esac
+ $yarn cache clean
+fi
+
+if hash npm 2>/dev/null
+then
+ # npm 5 is too buggy right now
+ if [ $(npm -v | head -c 1) -eq 5 ]; then
+ npm i -g npm@^4.x
+ fi;
+ npm cache clean || npm cache verify
+fi
+
+# Prevent bootstrap, we only want top-level dependencies
cp package.json package.json.bak
-grep -v "lerna bootstrap" package.json > temp && mv temp package.json
+grep -v "postinstall" package.json > temp && mv temp package.json
npm install
mv package.json.bak package.json
@@ -87,9 +115,6 @@ then
[[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1
fi
-# We removed the postinstall, so do it manually here
-./node_modules/.bin/lerna bootstrap --concurrency=1
-
if [ "$USE_YARN" = "yes" ]
then
# Install Yarn so that the test can use it to install packages.
@@ -97,6 +122,9 @@ then
yarn cache clean
fi
+# We removed the postinstall, so do it manually here
+node bootstrap.js
+
# Lint own code
./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/
./node_modules/.bin/eslint --max-warnings 0 packages/create-react-app/
diff --git a/tasks/local-test.sh b/tasks/local-test.sh
new file mode 100755
index 000000000..42d98ffcd
--- /dev/null
+++ b/tasks/local-test.sh
@@ -0,0 +1,113 @@
+#!/usr/bin/env bash
+
+function print_help {
+ echo "Usage: ${0} [OPTIONS]"
+ echo ""
+ echo "OPTIONS:"
+ echo " --node-version <version> the node version to use while testing [6]"
+ echo " --git-branch <branch> the git branch to checkout for testing [the current one]"
+ echo " --test-suite <suite> which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']"
+ echo " --yarn if present, use yarn as the package manager"
+ echo " --interactive gain a bash shell after the test run"
+ echo " --help print this message and exit"
+ echo ""
+}
+
+cd $(dirname $0)
+
+node_version=6
+current_git_branch=`git rev-parse --abbrev-ref HEAD`
+git_branch=${current_git_branch}
+use_yarn=no
+test_suite=all
+interactive=false
+
+while [ "$1" != "" ]; do
+ case $1 in
+ "--node-version")
+ shift
+ node_version=$1
+ ;;
+ "--git-branch")
+ shift
+ git_branch=$1
+ ;;
+ "--yarn")
+ use_yarn=yes
+ ;;
+ "--test-suite")
+ shift
+ test_suite=$1
+ ;;
+ "--interactive")
+ interactive=true
+ ;;
+ "--help")
+ print_help
+ exit 0
+ ;;
+ esac
+ shift
+done
+
+test_command="./tasks/e2e-simple.sh && ./tasks/e2e-kitchensink.sh && ./tasks/e2e-installs.sh"
+case ${test_suite} in
+ "all")
+ ;;
+ "simple")
+ test_command="./tasks/e2e-simple.sh"
+ ;;
+ "kitchensink")
+ test_command="./tasks/e2e-kitchensink.sh"
+ ;;
+ "installs")
+ test_command="./tasks/e2e-installs.sh"
+ ;;
+ *)
+ ;;
+esac
+
+read -r -d '' apply_changes <<- CMD
+cd /var/create-react-app
+git config --global user.name "Create React App"
+git config --global user.email "cra@email.com"
+git stash save -u
+git stash show -p > patch
+git diff 4b825dc642cb6eb9a060e54bf8d69288fbee4904 stash^3 >> patch
+git stash pop
+cd -
+mv /var/create-react-app/patch .
+git apply patch
+rm patch
+CMD
+
+if [ ${git_branch} != ${current_git_branch} ]; then
+ apply_changes=''
+fi
+
+read -r -d '' command <<- CMD
+echo "prefix=~/.npm" > ~/.npmrc
+mkdir ~/.npm
+export PATH=\$PATH:~/.npm/bin
+set -x
+git clone /var/create-react-app create-react-app --branch ${git_branch}
+cd create-react-app
+${apply_changes}
+node --version
+npm --version
+set +x
+${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m"
+$([[ ${interactive} == 'true' ]] && echo 'bash')
+CMD
+
+docker run \
+ --env CI=true \
+ --env NPM_CONFIG_QUIET=true \
+ --env USE_YARN=${use_yarn} \
+ --tty \
+ --user node \
+ --volume ${PWD}/..:/var/create-react-app \
+ --workdir /home/node \
+ $([[ ${interactive} == 'true' ]] && echo '--interactive') \
+ node:${node_version} \
+ bash -c "${command}"
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js
index 4ea9b96f8..af87748e6 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js
@@ -9,6 +9,7 @@
import React from 'react';
-export default () => (
- {process.env.PUBLIC_URL}.
-);
+export default () =>
+
+ {process.env.PUBLIC_URL}.
+ ;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js
index 8449097d6..400dfc013 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js
@@ -9,8 +9,7 @@
import React from 'react';
-export default () => (
+export default () =>
{process.env.REACT_APP_SHELL_ENV_MESSAGE}.
-
-);
+ ;
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
index be6c39f90..de0576549 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js
@@ -38,7 +38,11 @@ export default class extends Component {
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
{this.state.users.map(user => {
const [id, name] = user;
- return
);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
index eb7886aa4..ebf90ef6e 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{name}
;
+ return (
+
+ {name}
+
+ );
})}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
index a60633460..c91da311d 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
index ed96d4f8c..58ae10763 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js
@@ -29,7 +29,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
index 38dc797a8..fcbf721e8 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js
@@ -41,9 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user => (
-
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
index 1a0123391..ab648255a 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js
@@ -53,9 +53,11 @@ export default class extends Component {
return (
{user.user_name}
- ))}
+ {this.state.users.map(user =>
+
+ {user.user_name}
+
+ )}
- {this.state.users.map(user => (
-
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
index 0a519eba8..6ebabaec7 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
- ))}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
index d44f4cf22..aa8c9d7db 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js
@@ -43,7 +43,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
index 2fe473d13..44b2776e1 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js
@@ -43,7 +43,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
index 2994d14af..8a7b1095f 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js
@@ -43,7 +43,11 @@ export default class extends Component {
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
{this.state.users.map(user => {
const { id, name } = user;
- return
);
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
index 65705f11b..5ff4e10ac 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js
@@ -41,9 +41,11 @@ export default class extends Component {
render() {
return (
{name}
;
+ return (
+
+ {name}
+
+ );
})}
- {this.state.users.map(user => (
-
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
index e626de5d8..31ef2c9eb 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js
@@ -42,7 +42,11 @@ export default class extends Component {
render() {
return (
{user.name}: {user.age}
- ))}
+ {this.state.users.map(user =>
+
+ {user.name}: {user.age}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
index dc2a1563a..9e3e3fbab 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
index e703a33cc..98a0e7edc 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
index 5aba5da62..b69f7ede8 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js
@@ -41,7 +41,11 @@ export default class extends Component {
render() {
return (
{user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
- {this.state.users.map(user =>
);
}
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js
index a6ca7aaa8..8598d8d06 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js
@@ -10,6 +10,5 @@
import React from 'react';
import tiniestCat from './assets/tiniest-cat.jpg';
-export default () => (
- {user.name}
)}
+ {this.state.users.map(user =>
+
+ {user.name}
+
+ )}
{v}
; + return ( ++ {v} +
+ ); }; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js index 7f824c2f2..086885db2 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js @@ -14,6 +14,7 @@ const text = aFileWithoutExt.includes('base64') ? atob(aFileWithoutExt.split('base64,')[1]).trim() : aFileWithoutExt; -export default () => ( - aFileWithoutExt -); +export default () => + + aFileWithoutExt + ; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js index 70b046e95..c41a1e0c0 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js @@ -14,6 +14,7 @@ const text = aFileWithExtUnknown.includes('base64') ? atob(aFileWithExtUnknown.split('base64,')[1]).trim() : aFileWithExtUnknown; -export default () => ( - aFileWithExtUnknown -); +export default () => + + aFileWithExtUnknown + ; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css index c399d1aca..9502cfaa1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css @@ -1,3 +1,9 @@ +/* + * Ensure CSS inclusion doesn't regress + * https://github.com/facebookincubator/create-react-app/issues/2677 + */ +@import '~normalize.css/normalize.css'; + #feature-css-inclusion { background: palevioletred; color: papayawhip; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index de6a54484..94b189747 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -22,15 +22,16 @@ "react-scripts-ts": "./bin/react-scripts-ts.js" }, "dependencies": { - "autoprefixer": "7.1.0", + "autoprefixer": "7.1.1", "app-root-path": "^2.0.1", - "case-sensitive-paths-webpack-plugin": "2.0.0", + "case-sensitive-paths-webpack-plugin": "2.1.1", + "chalk": "1.1.3", "chalk": "1.1.3", "cli-highlight": "1.1.4", - "css-loader": "0.28.1", + "css-loader": "0.28.4", "dotenv": "4.0.0", - "extract-text-webpack-plugin": "2.1.0", - "file-loader": "0.11.1", + "extract-text-webpack-plugin": "2.1.2", + "file-loader": "0.11.2", "fs-extra": "3.0.1", "html-webpack-plugin": "2.28.0", "jest": "20.0.3", @@ -38,9 +39,9 @@ "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.5", "promise": "7.1.1", - "react-dev-utils": "^2.0.1", - "react-error-overlay": "^1.0.6", - "style-loader": "0.17.0", + "react-dev-utils": "^3.0.1", + "react-error-overlay": "^1.0.8", + "style-loader": "0.18.2", "ts-jest": "^20.0.7", "ts-loader": "^2.2.1", "tslint": "^5.2.0", @@ -48,10 +49,10 @@ "tslint-react": "^3.0.0", "typescript": "~2.4.0", "source-map-loader": "^0.2.1", - "sw-precache-webpack-plugin": "0.9.1", + "sw-precache-webpack-plugin": "0.11.3", "url-loader": "0.5.8", - "webpack": "2.6.0", - "webpack-dev-server": "2.4.5", + "webpack": "2.6.1", + "webpack-dev-server": "2.5.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "2.0.3" }, @@ -60,6 +61,6 @@ "react-dom": "^15.5.4" }, "optionalDependencies": { - "fsevents": "1.0.17" + "fsevents": "1.1.2" } } diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 6548609ff..b9b65f531 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -11,6 +11,7 @@ 'use strict'; // Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'production'; process.env.NODE_ENV = 'production'; // Makes the script crash on unhandled rejections instead of silently @@ -34,10 +35,15 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); -const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; +const measureFileSizesBeforeBuild = + FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); +// These sizes are pretty large. We'll warn for bundles exceeding them. +const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; +const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; + // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); @@ -75,7 +81,13 @@ measureFileSizesBeforeBuild(paths.appBuild) } console.log('File sizes after gzip:\n'); - printFileSizesAfterBuild(stats, previousFileSizes); + printFileSizesAfterBuild( + stats, + previousFileSizes, + paths.appBuild, + WARN_AFTER_BUNDLE_GZIP_SIZE, + WARN_AFTER_CHUNK_GZIP_SIZE + ); console.log(); const appPackage = require(paths.appPackageJson); @@ -111,7 +123,12 @@ function build(previousFileSizes) { if (messages.errors.length) { return reject(new Error(messages.errors.join('\n\n'))); } - if (process.env.CI && messages.warnings.length) { + if ( + process.env.CI && + (typeof process.env.CI !== 'string' || + process.env.CI.toLowerCase() !== 'false') && + messages.warnings.length + ) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index c771e075d..3d8d258cc 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -85,19 +85,16 @@ inquirer const folders = ['config', 'config/jest', 'scripts']; // Make shallow array of files paths - const files = folders.reduce( - (files, folder) => { - return files.concat( - fs - .readdirSync(path.join(ownPath, folder)) - // set full path - .map(file => path.join(ownPath, folder, file)) - // omit dirs from file list - .filter(file => fs.lstatSync(file).isFile()) - ); - }, - [] - ); + const files = folders.reduce((files, folder) => { + return files.concat( + fs + .readdirSync(path.join(ownPath, folder)) + // set full path + .map(file => path.join(ownPath, folder, file)) + // omit dirs from file list + .filter(file => fs.lstatSync(file).isFile()) + ); + }, []); // Ensure that the app folder is clean and we won't override any files folders.forEach(verifyAbsent); @@ -124,18 +121,19 @@ inquirer if (content.match(/\/\/ @remove-file-on-eject/)) { return; } - content = content - // Remove dead code from .js files on eject - .replace( - /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, - '' - ) - // Remove dead code from .applescript files on eject - .replace( - /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, - '' - ) - .trim() + '\n'; + content = + content + // Remove dead code from .js files on eject + .replace( + /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/gm, + '' + ) + // Remove dead code from .applescript files on eject + .replace( + /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/gm, + '' + ) + .trim() + '\n'; console.log(` Adding ${cyan(file.replace(ownPath, ''))} to the project`); fs.writeFileSync(file.replace(ownPath, appPath), content); }); @@ -146,35 +144,50 @@ inquirer console.log(cyan('Updating the dependencies')); const ownPackageName = ownPackage.name; - if (appPackage.devDependencies[ownPackageName]) { - console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); - delete appPackage.devDependencies[ownPackageName]; + if (appPackage.devDependencies) { + // We used to put react-scripts in devDependencies + if (appPackage.devDependencies[ownPackageName]) { + console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); + delete appPackage.devDependencies[ownPackageName]; + } } + appPackage.dependencies = appPackage.dependencies || {}; if (appPackage.dependencies[ownPackageName]) { console.log(` Removing ${cyan(ownPackageName)} from dependencies`); delete appPackage.dependencies[ownPackageName]; } - Object.keys(ownPackage.dependencies).forEach(key => { // For some reason optionalDependencies end up in dependencies after install if (ownPackage.optionalDependencies[key]) { return; } - console.log(` Adding ${cyan(key)} to devDependencies`); - appPackage.devDependencies[key] = ownPackage.dependencies[key]; + console.log(` Adding ${cyan(key)} to dependencies`); + appPackage.dependencies[key] = ownPackage.dependencies[key]; + }); + // Sort the deps + const unsortedDependencies = appPackage.dependencies; + appPackage.dependencies = {}; + Object.keys(unsortedDependencies).sort().forEach(key => { + appPackage.dependencies[key] = unsortedDependencies[key]; }); console.log(); + console.log(cyan('Updating the scripts')); delete appPackage.scripts['eject']; Object.keys(appPackage.scripts).forEach(key => { Object.keys(ownPackage.bin).forEach(binKey => { const regex = new RegExp(binKey + ' (\\w+)', 'g'); + if (!regex.test(appPackage.scripts[key])) { + return; + } appPackage.scripts[key] = appPackage.scripts[key].replace( regex, 'node scripts/$1.js' ); console.log( - ` Replacing ${cyan(`"${binKey} ${key}"`)} with ${cyan(`"node scripts/${key}.js"`)}` + ` Replacing ${cyan(`"${binKey} ${key}"`)} with ${cyan( + `"node scripts/${key}.js"` + )}` ); }); }); @@ -217,11 +230,26 @@ inquirer } if (fs.existsSync(paths.yarnLockFile)) { - console.log(cyan('Running yarn...')); - spawnSync('yarnpkg', [], { stdio: 'inherit' }); + // TODO: this is disabled for three reasons. + // + // 1. It produces garbage warnings on Windows on some systems: + // https://github.com/facebookincubator/create-react-app/issues/2030 + // + // 2. For the above reason, it breaks Windows CI: + // https://github.com/facebookincubator/create-react-app/issues/2624 + // + // 3. It is wrong anyway: re-running yarn will respect the lockfile + // rather than package.json we just updated. Instead we should have + // updated the lockfile. So we might as well not do it while it's broken. + // https://github.com/facebookincubator/create-react-app/issues/2627 + // + // console.log(cyan('Running yarn...')); + // spawnSync('yarnpkg', [], { stdio: 'inherit' }); } else { console.log(cyan('Running npm install...')); - spawnSync('npm', ['install'], { stdio: 'inherit' }); + spawnSync('npm', ['install', '--loglevel', 'error'], { + stdio: 'inherit', + }); } console.log(green('Ejected successfully!')); console.log(); diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index de8ab085e..d7fc56652 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -28,18 +28,14 @@ module.exports = function( originalDirectory, template ) { - const ownPackageName = require(path.join( - __dirname, - '..', - 'package.json' - )).name; + const ownPackageName = require(path.join(__dirname, '..', 'package.json')) + .name; const ownPath = path.join(appPath, 'node_modules', ownPackageName); const appPackage = require(path.join(appPath, 'package.json')); const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock')); // Copy over some of the devDependencies appPackage.dependencies = appPackage.dependencies || {}; - appPackage.devDependencies = appPackage.devDependencies || {}; // Setup the script rules appPackage.scripts = { @@ -212,6 +208,8 @@ module.exports = function( function isReactInstalled(appPackage) { const dependencies = appPackage.dependencies || {}; - return typeof dependencies.react !== 'undefined' && - typeof dependencies['react-dom'] !== 'undefined'; + return ( + typeof dependencies.react !== 'undefined' && + typeof dependencies['react-dom'] !== 'undefined' + ); } diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index a451228df..b86943b4d 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -10,6 +10,10 @@ // @remove-on-eject-end 'use strict'; +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'development'; +process.env.NODE_ENV = 'development'; + // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. @@ -17,8 +21,6 @@ process.on('unhandledRejection', err => { throw err; }); -process.env.NODE_ENV = 'development'; - // Ensure environment variables are read. require('../config/env'); diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index ef333e6c0..e9adb48f0 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -10,6 +10,8 @@ // @remove-on-eject-end 'use strict'; +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'test'; process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 019767d7e..559f96f45 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -27,7 +27,17 @@ module.exports = (resolve, rootDir) => { collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'], setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], + moduleFileExtensions: [ + 'web.ts', + 'ts', + 'web.tsx', + 'tsx', + 'web.js', + 'js', + 'web.jsx', + 'jsx', + 'json', + ], testMatch: [ '