make metro accept tls server config (#1657)

Summary:
X-link: facebook/react-native#55701

Pull Request resolved: #1657

Changelog: [Feature] `config.server.tls` now sets Metro to be exposed as an https server

Reviewed By: robhogan, huntie

Differential Revision: D93857257

fbshipit-source-id: 56ff661c4ddf9cd5d4bb32756b9cb600bb032a1c

Author: vzaidman

docs/Configuration.md

@@ -657,6 +657,25 @@ Type: `boolean`
 
 Enable forwarding of `client_log` events (when client logs are [configured](https://github.com/facebook/metro/blob/614ad14a85b22958129ee94e04376b096f03ccb1/packages/metro/src/lib/createWebsocketServer.js#L20)) to the reporter. Defaults to `true`.
 
+#### `tls`
+
+Type: `false | object`
+
+If not provided or is `false` Metro will start an HTTP server with WS WebSocket endpoints.
+
+If an object, Metro will start an HTTPS server with WSS WebSocket endpoints using the passed TLS options:
+
+```ts
+ca?: string | Buffer,      // Certificate authority (contents, not path)
+cert?: string | Buffer,    // Server certificate (contents, not path)
+key?: string | Buffer,     // Private key (contents, not path)
+requestCert?: boolean,     // Whether to authenticate the remote peer by requesting a certificate
+```
+
+Notice that when overriding the base config, object tls configs extend the base tls config, false overrides the base tls configs, and `null` and `undefined` are ignored.
+
+When running Metro with `Metro.runServer` with the `secureServerOptions` property Metro will likewise start an HTTPS server merging with the `config.server.tls` object if provided, overriding it.
+
 ---
 
 ### Watcher Options

packages/metro-config/src/__tests__/mergeConfig-test.js

@@ -4,11 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow
  * @format
  * @oncall react_native
  */
 
+import type {InputConfigT} from '../types';
+
 import {mergeConfig} from '../loadConfig';
 
 describe('mergeConfig', () => {
@@ -26,4 +28,168 @@ describe('mergeConfig', () => {
       },
     });
   });
+
+  describe('server.tls merging', () => {
+    describe('override IS applied when tls is false or object', () => {
+      test('override tls: object replaces base tls: false', () => {
+        const base: InputConfigT = {server: {tls: false}};
+        const override: InputConfigT = {
+          server: {tls: {key: 'key', cert: 'cert'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({key: 'key', cert: 'cert'});
+      });
+
+      test('override tls: false replaces base tls: object', () => {
+        const base: InputConfigT = {server: {tls: {key: 'key', cert: 'cert'}}};
+        const override: InputConfigT = {server: {tls: false}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(false);
+      });
+
+      test('override tls: false sets tls when base is undefined', () => {
+        const base: InputConfigT = {server: {}};
+        const override: InputConfigT = {server: {tls: false}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(false);
+      });
+
+      test('override tls: object sets tls when base is undefined', () => {
+        const base: InputConfigT = {server: {}};
+        const override: InputConfigT = {
+          server: {tls: {key: 'key', cert: 'cert'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({key: 'key', cert: 'cert'});
+      });
+
+      test('override tls: object deep merges with base tls: object', () => {
+        const base: InputConfigT = {
+          server: {tls: {key: 'baseKey', cert: 'baseCert', ca: 'baseCa'}},
+        };
+        const override: InputConfigT = {
+          server: {tls: {key: 'newKey', cert: 'newCert'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({
+          key: 'newKey',
+          cert: 'newCert',
+          ca: 'baseCa',
+        });
+      });
+
+      test('override tls: object adds new properties to base tls: object', () => {
+        const base: InputConfigT = {
+          server: {tls: {key: 'baseKey', cert: 'baseCert'}},
+        };
+        const override: InputConfigT = {
+          server: {tls: {ca: 'newCa'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({
+          key: 'baseKey',
+          cert: 'baseCert',
+          ca: 'newCa',
+        });
+      });
+
+      test('override tls: object with same properties overrides base values', () => {
+        const base: InputConfigT = {
+          server: {tls: {key: 'baseKey', cert: 'baseCert'}},
+        };
+        const override: InputConfigT = {
+          server: {tls: {key: 'newKey', cert: 'newCert'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({
+          key: 'newKey',
+          cert: 'newCert',
+        });
+      });
+
+      test('other server properties are preserved when tls is overridden', () => {
+        const base: InputConfigT = {server: {port: 8081, tls: false}};
+        const override: InputConfigT = {
+          server: {tls: {key: 'key', cert: 'cert'}},
+        };
+        const result = mergeConfig(base, override);
+        expect(result.server).toStrictEqual({
+          port: 8081,
+          tls: {key: 'key', cert: 'cert'},
+        });
+      });
+
+      test('override tls: null replaces base tls: undefined', () => {
+        const base: InputConfigT = {server: {}};
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const override: InputConfigT = {server: {tls: null}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(null);
+      });
+    });
+
+    describe('override is NOT applied when tls is null or undefined', () => {
+      test('override tls: undefined keeps base tls: object', () => {
+        const base: InputConfigT = {server: {tls: {key: 'key', cert: 'cert'}}};
+        const override: InputConfigT = {server: {}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({key: 'key', cert: 'cert'});
+      });
+
+      test('override tls: undefined (explicit) keeps base tls: object', () => {
+        const base: InputConfigT = {server: {tls: {key: 'key', cert: 'cert'}}};
+        // $FlowExpectedError[incompatible-type] - testing explicit undefined
+        const override: InputConfigT = {server: {tls: undefined}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({key: 'key', cert: 'cert'});
+      });
+
+      test('override tls: undefined keeps base tls: false', () => {
+        const base: InputConfigT = {server: {tls: false}};
+        const override: InputConfigT = {server: {}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(false);
+      });
+
+      test('override tls: undefined (explicit) keeps base tls: false', () => {
+        const base: InputConfigT = {server: {tls: false}};
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const override: InputConfigT = {server: {tls: undefined}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(false);
+      });
+
+      test('override tls: null keeps base tls: object', () => {
+        const base: InputConfigT = {server: {tls: {key: 'key', cert: 'cert'}}};
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const override: InputConfigT = {server: {tls: null}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toStrictEqual({key: 'key', cert: 'cert'});
+      });
+
+      test('override tls: null keeps base tls: false', () => {
+        const base: InputConfigT = {server: {tls: false}};
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const override: InputConfigT = {server: {tls: null}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBe(false);
+      });
+
+      test('both tls undefined results in no tls property', () => {
+        const base: InputConfigT = {server: {}};
+        const override: InputConfigT = {server: {}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBeUndefined();
+      });
+
+      test('both tls undefined (explicit) results in no tls property', () => {
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const base: InputConfigT = {server: {tls: undefined}};
+        // $FlowExpectedError[incompatible-type] - testing untyped runtime behavior
+        const override: InputConfigT = {server: {tls: undefined}};
+        const result = mergeConfig(base, override);
+        expect(result.server?.tls).toBeUndefined();
+      });
+    });
+  });
 });

packages/metro-config/src/defaults/index.js

@@ -80,6 +80,7 @@ const getDefaultValues = (projectRoot: ?string): ConfigT => ({
     unstable_serverRoot: null,
     useGlobalHotkey: true,
     verifyConnections: false,
+    tls: false,
   },
 
   symbolicator: {

packages/metro-config/src/loadConfig.js

@@ -152,8 +152,21 @@ function mergeConfigObjects<T: InputConfigT>(
     },
     server: {
       ...base.server,
-      // $FlowFixMe[exponential-spread]
       ...overrides.server,
+      // $FlowFixMe[exponential-spread]
+      ...(base.server?.tls != null ? {tls: base.server?.tls} : null),
+      // only override base tls config with false or an object
+      ...(overrides.server?.tls === false
+        ? {tls: false}
+        : overrides.server?.tls != null &&
+            typeof overrides.server?.tls === 'object'
+          ? {
+              tls: {
+                ...(base.server?.tls || {}),
+                ...overrides.server?.tls,
+              },
+            }
+          : null),
     },
     symbolicator: {
       ...base.symbolicator,

packages/metro-config/src/types.js

@@ -184,6 +184,14 @@ type ServerConfigT = {
   unstable_serverRoot: ?string,
   useGlobalHotkey: boolean,
   verifyConnections: boolean,
+  tls:
+    | false
+    | {
+        ca?: string | Buffer,
+        cert?: string | Buffer,
+        key?: string | Buffer,
+        requestCert?: boolean,
+      },
 };
 
 type SymbolicatorConfigT = {

packages/metro-config/types/types.d.ts

@@ -179,6 +179,14 @@ type ServerConfigT = {
   unstable_serverRoot: null | undefined | string;
   useGlobalHotkey: boolean;
   verifyConnections: boolean;
+  tls:
+    | false
+    | {
+        ca?: string | Buffer;
+        cert?: string | Buffer;
+        key?: string | Buffer;
+        requestCert?: boolean;
+      };
 };
 type SymbolicatorConfigT = {
   customizeFrame: ($$PARAM_0$$: {

packages/metro/package.json

@@ -76,6 +76,7 @@
     "metro-memory-fs": "*",
     "mock-req": "^0.2.0",
     "mock-res": "^0.6.0",
+    "selfsigned": "^5.5.0",
     "stack-trace": "^0.0.10"
   },
   "license": "MIT",

packages/metro/src/index.flow.js

@@ -280,7 +280,7 @@ export const runServer = async (
       chalk.inverse.yellow.bold(' DEPRECATED '),
       'The `secure`, `secureCert`, and `secureKey` options are now deprecated. ' +
         'Please use the `secureServerOptions` object instead to pass options to ' +
-        "Metro's https development server.",
+        "Metro's https development server, or `config.server.tls` in Metro's configuration",
     );
   }
   // Lazy require
@@ -307,15 +307,30 @@ export const runServer = async (
 
   let httpServer;
 
-  if (secure === true || secureServerOptions != null) {
-    let options = secureServerOptions;
-    if (typeof secureKey === 'string' && typeof secureCert === 'string') {
-      options = {
-        key: fs.readFileSync(secureKey),
-        cert: fs.readFileSync(secureCert),
-        ...secureServerOptions,
-      };
-    }
+  const {tls} = config.server;
+  if (
+    secure === true ||
+    secureServerOptions != null ||
+    typeof tls === 'object'
+  ) {
+    const options = {
+      key:
+        typeof tls === 'object'
+          ? tls.key
+          : typeof secureKey === 'string'
+            ? fs.readFileSync(secureKey)
+            : undefined,
+      cert:
+        typeof tls === 'object'
+          ? tls.cert
+          : typeof secureCert === 'string'
+            ? fs.readFileSync(secureCert)
+            : undefined,
+      ca: typeof tls === 'object' ? tls.ca : undefined,
+      requestCert: typeof tls === 'object' ? tls.requestCert : undefined,
+      ...(secureServerOptions ?? {}),
+    };
+
     // $FlowFixMe[incompatible-type] 'http' and 'https' Flow types do not match
     httpServer = https.createServer(options, serverApp);
   } else {