feat: use server address and fallback to 0.0.0.0 (location.hostname) in createDomain (#2869)

Author: ylemkimon

lib/utils/createDomain.js

@@ -5,9 +5,16 @@ const ip = require('internal-ip');
 
 function createDomain(options, server) {
   const protocol = options.https ? 'https' : 'http';
-  const hostname = options.useLocalIp
-    ? ip.v4.sync() || 'localhost'
-    : options.host || 'localhost';
+  // use location hostname and port by default in createSocketUrl
+  // ipv6 detection is not required as 0.0.0.0 is just used as a placeholder
+  let hostname;
+  if (options.useLocalIp) {
+    hostname = ip.v4.sync() || '0.0.0.0';
+  } else if (server) {
+    hostname = server.address().address;
+  } else {
+    hostname = '0.0.0.0';
+  }
   const port = server ? server.address().port : 0;
   // use explicitly defined public url
   // (prefix with protocol if not explicitly given)

test/cli/__snapshots__/cli.test.js.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CLI --hot webpack 4 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:8080/
+"<i> [webpack-dev-server] Project is running at http://127.0.0.1:8080/
 <i> [webpack-dev-middleware] Hash: X
 <i> Version: webpack x.x.x Time: Xms
 <i> Built at: Thu Jan 01 1970 <CLR=BOLD>00:00:00</CLR> GMT
 <i>   Asset     Size  Chunks             Chunk Names
 <i> main.js  X KiB    main  [emitted]  main
 <i> Entrypoint main = main.js
-<i> [0] multi Xdir/client/default?http://localhost (webpack)/hot/dev-server.js ./foo.js X bytes {main} [built]
-<i> [../../../client/default/index.js?http://localhost] Xdir/client/default?http://localhost X KiB {main} [built]
+<i> [0] multi Xdir/client/default?http://0.0.0.0 (webpack)/hot/dev-server.js ./foo.js X bytes {main} [built]
+<i> [../../../client/default/index.js?http://0.0.0.0] Xdir/client/default?http://0.0.0.0 X KiB {main} [built]
 <i> [../../../client/default/overlay.js] Xdir/client/default/overlay.js X KiB {main} [built]
 <i> [../../../client/default/socket.js] Xdir/client/default/socket.js X KiB {main} [built]
 <i> [../../../client/default/utils/createSocketUrl.js] Xdir/client/default/utils/createSocketUrl.js X KiB {main} [built]
@@ -28,7 +28,7 @@ exports[`CLI --hot webpack 4 1`] = `
 `;
 
 exports[`CLI --hot webpack 5 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:8080/
+"<i> [webpack-dev-server] Project is running at http://127.0.0.1:8080/
 <i> [webpack-dev-middleware] asset main.js X KiB [emitted] (name: main)
 <i> runtime modules X KiB 10 modules
 <i> cacheable modules X KiB
@@ -46,16 +46,16 @@ exports[`CLI --hot webpack 5 1`] = `
 `;
 
 exports[`CLI --no-hot webpack 4 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:8080/
+"<i> [webpack-dev-server] Project is running at http://127.0.0.1:8080/
 <i> [webpack-dev-middleware] Hash: X
 <i> Version: webpack x.x.x Time: Xms
 <i> Built at: Thu Jan 01 1970 <CLR=BOLD>00:00:00</CLR> GMT
 <i>   Asset     Size  Chunks             Chunk Names
 <i> main.js  X KiB    main  [emitted]  main
 <i> Entrypoint main = main.js
-<i> [0] multi Xdir/client/default?http://localhost ./foo.js X bytes {main} [built]
+<i> [0] multi Xdir/client/default?http://0.0.0.0 ./foo.js X bytes {main} [built]
 <i> [../../../client/clients/WebsocketClient.js] Xdir/client/clients/WebsocketClient.js X KiB {main} [built]
-<i> [../../../client/default/index.js?http://localhost] Xdir/client/default?http://localhost X KiB {main} [built]
+<i> [../../../client/default/index.js?http://0.0.0.0] Xdir/client/default?http://0.0.0.0 X KiB {main} [built]
 <i> [../../../client/default/overlay.js] Xdir/client/default/overlay.js X KiB {main} [built]
 <i> [../../../client/default/socket.js] Xdir/client/default/socket.js X KiB {main} [built]
 <i> [../../../client/default/utils/createSocketUrl.js] Xdir/client/default/utils/createSocketUrl.js X KiB {main} [built]
@@ -73,7 +73,7 @@ exports[`CLI --no-hot webpack 4 1`] = `
 `;
 
 exports[`CLI --no-hot webpack 5 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:8080/
+"<i> [webpack-dev-server] Project is running at http://127.0.0.1:8080/
 <i> [webpack-dev-middleware] asset main.js X KiB [emitted] (name: main)
 <i> runtime modules X bytes 3 modules
 <i> cacheable modules X KiB

test/cli/cli.test.js

@@ -121,7 +121,9 @@ runCLITest('CLI', () => {
   it('unspecified port', (done) => {
     testBin('')
       .then((output) => {
-        expect(/http:\/\/localhost:[0-9]+/.test(output.stderr)).toEqual(true);
+        expect(/http:\/\/127\.0\.0\.1:[0-9]+/.test(output.stderr)).toEqual(
+          true
+        );
         done();
       })
       .catch(done);

test/server/__snapshots__/Server.test.js.snap

@@ -6,7 +6,7 @@ Array [
     "client",
     "default",
     "index.js?http:",
-    "localhost",
+    "0.0.0.0",
   ],
   Array [
     "node_modules",
@@ -26,7 +26,7 @@ Array [
     "client",
     "default",
     "index.js?http:",
-    "localhost",
+    "0.0.0.0",
   ],
   Array [
     "node_modules",

test/server/open-option.test.js

@@ -27,7 +27,7 @@ describe('open option', () => {
       server.close(() => {
         expect(open.mock.calls[0]).toMatchInlineSnapshot(`
           Array [
-            "http://localhost:8117/",
+            "http://127.0.0.1:8117/",
             Object {
               "wait": false,
             },

test/server/utils/createDomain.test.js

@@ -26,14 +26,18 @@ describe('createDomain', () => {
         host: 'localhost',
         port: port1,
       },
-      expected: `http://localhost:${port1}`,
+      expected: [
+        `http://localhost:${port1}`,
+        `http://127.0.0.1:${port1}`,
+        `http://[::1]:${port1}`,
+      ],
     },
     {
       name: 'no host option',
       options: {
         port: port1,
       },
-      expected: `http://localhost:${port1}`,
+      expected: [`http://0.0.0.0:${port1}`, `http://[::]:${port1}`],
     },
     {
       name: 'https',
@@ -42,7 +46,11 @@ describe('createDomain', () => {
         port: port1,
         https: true,
       },
-      expected: `https://localhost:${port1}`,
+      expected: [
+        `https://localhost:${port1}`,
+        `https://127.0.0.1:${port1}`,
+        `https://[::1]:${port1}`,
+      ],
       timeout: 60000,
     },
     {
@@ -52,7 +60,7 @@ describe('createDomain', () => {
         port: port1,
         public: 'myhost.test',
       },
-      expected: 'http://myhost.test',
+      expected: ['http://myhost.test'],
     },
     {
       name: 'override with public (port)',
@@ -61,7 +69,7 @@ describe('createDomain', () => {
         port: port1,
         public: `myhost.test:${port2}`,
       },
-      expected: `http://myhost.test:${port2}`,
+      expected: [`http://myhost.test:${port2}`],
     },
     {
       name: 'override with public (protocol)',
@@ -70,7 +78,7 @@ describe('createDomain', () => {
         port: port1,
         public: 'https://myhost.test',
       },
-      expected: 'https://myhost.test',
+      expected: ['https://myhost.test'],
     },
     {
       name: 'override with public (protocol + port)',
@@ -79,15 +87,20 @@ describe('createDomain', () => {
         port: port1,
         public: `https://myhost.test:${port2}`,
       },
-      expected: `https://myhost.test:${port2}`,
+      expected: [`https://myhost.test:${port2}`],
     },
     {
       name: 'localIp',
       options: {
         useLocalIp: true,
         port: port1,
       },
-      expected: `http://${internalIp.v4.sync() || 'localhost'}:${port1}`,
+      expected: [
+        `http://${internalIp.v4.sync()}:${port1}`,
+        `https://localhost:${port1}`,
+        `https://127.0.0.1:${port1}`,
+        `https://[::1]:${port1}`,
+      ],
     },
   ];
 
@@ -105,7 +118,7 @@ describe('createDomain', () => {
 
         const domain = createDomain(options, server.listeningApp);
 
-        if (domain !== expected) {
+        if (!expected.includes(domain)) {
           done(`generated domain ${domain} doesn't match expected ${expected}`);
         } else {
           done();