fix(serve): set client port when using default port

Author: Joel Denning

packages/serve/__tests__/mergeOptions.test.ts

@@ -1,20 +1,21 @@
 'use strict';
 
 import mergeOptions from '../src/mergeOptions';
+import { devServerClientLogging } from '../src/types';
 
 describe('mergeOptions', () => {
     it('merges CLI and devServer options correctly', () => {
         const cliOptions = {
             client: {
-                logging: 'verbose',
+                logging: devServerClientLogging.verbose,
             },
             hot: true,
             bonjour: true,
         };
         const devServerOptions = {
             client: {
                 host: 'localhost',
-                logging: 'none',
+                logging: devServerClientLogging.none,
             },
             hot: false,
             liveReload: false,

packages/serve/__tests__/startDevServer.test.ts

@@ -14,7 +14,7 @@ describe('startDevServer', () => {
         DevServer.mockClear();
     });
 
-    it('should start dev server correctly for single compiler', () => {
+    it('should start dev server correctly for single compiler', async () => {
         const config = {
             devServer: {
                 port: 9000,
@@ -24,7 +24,7 @@ describe('startDevServer', () => {
         };
         const compiler = webpack(config);
 
-        const servers = startDevServer(compiler, {
+        const servers = await startDevServer(compiler, {
             host: 'my.host',
             hot: true,
             progress: true,
@@ -43,13 +43,13 @@ describe('startDevServer', () => {
         expect(DevServer.mock.instances[0].listen.mock.calls[0]).toMatchSnapshot();
     });
 
-    it('should set default port and host if not provided', () => {
+    it('should set default port and host if not provided', async () => {
         const config = {
             devServer: {},
         };
         const compiler = webpack(config);
 
-        const servers = startDevServer(compiler, {});
+        const servers = await startDevServer(compiler, {});
 
         expect(servers.length).toEqual(1);
         expect(servers).toEqual(DevServer.mock.instances);
@@ -64,7 +64,7 @@ describe('startDevServer', () => {
         expect(DevServer.mock.instances[0].listen.mock.calls[0]).toMatchSnapshot();
     });
 
-    it('should start dev server correctly for multi compiler with 1 devServer config', () => {
+    it('should start dev server correctly for multi compiler with 1 devServer config', async () => {
         const config = [
             {
                 devServer: {
@@ -77,7 +77,7 @@ describe('startDevServer', () => {
         ];
         const compiler = webpack(config);
 
-        const servers = startDevServer(compiler, {
+        const servers = await startDevServer(compiler, {
             host: 'my.host',
             hot: true,
             progress: true,
@@ -96,7 +96,7 @@ describe('startDevServer', () => {
         expect(DevServer.mock.instances[0].listen.mock.calls[0]).toMatchSnapshot();
     });
 
-    it('should start dev servers correctly for multi compiler with 2 devServer configs', () => {
+    it('should start dev servers correctly for multi compiler with 2 devServer configs', async () => {
         const config = [
             {
                 devServer: {
@@ -113,7 +113,7 @@ describe('startDevServer', () => {
         ];
         const compiler = webpack(config);
 
-        const servers = startDevServer(compiler, {
+        const servers = await startDevServer(compiler, {
             // this progress CLI flag should override progress: false above
             progress: true,
         });
@@ -137,8 +137,8 @@ describe('startDevServer', () => {
         expect(DevServer.mock.instances[1].listen.mock.calls[0]).toMatchSnapshot();
     });
 
-    it('should handle 2 multi compiler devServer configs with conflicting ports', () => {
-        expect(() => {
+    it('should handle 2 multi compiler devServer configs with conflicting ports', async () => {
+        await expect(async () => {
             const config = [
                 {
                     devServer: {
@@ -153,8 +153,8 @@ describe('startDevServer', () => {
             ];
             const compiler = webpack(config);
 
-            startDevServer(compiler, {});
-        }).toThrow(
+            await startDevServer(compiler, {});
+        }).rejects.toThrow(
             'Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config.',
         );
     });

packages/serve/src/startDevServer.ts

@@ -14,15 +14,18 @@ const { logger } = utils;
  *
  * @returns {Object[]} array of resulting servers
  */
-export default function startDevServer(compiler, cliOptions): object[] {
+export default async function startDevServer(compiler, cliOptions): Promise<object[]> {
     let isDevServer4 = false,
         devServerVersion,
-        Server;
+        Server,
+        findPort;
     try {
         // eslint-disable-next-line node/no-extraneous-require
         devServerVersion = require('webpack-dev-server/package.json').version;
         // eslint-disable-next-line node/no-extraneous-require
         Server = require('webpack-dev-server/lib/Server');
+        // eslint-disable-next-line node/no-extraneous-require
+        findPort = require('webpack-dev-server/lib/utils/findPort');
     } catch (err) {
         logger.error(`You need to install 'webpack-dev-server' for running 'webpack serve'.\n${err}`);
         process.exit(2);
@@ -34,10 +37,14 @@ export default function startDevServer(compiler, cliOptions): object[] {
     const servers = [];
 
     const usedPorts: number[] = [];
-    devServerOptions.forEach((devServerOpts): void => {
+
+    for (const devServerOpts of devServerOptions) {
         const options = mergeOptions(cliOptions, devServerOpts);
-        // devSever v4 handles the default host and port itself
-        if (!isDevServer4) {
+        if (isDevServer4) {
+            options.port = await findPort(options.port);
+            options.client = options.client || {};
+            options.client.port = options.client.port || options.port;
+        } else {
             options.host = options.host || 'localhost';
             options.port = options.port || 8080;
         }
@@ -61,7 +68,7 @@ export default function startDevServer(compiler, cliOptions): object[] {
         });
 
         servers.push(server);
-    });
+    }
 
     return servers;
 }

packages/serve/src/types.ts

@@ -1,6 +1,6 @@
 export type devServerOptionsType = {
     bonjour?: boolean;
-    client?: object;
+    client?: devServerClientOptions;
     compress?: boolean;
     dev?: object;
     firewall?: boolean | string[];
@@ -28,3 +28,20 @@ export type devServerOptionsType = {
     transportMode?: object | string;
     useLocalIp?: boolean;
 };
+
+type devServerClientOptions = {
+    host?: string;
+    path?: string;
+    port?: string | number | null;
+    logging?: devServerClientLogging;
+    progress?: boolean;
+};
+
+export enum devServerClientLogging {
+    none = 'none',
+    error = 'error',
+    warn = 'warn',
+    info = 'info',
+    log = 'log',
+    verbose = 'verbose',
+}