feat: fallback to default browser if Chrome is not found

packages/cli/src/commands/server/launchChrome.js → packages/cli/src/commands/server/launchDebugger.js

@@ -11,6 +11,8 @@
 import open from 'open';
 import {execSync} from 'child_process';
 import {logger} from '@react-native-community/cli-tools';
+import launchDefaultBrowser from './launchDefaultBrowser';
+import chalk from 'chalk';
 
 function commandExistsUnixSync(commandName) {
   try {
@@ -24,6 +26,28 @@ function commandExistsUnixSync(commandName) {
   }
 }
 
+function commandExistsWindowsSync(commandName) {
+  try {
+    const stdout = execSync('where ' + commandName, {stdio: []});
+    return !!stdout;
+  } catch (error) {
+    return false;
+  }
+}
+
+function commandExists(commandName) {
+  switch (process.platform) {
+    case 'win32':
+      return commandExistsWindowsSync(commandName);
+    case 'linux':
+    case 'darwin':
+      return commandExistsUnixSync(commandName);
+    default:
+      // assume it doesn't exist, just to be safe.
+      return false;
+  }
+}
+
 function getChromeAppName(): string {
   switch (process.platform) {
     case 'darwin':
@@ -52,4 +76,17 @@ function launchChrome(url: string) {
   });
 }
 
-export default launchChrome;
+function launchDebugger(url: string) {
+  if (!commandExists(getChromeAppName())) {
+    logger.info(
+      `For a better debugging experience please install Google Chrome from: ${chalk.underline.dim(
+        'https://www.google.com/chrome/',
+      )}`,
+    );
+    launchDefaultBrowser(url);
+    return;
+  }
+  launchChrome(url);
+}
+
+export default launchDebugger;

packages/cli/src/commands/server/launchBrowser.js → packages/cli/src/commands/server/launchDefaultBrowser.js

@@ -11,12 +11,12 @@
 import open from 'open';
 import {logger} from '@react-native-community/cli-tools';
 
-function launchBrowser(url: string) {
+function launchDefaultBrowser(url: string) {
   open(url, err => {
     if (err) {
       logger.error('Browser exited with error:', err);
     }
   });
 }
 
-export default launchBrowser;
+export default launchDefaultBrowser;

packages/cli/src/commands/server/middleware/MiddlewareManager.js

@@ -33,7 +33,7 @@ type Options = {
 
 type WebSocketProxy = {
   server: WebSocketServer,
-  isChromeConnected: () => boolean,
+  isDebuggerConnected: () => boolean,
 };
 
 type Connect = $Call<connect>;
@@ -72,7 +72,7 @@ export default class MiddlewareManager {
 
   attachDevToolsSocket(socket: WebSocketProxy) {
     this.app.use(
-      getDevToolsMiddleware(this.options, () => socket.isChromeConnected()),
+      getDevToolsMiddleware(this.options, () => socket.isDebuggerConnected()),
     );
   }
 }

packages/cli/src/commands/server/middleware/getDevToolsMiddleware.js

@@ -6,29 +6,29 @@
  *
  * @format
  */
-import launchChrome from '../launchChrome';
 import {logger} from '@react-native-community/cli-tools';
 import {exec} from 'child_process';
+import launchDebugger from '../launchDebugger';
 
-function launchChromeDevTools(port, args = '') {
+function launchDefaultDebugger(port, args = '') {
   const debuggerURL = `http://localhost:${port}/debugger-ui${args}`;
   logger.info('Launching Dev Tools...');
-  launchChrome(debuggerURL);
+  launchDebugger(debuggerURL);
 }
 
 function escapePath(pathname) {
   // " Can escape paths with spaces in OS X, Windows, and *nix
   return `"${pathname}"`;
 }
 
-function launchDevTools({port, watchFolders}, isChromeConnected) {
+function launchDevTools({port, watchFolders}, isDebuggerConnected) {
   // Explicit config always wins
   const customDebugger = process.env.REACT_DEBUGGER;
   if (customDebugger) {
     startCustomDebugger({watchFolders, customDebugger});
-  } else if (!isChromeConnected()) {
-    // Dev tools are not yet open; we need to open a session
-    launchChromeDevTools(port);
+  } else if (!isDebuggerConnected()) {
+    // Debugger is not yet open; we need to open a session
+    launchDefaultDebugger(port);
   }
 }
 
@@ -43,10 +43,10 @@ function startCustomDebugger({watchFolders, customDebugger}) {
   });
 }
 
-export default function getDevToolsMiddleware(options, isChromeConnected) {
+export default function getDevToolsMiddleware(options, isDebuggerConnected) {
   return function devToolsMiddleware(req, res, next) {
     if (req.url === '/launch-js-devtools') {
-      launchDevTools(options, isChromeConnected);
+      launchDevTools(options, isDebuggerConnected);
       res.end('OK');
     } else {
       next();

packages/cli/src/commands/server/middleware/openURLMiddleware.js

@@ -7,7 +7,7 @@
  * @format
  */
 
-import launchBrowser from '../launchBrowser';
+import launchDefaultBrowser from '../launchDefaultBrowser';
 import {logger} from '@react-native-community/cli-tools';
 
 /**
@@ -17,7 +17,7 @@ export default function openURLMiddleware(req, res, next) {
   if (req.url === '/open-url') {
     const {url} = JSON.parse(req.rawBody);
     logger.info(`Opening ${url}...`);
-    launchBrowser(url);
+    launchDefaultBrowser(url);
     res.end('OK');
   } else {
     next();

packages/cli/src/commands/server/webSocketProxy.js

@@ -75,7 +75,7 @@ function attachToServer(server, path) {
 
   return {
     server: wss,
-    isChromeConnected() {
+    isDebuggerConnected() {
       return !!debuggerSocket;
     },
   };