Use a flag to watch stdin

The kitchensink e2e tests were failing because in those tests the
`npm start` command is sent to the background. The shell will then halt
any background job that tries to read from the standard input, and since
we are watching standard input to determine if we should exit or not the
dev server would immediately exit.

The workaround is to provide run the dev-server as
`npm start </dev/zero &` instead, which provides a different standard
input that will not close immediately. This, alas, doesn't work on
Windows and might change the expected behaviour for some people that are
used to start the dev-server as a background job.

For this reason a --watch-stdin flag has been added to only enable this
behaviour on request for the few applicable use cases.

A note has also been added in the Troubleshooting section to help any
final user that might start the dev-server as a background job.

Author: Kjir

packages/react-dev-utils/addProcessExitHandlers.js

@@ -7,16 +7,22 @@
 
 'use strict';
 
-function addProcessExitHandlers() {
+function addProcessExitHandlers(argv) {
   // Issue: https://github.com/facebookincubator/create-react-app/issues/1753
   // The below lines are added to make sure that this process is
   // exited when stdin is ended. The consequence of not doing this means
   // that all watch processes will stay running despite the process that spawned
   // them being closed.
-  process.stdin.on('end', function() {
-    process.exit(0);
-  });
-  process.stdin.resume();
+  argv = argv || process.argv;
+  const watchStdinIndex = argv.indexOf('--watch-stdin');
+  const shouldWatchStdin = watchStdinIndex > -1;
+  if (shouldWatchStdin) {
+    argv.splice(watchStdinIndex, 1);
+    process.stdin.on('end', function() {
+      process.exit(0);
+    });
+    process.stdin.resume();
+  }
 }
 
 module.exports = addProcessExitHandlers;

packages/react-scripts/config/webpack.config.prod.js

@@ -301,7 +301,7 @@ module.exports = {
       },
       mangle: {
         safari10: true,
-      },        
+      },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default

packages/react-scripts/scripts/test.js

@@ -32,7 +32,7 @@ const argv = process.argv.slice(2);
 if (!process.env.CI && argv.indexOf('--coverage') < 0) {
   argv.push('--watch');
 
-  addProcessExitHandlers();
+  addProcessExitHandlers(argv);
 }
 
 // @remove-on-eject-begin

packages/react-scripts/template/README.md

@@ -2218,12 +2218,22 @@ To resolve this:
 1. Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
   * Note: Create React App can consume both CommonJS and ES modules. For Node.js compatibility, it is recommended that the main entry point is CommonJS. However, they can optionally provide an ES module entry point with the `module` field in `package.json`. Note that **even if a library provides an ES Modules version, it should still precompile other ES6 features to ES5 if it intends to support older browsers**.
 
-2. Fork the package and publish a corrected version yourself. 
+2. Fork the package and publish a corrected version yourself.
 
 3. If the dependency is small enough, copy it to your `src/` folder and treat it as application code.
 
 In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds.
 
+### Phoenix doesn't kill the webpack-dev-server
+
+When using create-react-app in a Phoenix application, the webpack-dev-server is not closed automatically if it's configured as a watcher. This is because Phoenix expects the watchers to close when the standart input is closed.
+
+To watch for standart input you can pass the `--watch-stdin` option:
+
+```
+npm start -- --watch-stdin
+```
+
 ## Something Missing?
 
 If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md)