Support custom metro ports (#2050)

Summary:
Based on issue https://github.com/facebook/flipper/issues/1509 I needed a custom port for the metro server to pass to flipper.

## Changelog

introduce `METRO_SERVER_PORT` env variable to be able to customize default 8081 port on startup.

Pull Request resolved: https://github.com/facebook/flipper/pull/2050

Test Plan:
Tested with a locally built linux desktop app, this seems to work OK pour hermes debugging & RN logging.

React DevTools don't seem to find the running app, maybe there's a mapping to handle there too ?

Reviewed By: jknoxville

Differential Revision: D27339006

Pulled By: passy

fbshipit-source-id: b1700c4fe73f14bf4617e23583b2954012e0a5aa

desktop/app/src/dispatcher/metroDevice.tsx

@@ -13,9 +13,10 @@ import MetroDevice from '../devices/MetroDevice';
 import http from 'http';
 import {addErrorNotification} from '../reducers/notifications';
 import {destroyDevice} from '../reducers/connections';
+import {parseEnvironmentVariableAsNumber} from '../utils/environmentVariables';
 
-const METRO_PORT = 8081;
 const METRO_HOST = 'localhost';
+const METRO_PORT = parseEnvironmentVariableAsNumber('METRO_SERVER_PORT', 8081);
 const METRO_URL = `http://${METRO_HOST}:${METRO_PORT}`;
 const METRO_LOGS_ENDPOINT = `ws://${METRO_HOST}:${METRO_PORT}/events`;
 const METRO_MESSAGE = ['React Native packager is running', 'Metro is running'];

desktop/app/src/utils/adbConfig.tsx

@@ -7,13 +7,13 @@
  * @format
  */
 
+import {parseEnvironmentVariableAsNumber} from './environmentVariables';
+
 export default () => {
-  const serverPortString = process.env.ANDROID_ADB_SERVER_PORT;
+  let port = parseEnvironmentVariableAsNumber(
-  let port = 5037;
+    'ANDROID_ADB_SERVER_PORT',
-  if (serverPortString) {
+    5037,
-    const parsedInt = parseInt(serverPortString, 10);
+  ) as number;
-    port = isNaN(parsedInt) ? port : parsedInt;
-  }
 
   let host = 'localhost';
 

desktop/app/src/utils/environmentVariables.tsx

@@ -25,3 +25,15 @@ export function parseFlipperPorts(
     };
   }
 }
+
+export function parseEnvironmentVariableAsNumber(
+  envVarName: string,
+  defaultValue?: number,
+): number | undefined {
+  const envVarAsString = process.env[envVarName];
+  if (envVarAsString) {
+    const parsedInt = parseInt(envVarAsString, 10);
+    return isNaN(parsedInt) ? defaultValue : parsedInt;
+  }
+  return defaultValue;
+}

desktop/plugins/hermesdebuggerrn/index.tsx

@@ -23,7 +23,10 @@ import ErrorScreen from './ErrorScreen';
 import ChromeDevTools from './ChromeDevTools';
 
 const POLL_SECS = 5 * 1000;
-const METRO_HOST = 'http://localhost:8081';
+const METRO_PORT_ENV_VAR = process.env.METRO_SERVER_PORT || '8081';
+const METRO_PORT = isNaN(+METRO_PORT_ENV_VAR) ? '8081' : METRO_PORT_ENV_VAR;
+const METRO_URL = new URL('http://localhost');
+METRO_URL.port = METRO_PORT;
 
 export type Target = Readonly<{
   id: string;
@@ -87,7 +90,7 @@ export default class extends FlipperDevicePlugin<State, any, any> {
   }
 
   checkDebugTargets = () => {
-    fetch(`${METRO_HOST}/json`)
+    fetch(`${METRO_URL.toString()}json`)
       .then((res) => res.json())
       .then(
         (result) => {

docs/custom-ports.mdx

@@ -4,6 +4,8 @@ title: Running Flipper with different ports
 sidebar_label: Using different ports
 ---
 
+## FLIPPER ports
+
 By default Flipper runs its servers on ports 8088 and 8089, and the mobile SDKs look for servers on those ports.
 
 Each of these can be overridden by setting an environment variable, with the format `${INSECURE_PORT},${SECURE_PORT}`.
@@ -21,3 +23,19 @@ adb shell su 0 setprop flipper.ports 1111,2222
 ```
 
 To configure the iOS SDK for custom ports, set the FLIPPER_PORTS environment variable in your app launch script.
+
+## METRO SERVER PORTS
+
+You can also setup Flipper to use a different Metro Server port (default=8081) using this environement variable:
+
+```
+METRO_SERVER_PORT=3333 ./flipper
+```
+
+## ADB REVERSE PROXY PORTS
+
+And setup a different ADB port used for reverse proxying when plugged through USB (default=5037) using:
+
+```
+ANDROID_ADB_SERVER_PORT=4444 ./flipper
+```