diff --git a/packages/react-dev-utils/getProcessForPort.js b/packages/react-dev-utils/getProcessForPort.js index 2d9e531c381..428dc62cfda 100644 --- a/packages/react-dev-utils/getProcessForPort.js +++ b/packages/react-dev-utils/getProcessForPort.js @@ -27,10 +27,9 @@ function isProcessAReactApp(processCommand) { } function getProcessIdOnPort(port) { - return execSync( - 'lsof -i:' + port + ' -P -t -sTCP:LISTEN', - execOptions - ).trim(); + return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions) + .split('\n')[0] + .trim(); } function getPackageNameInDirectory(directory) { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 86961ff905a..453697d6d78 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -33,7 +33,7 @@ "connect-history-api-fallback": "1.3.0", "cross-spawn": "4.0.2", "css-loader": "0.28.0", - "detect-port": "1.1.1", + "@timer/detect-port": "1.1.2", "dotenv": "2.0.0", "eslint": "3.16.1", "eslint-config-react-app": "^0.6.1", diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 45c83eb83c7..465474f2ddc 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -24,7 +24,7 @@ require('../config/env'); const fs = require('fs'); const chalk = require('chalk'); -const detect = require('detect-port'); +const detect = require('@timer/detect-port'); const WebpackDevServer = require('webpack-dev-server'); const clearConsole = require('react-dev-utils/clearConsole'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); @@ -48,10 +48,10 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { // Tools like Cloud9 rely on this. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; +const HOST = process.env.HOST || '0.0.0.0'; function run(port) { const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; - const host = process.env.HOST || '0.0.0.0'; // Create a webpack compiler that is configured with custom messages. const compiler = createWebpackCompiler( @@ -63,7 +63,7 @@ function run(port) { console.log(); console.log('The app is running at:'); console.log(); - console.log(` ${chalk.cyan(`${protocol}://${host}:${port}/`)}`); + console.log(` ${chalk.cyan(`${protocol}://${HOST}:${port}/`)}`); console.log(); console.log('Note that the development build is not optimized.'); console.log( @@ -80,7 +80,7 @@ function run(port) { addWebpackMiddleware(devServer) .then(() => { // Launch WebpackDevServer. - devServer.listen(port, host, err => { + devServer.listen(port, HOST, err => { if (err) { return console.log(err); } @@ -91,7 +91,7 @@ function run(port) { console.log(chalk.cyan('Starting the development server...')); console.log(); - openBrowser(`${protocol}://${host}:${port}/`); + openBrowser(`${protocol}://${HOST}:${port}/`); }); }) .catch(e => { @@ -105,7 +105,7 @@ function run(port) { // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `detect()` Promise resolves to the next free port. -detect(DEFAULT_PORT).then(port => { +detect(DEFAULT_PORT, HOST).then(port => { if (port === DEFAULT_PORT) { run(port); return;