Refactor dev server URL creation creation to use url.format (#39503)

Summary:
Pull Request resolved: #39503

Changelog: [Internal]

Reviewed By: blakef

Differential Revision: D49317314

fbshipit-source-id: 85b71340686a1cd19d63a7e73a5388a803d22c42

packages/community-cli-plugin/src/commands/start/runServer.js

@@ -18,6 +18,7 @@ import chalk from 'chalk';
 import Metro from 'metro';
 import {Terminal} from 'metro-core';
 import path from 'path';
+import url from 'url';
 import {createDevMiddleware} from '@react-native/dev-middleware';
 import {
   createDevServerMiddleware,
@@ -63,23 +64,18 @@ async function runServer(
     projectRoot: args.projectRoot,
     sourceExts: args.sourceExts,
   });
-  const host = args.host?.length ? args.host : 'localhost';
+  const hostname = args.host?.length ? args.host : 'localhost';
   const {
     projectRoot,
     server: {port},
     watchFolders,
   } = metroConfig;
-  const scheme = args.https === true ? 'https' : 'http';
-  const devServerUrl = `${scheme}://${host}:${port}`;
+  const protocol = args.https === true ? 'https' : 'http';
+  const devServerUrl = url.format({protocol, hostname, port});
 
   logger.info(`Welcome to React Native v${ctx.reactNativeVersion}`);
 
-  const serverStatus = await isDevServerRunning(
-    scheme,
-    host,
-    port,
-    projectRoot,
-  );
+  const serverStatus = await isDevServerRunning(devServerUrl, projectRoot);
 
   if (serverStatus === 'matched_server_running') {
     logger.info(
@@ -109,7 +105,7 @@ async function runServer(
     messageSocketEndpoint,
     eventsSocketEndpoint,
   } = createDevServerMiddleware({
-    host,
+    host: hostname,
     port,
     watchFolders,
   });

packages/community-cli-plugin/src/utils/isDevServerRunning.js

@@ -23,19 +23,19 @@ import fetch from 'node-fetch';
  * - `unknown`: An error was encountered; attempt server creation anyway.
  */
 export default async function isDevServerRunning(
-  scheme: string,
-  host: string,
-  port: number,
+  devServerUrl: string,
   projectRoot: string,
 ): Promise<
   'not_running' | 'matched_server_running' | 'port_taken' | 'unknown',
 > {
+  const {hostname, port} = new URL(devServerUrl);
+
   try {
-    if (!(await isPortOccupied(host, port))) {
+    if (!(await isPortOccupied(hostname, port))) {
       return 'not_running';
     }
 
-    const statusResponse = await fetch(`${scheme}://${host}:${port}/status`);
+    const statusResponse = await fetch(`${devServerUrl}/status`);
     const body = await statusResponse.text();
 
     return body === 'packager-status:running' &&
@@ -47,7 +47,10 @@ export default async function isDevServerRunning(
   }
 }
 
-async function isPortOccupied(host: string, port: number): Promise<boolean> {
+async function isPortOccupied(
+  hostname: string,
+  port: string,
+): Promise<boolean> {
   let result = false;
   const server = net.createServer();
 
@@ -67,6 +70,6 @@ async function isPortOccupied(host: string, port: number): Promise<boolean> {
     server.once('close', () => {
       resolve(result);
     });
-    server.listen({host, port});
+    server.listen({host: hostname, port});
   });
 }