From d209e4c5e6d9a25531dd3699aa93c4a9e300b393 Mon Sep 17 00:00:00 2001
From: William Monk <will@williammonk.co.uk>
Date: Tue, 7 Mar 2017 20:06:57 +0000
Subject: [PATCH 1/5] Stop watch process when process.stdin ends
---
packages/react-scripts/scripts/start.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 8df052d3bbb..9f7a67445fa 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -47,6 +47,11 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
+process.stdin.on('end', function() {
+ process.exit(0);
+});
+process.stdin.resume();
+
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';
From 668b93e638c4a1698bbd496227b48692a3945e09 Mon Sep 17 00:00:00 2001
From: William Monk <will@williammonk.co.uk>
Date: Tue, 7 Mar 2017 20:56:01 +0000
Subject: [PATCH 2/5] Stop test process when process.stdin ends
---
packages/react-scripts/scripts/test.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js
index b30113fe662..1dbdbf7597e 100644
--- a/packages/react-scripts/scripts/test.js
+++ b/packages/react-scripts/scripts/test.js
@@ -48,3 +48,8 @@ argv.push(
);
// @remove-on-eject-end
jest.run(argv);
+
+process.stdin.on('end', function() {
+ process.exit(0);
+});
+process.stdin.resume();
From 4053774cbe0a72512642366468f5eecd05899baf Mon Sep 17 00:00:00 2001
From: William Monk <will@williammonk.co.uk>
Date: Wed, 8 Mar 2017 08:24:34 +0000
Subject: [PATCH 3/5] Add process.stdin On End Explanation
---
packages/react-scripts/scripts/start.js | 5 +++++
packages/react-scripts/scripts/test.js | 17 ++++++++++++-----
2 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 9f7a67445fa..725e55d8fe7 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -47,6 +47,11 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
+// 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);
});
diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js
index 1dbdbf7597e..88aac07f0a3 100644
--- a/packages/react-scripts/scripts/test.js
+++ b/packages/react-scripts/scripts/test.js
@@ -27,8 +27,20 @@ const jest = require('jest');
const argv = process.argv.slice(2);
// Watch unless on CI or in coverage mode
+// Exit process when stdin ends only when watch mode enabled
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
argv.push('--watch');
+
+ // 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();
}
// @remove-on-eject-begin
@@ -48,8 +60,3 @@ argv.push(
);
// @remove-on-eject-end
jest.run(argv);
-
-process.stdin.on('end', function() {
- process.exit(0);
-});
-process.stdin.resume();
From a01f7549b1669e2778871f3200596fe8a73fb1ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Bisinger?=
<stephane.bisinger@protonmail.com>
Date: Wed, 25 Oct 2017 10:08:18 +0200
Subject: [PATCH 4/5] Create helper to setup exit handlers
---
packages/react-dev-utils/README.md | 13 +++++++++++
.../react-dev-utils/addProcessExitHandlers.js | 22 +++++++++++++++++++
packages/react-dev-utils/package.json | 1 +
packages/react-scripts/scripts/start.js | 11 ++--------
packages/react-scripts/scripts/test.js | 12 ++--------
5 files changed, 40 insertions(+), 19 deletions(-)
create mode 100644 packages/react-dev-utils/addProcessExitHandlers.js
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 034790c2288..1010f1ac470 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -105,6 +105,19 @@ module.exports = {
}
```
+#### `addProcessExitHandlers(): void`
+
+Exits the process when stdin is closed by an external program.<br>
+This is useful when the dev server is started by some other tool (i.e.: Phoenix)
+which then uses the standard Unix convention of closing the standard input to
+signal the end of the program.
+
+```js
+var addProcessExitHandlers = require('react-dev-utils/addProcessExitHandlers');
+
+addProcessExitHandlers();
+```
+
#### `checkRequiredFiles(files: Array<string>): boolean`
Makes sure that all passed files exist.<br>
diff --git a/packages/react-dev-utils/addProcessExitHandlers.js b/packages/react-dev-utils/addProcessExitHandlers.js
new file mode 100644
index 00000000000..bc41d517015
--- /dev/null
+++ b/packages/react-dev-utils/addProcessExitHandlers.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+function addProcessExitHandlers() {
+ // 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();
+}
+
+module.exports = addProcessExitHandlers;
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index db7114a261a..6e5614dbcb0 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -11,6 +11,7 @@
"node": ">=6"
},
"files": [
+ "addProcessExitHandlers.js",
"checkRequiredFiles.js",
"clearConsole.js",
"crashOverlay.js",
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 725e55d8fe7..e552ba94fc0 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -38,6 +38,7 @@ const openBrowser = require('react-dev-utils/openBrowser');
const paths = require('../config/paths');
const config = require('../config/webpack.config.dev');
const createDevServerConfig = require('../config/webpackDevServer.config');
+const addProcessExitHandlers = require('react-dev-utils/addProcessExitHandlers');
const useYarn = fs.existsSync(paths.yarnLockFile);
const isInteractive = process.stdout.isTTY;
@@ -47,15 +48,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
process.exit(1);
}
-// 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();
+addProcessExitHandlers();
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js
index 88aac07f0a3..ec132b2d3bc 100644
--- a/packages/react-scripts/scripts/test.js
+++ b/packages/react-scripts/scripts/test.js
@@ -23,6 +23,7 @@ process.on('unhandledRejection', err => {
// Ensure environment variables are read.
require('../config/env');
+const addProcessExitHandlers = require('react-dev-utils/addProcessExitHandlers');
const jest = require('jest');
const argv = process.argv.slice(2);
@@ -31,16 +32,7 @@ const argv = process.argv.slice(2);
if (!process.env.CI && argv.indexOf('--coverage') < 0) {
argv.push('--watch');
- // 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();
+ addProcessExitHandlers();
}
// @remove-on-eject-begin
From a078545952a27d58ae96f4dff4ea504d9556c326 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20Bisinger?=
<stephane.bisinger@protonmail.com>
Date: Sat, 4 Nov 2017 13:44:17 +0100
Subject: [PATCH 5/5] 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.
---
.../react-dev-utils/addProcessExitHandlers.js | 16 +++++++++++-----
.../react-scripts/config/webpack.config.prod.js | 2 +-
packages/react-scripts/scripts/test.js | 2 +-
packages/react-scripts/template/README.md | 12 +++++++++++-
4 files changed, 24 insertions(+), 8 deletions(-)
diff --git a/packages/react-dev-utils/addProcessExitHandlers.js b/packages/react-dev-utils/addProcessExitHandlers.js
index bc41d517015..fac1f3bb40f 100644
--- a/packages/react-dev-utils/addProcessExitHandlers.js
+++ b/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;
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index c32eb0f08a7..457a9672892 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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
diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js
index ec132b2d3bc..f0b38f5f641 100644
--- a/packages/react-scripts/scripts/test.js
+++ b/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
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index b8c0b74df39..027d6078c56 100644
--- a/packages/react-scripts/template/README.md
+++ b/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)