feat: improve output for IPv4 and IPv6 (#3092)

webpack · Mar 22, 2021 · f362665 · f362665
1 parent 2496110
commit f362665
Show file tree

Hide file tree

Showing 8 changed files with 2,104 additions and 358 deletions.
diff --git a/lib/Server.js b/lib/Server.js
@@ -5,7 +5,7 @@ const path = require('path');
 const url = require('url');
 const http = require('http');
 const https = require('https');
-const ip = require('ip');
+const ipaddr = require('ipaddr.js');
 const internalIp = require('internal-ip');
 const killable = require('killable');
 const chokidar = require('chokidar');
@@ -592,33 +592,76 @@ class Server {
     const prettyPrintUrl = (newHostname) =>
       url.format({ protocol, hostname: newHostname, port, pathname: '/' });
 
-    let prettyHostname;
-    let lanUrlForTerminal;
+    let localhostForTerminal;
+    let networkUrlForTerminalIPv4;
+    let networkUrlForTerminalIPv6;
 
-    if (hostname === '0.0.0.0' || ip.isLoopback(hostname)) {
-      prettyHostname = 'localhost';
+    const parsedIP = ipaddr.parse(hostname);
 
-      const localIP =
-        hostname === '::' ? internalIp.v6.sync() : internalIp.v4.sync();
+    if (parsedIP.range() === 'unspecified') {
+      localhostForTerminal = prettyPrintUrl('localhost');
 
-      if (localIP) {
-        lanUrlForTerminal = prettyPrintUrl(localIP);
+      const networkIPv4 = internalIp.v4.sync();
+
+      if (networkIPv4) {
+        networkUrlForTerminalIPv4 = prettyPrintUrl(networkIPv4);
+      }
+
+      if (hostname === '::') {
+        const networkIPv6 = internalIp.v6.sync();
+
+        if (networkIPv6) {
+          networkUrlForTerminalIPv6 = prettyPrintUrl(networkIPv6);
+        }
       }
     } else {
-      prettyHostname = hostname;
-    }
+      if (parsedIP.kind() === 'ipv6') {
+        if (parsedIP.isIPv4MappedAddress()) {
+          networkUrlForTerminalIPv4 = prettyPrintUrl(
+            parsedIP.toIPv4Address().toString()
+          );
+        }
+      } else {
+        networkUrlForTerminalIPv4 = prettyPrintUrl(hostname);
+      }
 
-    const localUrlForTerminal = prettyPrintUrl(prettyHostname);
+      if (parsedIP.kind() === 'ipv6') {
+        networkUrlForTerminalIPv6 = prettyPrintUrl(hostname);
+      }
+    }
 
-    if (lanUrlForTerminal) {
+    if (localhostForTerminal) {
       this.logger.info('Project is running at:');
-      this.logger.info(`Local: ${colors.info(useColor, localUrlForTerminal)}`);
-      this.logger.info(
-        `On Your Network: ${colors.info(useColor, lanUrlForTerminal)}`
-      );
+      this.logger.info(`Local: ${colors.info(useColor, localhostForTerminal)}`);
+
+      const networkUrlsForTerminal = []
+        .concat(
+          networkUrlForTerminalIPv4
+            ? [`${colors.info(useColor, networkUrlForTerminalIPv4)} (IPv4)`]
+            : []
+        )
+        .concat(
+          networkUrlForTerminalIPv6
+            ? [`${colors.info(useColor, networkUrlForTerminalIPv6)} (IPv6)`]
+            : []
+        );
+
+      this.logger.info(`On Your Network: ${networkUrlsForTerminal.join(', ')}`);
     } else {
+      const networkUrlsForTerminal = []
+        .concat(
+          networkUrlForTerminalIPv4
+            ? [`${colors.info(useColor, networkUrlForTerminalIPv4)} (IPv4)`]
+            : []
+        )
+        .concat(
+          networkUrlForTerminalIPv6
+            ? [`${colors.info(useColor, networkUrlForTerminalIPv6)} (IPv6)`]
+            : []
+        );
+
       this.logger.info(
-        `Project is running at ${colors.info(useColor, localUrlForTerminal)}`
+        `Project is running at ${networkUrlsForTerminal.join(', ')}`
       );
     }
 
@@ -663,7 +706,12 @@ class Server {
     }
 
     if (this.options.open || this.options.openPage) {
-      runOpen(localUrlForTerminal, this.options, this.logger);
+      const uri =
+        localhostForTerminal ||
+        networkUrlForTerminalIPv4 ||
+        networkUrlForTerminalIPv6;
+
+      runOpen(uri, this.options, this.logger);
     }
   }
 
@@ -804,6 +852,7 @@ class Server {
       false,
       true
     ).hostname;
+
     // always allow requests with explicit IPv4 or IPv6-address.
     // A note on IPv6 addresses:
     // hostHeader will always contain the brackets denoting
@@ -813,8 +862,8 @@ class Server {
     // always allow localhost host, for convenience (hostname === 'localhost')
     // allow hostname of listening address  (hostname === this.hostname)
     const isValidHostname =
-      ip.isV4Format(hostname) ||
-      ip.isV6Format(hostname) ||
+      ipaddr.IPv4.isValid(hostname) ||
+      ipaddr.IPv6.isValid(hostname) ||
       hostname === 'localhost' ||
       hostname === this.hostname;