Support a custom port for the insecure connection flow

Summary:
1. Remove GK.get('comet_enable_flipper_connection') which does not seem to be needed anymore
2. Support custom ports for the insecure connection flow

Reviewed By: lblasa

Differential Revision: D33632891

fbshipit-source-id: 045d6886ea94e15bff38f2f61c7d5a2c56c39859

desktop/flipper-server-core/src/FlipperServerConfig.tsx

@@ -8,7 +8,10 @@
  */
 
 import {FlipperServerConfig} from 'flipper-common';
-import {parseFlipperPorts} from './utils/environmentVariables';
+import {
+  parseEnvironmentVariableAsNumber,
+  parseFlipperPorts,
+} from './utils/environmentVariables';
 
 let currentConfig: FlipperServerConfig | undefined = undefined;
 
@@ -34,6 +37,7 @@ type ServerPorts = {
 export function getServerPortsConfig(): {
   serverPorts: ServerPorts;
   altServerPorts: ServerPorts;
+  browserPort: number;
 } {
   let portOverrides: ServerPorts | undefined;
   if (process.env.FLIPPER_PORTS) {
@@ -59,6 +63,17 @@ export function getServerPortsConfig(): {
     }
   }
 
+  const portBrowserOverride = parseEnvironmentVariableAsNumber(
+    'FLIPPER_BROWSER_PORT',
+  );
+  if (portBrowserOverride === undefined) {
+    console.error(
+      `Ignoring malformed FLIPPER_BROWSER_PORT env variable:
+          "${process.env.FLIPPER_BROWSER_PORT || ''}".
+          Example expected format: "1111".`,
+    );
+  }
+
   return {
     serverPorts: portOverrides ?? {
       insecure: 8089,
@@ -68,5 +83,6 @@ export function getServerPortsConfig(): {
       insecure: 9089,
       secure: 9088,
     },
+    browserPort: portBrowserOverride ?? 8333,
   };
 }

desktop/flipper-server-core/src/comms/ServerController.tsx

@@ -12,7 +12,6 @@ import {
   ClientDescription,
   ClientQuery,
   isTest,
-  GK,
   buildClientId,
   Logger,
   UninitializedClient,
@@ -147,10 +146,9 @@ class ServerController extends EventEmitter implements ServerEventsListener {
       TransportType.WebSocket,
     );
 
-    if (GK.get('comet_enable_flipper_connection')) {
-      console.info('[conn] Browser server (ws) listening at port: ', 8333);
-      this.browserServer = await createBrowserServer(8333, this);
-    }
+    const browserPort = getServerPortsConfig().browserPort;
+    console.info('[conn] Browser server (ws) listening at port: ', browserPort);
+    this.browserServer = await createBrowserServer(browserPort, this);
   }
 
   /**

docs/custom-ports.mdx

@@ -4,7 +4,7 @@ title: Running Flipper with different ports
 sidebar_label: Using different ports
 ---
 
-## FLIPPER ports
+## FLIPPER ports (mobile apps that support certificate exchange)
 
 By default Flipper runs its servers on ports 8088 and 8089, and the mobile SDKs look for servers on those ports.
 
@@ -34,6 +34,28 @@ To configure the iOS SDK for custom ports, set the FLIPPER_PORTS environment var
 xcrun simctl spawn booted defaults write "Apple Global Domain" "com.facebook.flipper.ports" -string "1111,2222"
 ```
 
+## FLIPPER ports (apps that do not support certificate exchange)
+
+Flipper listens on 8333 for insecure (browser, Node.js) connections.
+
+To run the desktop app using custom ports:
+
+```
+env FLIPPER_BROWSER_PORT=1111 ./flipper
+```
+
+or with a dev build:
+
+```
+env FLIPPER_BROWSER_PORT=1111 yarn start
+```
+
+To connect to Flipper on a different port from [js-flipper](https://github.com/facebook/flipper/tree/main/js/js-flipper), you need to override its `urlBase` when you [start it](https://github.com/facebook/flipper/blob/0993d21f3b52d38969e4d2e330eb97ec4d840a9d/js/react-flipper-example/src/FlipperTicTacToe.tsx#L19).
+
+```ts
+flipperClient.start('React Tic-Tac-Toe', { urlBase: 'localhost:1111' });
+```
+
 ## METRO SERVER PORTS
 
 You can also setup Flipper to use a different Metro Server port (default=8081) using this environement variable: