react-tree-walker, detect ports

Author: birkir

internal/development/hotClientServer.js

@@ -5,7 +5,7 @@ import ListenerManager from './listenerManager';
 import { log } from '../utils';
 
 class HotClientServer {
-  constructor(compiler) {
+  constructor(port, compiler) {
     const app = express();
 
     const httpPathRegex = /^https?:\/\/(.*):([\d]{1,5})/i;
@@ -16,9 +16,6 @@ class HotClientServer {
       );
     }
 
-    // eslint-disable-next-line no-unused-vars
-    const [_, host, port] = httpPathRegex.exec(httpPath);
-
     this.webpackDevMiddleware = createWebpackMiddleware(compiler, {
       quiet: true,
       noInfo: true,

internal/development/hotDevelopment.js

@@ -7,6 +7,7 @@ import HotClientServer from './hotClientServer';
 import createVendorDLL from './createVendorDLL';
 import webpackConfigFactory from '../webpack/configFactory';
 import config from '../../config';
+import values from '../../config/values';
 
 const usesDevVendorDLL = bundleConfig =>
   bundleConfig.devVendorDLL != null && bundleConfig.devVendorDLL.enabled;
@@ -63,10 +64,17 @@ const initializeBundle = (name, bundleConfig) => {
 };
 
 class HotDevelopment {
-  constructor() {
+  constructor(port, clientPort) {
     this.hotClientServer = null;
     this.hotNodeServers = [];
 
+    // Update devServerPort to absolute port
+    // TODO: Refactor HotXServer's and their webpack config to
+    // use passed down props internally.
+    values.clientDevServerPort = clientPort;
+    process.env.PORT = port;
+    process.env.CLIENT_DEV_PORT = clientPort;
+
     const clientBundle = initializeBundle('client', config('bundles.client'));
 
     const nodeBundles = [
@@ -94,7 +102,7 @@ class HotDevelopment {
                 resolve(compiler);
               }
             });
-            this.hotClientServer = new HotClientServer(compiler);
+            this.hotClientServer = new HotClientServer(clientPort, compiler);
           }),
         vendorDLLsFailed,
       )
@@ -103,7 +111,7 @@ class HotDevelopment {
         this.hotNodeServers = nodeBundles.map(
           ({ name, createCompiler }) =>
             // $FlowFixMe
-            new HotNodeServer(name, createCompiler(), clientCompiler),
+            new HotNodeServer(port, name, createCompiler(), clientCompiler),
         );
       });
   }

internal/development/hotNodeServer.js

@@ -4,7 +4,7 @@ import { spawn } from 'child_process';
 import { log } from '../utils';
 
 class HotNodeServer {
-  constructor(name, compiler, clientCompiler) {
+  constructor(port, name, compiler, clientCompiler) {
     const compiledEntryFile = path.resolve(
       appRootDir.get(),
       compiler.options.output.path,
@@ -22,7 +22,9 @@ class HotNodeServer {
         });
       }
 
-      const newServer = spawn('node', [compiledEntryFile, '--color']);
+      // Start on correct port
+      const env = Object.assign(process.env, { PORT: port });
+      const newServer = spawn('node', [compiledEntryFile, '--color', { env }]);
 
       log({
         title: name,

internal/development/index.js

@@ -1,21 +1,14 @@
 import http from 'http';
 import openBrowser from 'react-dev-utils/openBrowser';
+import { choosePort } from 'react-dev-utils/WebpackDevServerUtils';
+import detect from 'detect-port-alt';
 import chokidar from 'chokidar';
 import { resolve as pathResolve } from 'path';
 import appRootDir from 'app-root-dir';
-import config from '../../config/values';
+import config from '../../config';
 import { log } from '../utils';
 
-let HotDevelopment = require('./hotDevelopment').default;
-let devServer = new HotDevelopment();
-
-// Any changes to our webpack bundleConfigs should restart the development devServer.
-const watcher = chokidar.watch([
-  pathResolve(appRootDir.get(), 'internal'),
-  pathResolve(appRootDir.get(), 'config'),
-]);
-
-// Wait until specific endpoint becomes responsive, then fire callback.
+const host = config('host');
 const onResponsive = (hostname, port, cb) =>
   setTimeout(
     () =>
@@ -25,42 +18,63 @@ const onResponsive = (hostname, port, cb) =>
     1000,
   );
 
-// Get host and port
-const host = config('host');
-const port = config('port');
+// Prompt the user to select port if it's already taken.
+// Resolves with newly selected port or null if cancelled.
+choosePort(host, config('port'))
+  .then(port =>
+    detect(config('clientDevServerPort')).then(clientPort => [
+      port,
+      clientPort,
+    ]),
+  )
+  .then(([port, clientPort]) => {
+    if (!port || !clientPort) {
+      console.error('User cancelled');
+      return;
+    }
 
-watcher.on('ready', () => {
-  watcher.on('change', () => {
-    log({
-      title: 'webpack',
-      level: 'warn',
-      message:
-        'Project build configuration has changed. Restarting the development devServer...',
-    });
-    devServer.dispose().then(() => {
-      // Make sure our new webpack bundleConfigs aren't in the module cache.
-      Object.keys(require.cache).forEach(modulePath => {
-        if (modulePath.indexOf('config') !== -1) {
-          delete require.cache[modulePath];
-        } else if (modulePath.indexOf('internal') !== -1) {
-          delete require.cache[modulePath];
-        }
-      });
+    let HotDevelopment = require('./hotDevelopment').default;
+    let devServer = new HotDevelopment(port, clientPort);
 
-      // Re-require the development devServer so that all new configs are used.
-      HotDevelopment = require('./hotDevelopment').default;
+    // Any changes to our webpack bundleConfigs should restart the development devServer.
+    const watcher = chokidar.watch([
+      pathResolve(appRootDir.get(), 'internal'),
+      pathResolve(appRootDir.get(), 'config'),
+    ]);
 
-      // Create a new development devServer.
-      devServer = new HotDevelopment();
-    });
-  });
+    watcher.on('ready', () => {
+      watcher.on('change', () => {
+        log({
+          title: 'webpack',
+          level: 'warn',
+          message:
+            'Project build configuration has changed. Restarting the development devServer...',
+        });
+        devServer.dispose().then(() => {
+          // Make sure our new webpack bundleConfigs aren't in the module cache.
+          Object.keys(require.cache).forEach(modulePath => {
+            if (modulePath.indexOf('config') !== -1) {
+              delete require.cache[modulePath];
+            } else if (modulePath.indexOf('internal') !== -1) {
+              delete require.cache[modulePath];
+            }
+          });
+
+          // Re-require the development devServer so that all new configs are used.
+          HotDevelopment = require('./hotDevelopment').default;
+
+          // Create a new development devServer.
+          devServer = new HotDevelopment(port, clientPort);
+        });
+      });
 
-  // Wait until devServer is started.
-  onResponsive(host, port, () => openBrowser(`http://${host}:${port}`));
-});
+      // Wait until devServer is started to open browser
+      onResponsive(host, port, () => openBrowser(`http://${host}:${port}`));
+    });
 
-// If we receive a kill cmd then we will first try to dispose our listeners.
-process.on(
-  'SIGTERM',
-  () => devServer && devServer.dispose().then(() => process.exit(0)),
-);
+    // If we receive a kill cmd then we will first try to dispose our listeners.
+    process.on(
+      'SIGTERM',
+      () => devServer && devServer.dispose().then(() => process.exit(0)),
+    );
+  });