From f25d189aa54797d00c8f4284b300da3d694fa101 Mon Sep 17 00:00:00 2001
From: Mathis Gardon <mathis.gardon@comwatt.com>
Date: Wed, 31 Mar 2021 03:29:18 -0700
Subject: [PATCH] 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     |  3 ++-
 desktop/app/src/utils/adbConfig.tsx            | 12 ++++++------
 desktop/app/src/utils/environmentVariables.tsx | 12 ++++++++++++
 desktop/plugins/hermesdebuggerrn/index.tsx     |  7 +++++--
 docs/custom-ports.mdx                          | 18 ++++++++++++++++++
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/desktop/app/src/dispatcher/metroDevice.tsx b/desktop/app/src/dispatcher/metroDevice.tsx
index 189da42e3..1cff56c81 100644
--- a/desktop/app/src/dispatcher/metroDevice.tsx
+++ b/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'];
diff --git a/desktop/app/src/utils/adbConfig.tsx b/desktop/app/src/utils/adbConfig.tsx
index 7e97bcb79..c0fe072f0 100644
--- a/desktop/app/src/utils/adbConfig.tsx
+++ b/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 = 5037;
-  if (serverPortString) {
-    const parsedInt = parseInt(serverPortString, 10);
-    port = isNaN(parsedInt) ? port : parsedInt;
-  }
+  let port = parseEnvironmentVariableAsNumber(
+    'ANDROID_ADB_SERVER_PORT',
+    5037,
+  ) as number;
 
   let host = 'localhost';
 
diff --git a/desktop/app/src/utils/environmentVariables.tsx b/desktop/app/src/utils/environmentVariables.tsx
index 640413c7c..a77591ee8 100644
--- a/desktop/app/src/utils/environmentVariables.tsx
+++ b/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;
+}
diff --git a/desktop/plugins/hermesdebuggerrn/index.tsx b/desktop/plugins/hermesdebuggerrn/index.tsx
index 39dd02ba0..3aa954040 100644
--- a/desktop/plugins/hermesdebuggerrn/index.tsx
+++ b/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) => {
diff --git a/docs/custom-ports.mdx b/docs/custom-ports.mdx
index e1a410932..55f2048db 100644
--- a/docs/custom-ports.mdx
+++ b/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
+```