diff --git a/bin/react-scripts.js b/bin/react-scripts.js old mode 100644 new mode 100755 diff --git a/package.json b/package.json index aed0d9fb586..c0ac6d9a8b8 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "html-webpack-plugin": "2.22.0", "json-loader": "0.5.4", "opn": "4.0.2", + "portfinder": "^1.0.5", "postcss-loader": "0.9.1", "rimraf": "2.5.3", "style-loader": "0.13.1", diff --git a/scripts/start.js b/scripts/start.js index 2032a526f38..76ce5440bc5 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -16,6 +16,10 @@ var WebpackDevServer = require('webpack-dev-server'); var config = require('../config/webpack.config.dev'); var execSync = require('child_process').execSync; var opn = require('opn'); +var portfinder = require('portfinder'); +var PORT = 3000; + +portfinder.basePort = PORT; // TODO: hide this behind a flag and eliminate dead code on eject. // This shouldn't be exposed to the user. @@ -77,7 +81,7 @@ compiler.plugin('done', function (stats) { if (!hasErrors && !hasWarnings) { console.log(chalk.green('Compiled successfully!')); console.log(); - console.log('The app is running at http://localhost:3000/'); + console.log('The app is running at http://localhost:' + PORT + '/'); console.log(); return; } @@ -130,7 +134,7 @@ function openBrowser() { execSync( 'osascript ' + path.resolve(__dirname, './openChrome.applescript') + - ' http://localhost:3000/' + ' http://localhost:' + PORT + '/' ); return; } catch (err) { @@ -139,21 +143,25 @@ function openBrowser() { } // Fallback to opn // (It will always open new tab) - opn('http://localhost:3000/'); + opn('http://localhost:' + PORT + '/'); } -new WebpackDevServer(compiler, { - historyApiFallback: true, - hot: true, // Note: only CSS is currently hot reloaded - publicPath: config.output.publicPath, - quiet: true -}).listen(3000, 'localhost', function (err, result) { - if (err) { - return console.log(err); - } +portfinder.getPort(function (err, chosenPort) { + PORT = chosenPort; + + new WebpackDevServer(compiler, { + historyApiFallback: true, + hot: true, // Note: only CSS is currently hot reloaded + publicPath: config.output.publicPath, + quiet: true + }).listen(PORT, 'localhost', function (err, result) { + if (err) { + return console.log(err); + } - clearConsole(); - console.log(chalk.cyan('Starting the development server...')); - console.log(); - openBrowser(); + clearConsole(); + console.log(chalk.cyan('Starting the development server...')); + console.log(); + openBrowser(); + }); });