From 9d570d08e77e8272db0f7edb2779c41fd5fe375a Mon Sep 17 00:00:00 2001
From: Juan Soto <juan@juansoto.me>
Date: Fri, 22 Jul 2016 16:55:14 -0400
Subject: [PATCH 1/2] Use a different port if 3000 is used

---
 bin/react-scripts.js |  0
 package.json         |  1 +
 scripts/start.js     | 37 +++++++++++++++++++++----------------
 3 files changed, 22 insertions(+), 16 deletions(-)
 mode change 100644 => 100755 bin/react-scripts.js

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..ccc9bd1dcd6 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -16,6 +16,9 @@ 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');
+
+portfinder.basePort = 3000;
 
 // TODO: hide this behind a flag and eliminate dead code on eject.
 // This shouldn't be exposed to the user.
@@ -121,7 +124,7 @@ compiler.plugin('done', function (stats) {
   }
 });
 
-function openBrowser() {
+function openBrowser(port) {
   if (process.platform === 'darwin') {
     try {
       // Try our best to reuse existing tab
@@ -130,7 +133,7 @@ function openBrowser() {
       execSync(
         'osascript ' +
         path.resolve(__dirname, './openChrome.applescript') +
-        ' http://localhost:3000/'
+        ' http://localhost:' + port + '/'
       );
       return;
     } catch (err) {
@@ -139,21 +142,23 @@ 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, port) {
+  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(port);
+  });
 });

From ef18083dc20ead01d6f2c82e1b49c8db44458393 Mon Sep 17 00:00:00 2001
From: Juan Soto <juan@juansoto.me>
Date: Fri, 22 Jul 2016 17:26:41 -0400
Subject: [PATCH 2/2] Use global `PORT` variable

---
 scripts/start.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/scripts/start.js b/scripts/start.js
index ccc9bd1dcd6..76ce5440bc5 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -17,8 +17,9 @@ 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 = 3000;
+portfinder.basePort = PORT;
 
 // TODO: hide this behind a flag and eliminate dead code on eject.
 // This shouldn't be exposed to the user.
@@ -80,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;
   }
@@ -124,7 +125,7 @@ compiler.plugin('done', function (stats) {
   }
 });
 
-function openBrowser(port) {
+function openBrowser() {
   if (process.platform === 'darwin') {
     try {
       // Try our best to reuse existing tab
@@ -133,7 +134,7 @@ function openBrowser(port) {
       execSync(
         'osascript ' +
         path.resolve(__dirname, './openChrome.applescript') +
-        ' http://localhost:' + port + '/'
+        ' http://localhost:' + PORT + '/'
       );
       return;
     } catch (err) {
@@ -142,16 +143,18 @@ function openBrowser(port) {
   }
   // Fallback to opn
   // (It will always open new tab)
-  opn('http://localhost:' + port + '/');
+  opn('http://localhost:' + PORT + '/');
 }
 
-portfinder.getPort(function (err, port) {
+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) {
+  }).listen(PORT, 'localhost', function (err, result) {
     if (err) {
       return console.log(err);
     }
@@ -159,6 +162,6 @@ portfinder.getPort(function (err, port) {
     clearConsole();
     console.log(chalk.cyan('Starting the development server...'));
     console.log();
-    openBrowser(port);
+    openBrowser();
   });
 });