fix: browser selection via env variable

Created by: FloydJohn

Hi everyone,

this PR fixes the opening of a browser of choice, selected through the BROWSER environment variable, when starting a generated project.

After migrating to CRA v5.x the feature stopped working (see #11873, #11844, #11942, #11917, #12275).

Browsing the documentation for the open@8.4.0 package (available here) I noticed that the syntax for opening an URL using a specified browser was updated.

This PR includes two small changes:

• The updated syntax for opening a browser is now used
• Since the open package natively supports passing an array of arguments to the application, we no longer need to concatenate the arguments before the call

To test this feature I followed this test plan:

• Create a new .env file in the template project, containing for example the value BROWSER=google-chrome-stable. The browser name could change based on OS or linux distro.
• Start the template project with npm run start. A new tab should open in the specified browser.
• Stop the process and remove the newly created .env file.
• Start again the project with npm run start: it should open on the default browser.

packages/react-dev-utils/openBrowser.js

@@ -117,15 +117,12 @@ function startBrowserProcess(browser, url, args) {
     browser = undefined;
   }
 
-  // If there are arguments, they must be passed as array with the browser
-  if (typeof browser === 'string' && args.length > 0) {
-    browser = [browser].concat(args);
-  }
-
   // Fallback to open
   // (It will always open new tab)
   try {
-    var options = { app: browser, wait: false, url: true };
+    var options = {
+      app: { name: browser, arguments: args },
+    };
     open(url, options).catch(() => {}); // Prevent `unhandledRejection` error.
     return true;
   } catch (err) {