Merge pull request #16844 from richorrichard/15316-open-storybook-in-…

…default-browser

CLI: Fix open storybook in default browser

lib/core-client/src/typings.d.ts

@@ -6,6 +6,8 @@ declare module 'pnp-webpack-plugin';
 declare module '@storybook/theming/paths';
 declare module '@storybook/ui/paths';
 declare module 'better-opn';
+declare module 'open';
+declare module 'x-default-browser';
 declare module '@storybook/ui';
 
 declare module 'file-system-cache' {

lib/core-server/package.json

@@ -71,6 +71,7 @@
     "ip": "^1.1.5",
     "lodash": "^4.17.20",
     "node-fetch": "^2.6.1",
+    "open": "^8.4.0",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
     "regenerator-runtime": "^0.13.7",
@@ -81,7 +82,8 @@
     "util-deprecate": "^1.0.2",
     "watchpack": "^2.2.0",
     "webpack": "4",
-    "ws": "^8.2.3"
+    "ws": "^8.2.3",
+    "x-default-browser": "^0.4.0"
   },
   "devDependencies": {
     "@storybook/builder-webpack5": "6.4.0-rc.11",

lib/core-server/src/utils/open-in-browser.ts

@@ -1,15 +1,25 @@
 import { logger } from '@storybook/node-logger';
-import open from 'better-opn';
+import betterOpn from 'better-opn'; // betterOpn alias used because also loading open
+import open from 'open';
+import getDefaultBrowser from 'x-default-browser';
 import dedent from 'ts-dedent';
 
 export function openInBrowser(address: string) {
-  try {
-    open(address);
-  } catch (error) {
-    logger.error(dedent`
-      Could not open ${address} inside a browser. If you're running this command inside a
-      docker container or on a CI, you need to pass the '--ci' flag to prevent opening a
-      browser by default.
-    `);
-  }
+  getDefaultBrowser(async (err: any, res: any) => {
+    try {
+      if (res.isChrome || res.isChromium) {
+        // We use betterOpn for Chrome because it is better at handling which chrome tab
+        // or window the preview loads in.
+        betterOpn(address);
+      } else {
+        await open(address);
+      }
+    } catch (error) {
+      logger.error(dedent`
+        Could not open ${address} inside a browser. If you're running this command inside a
+        docker container or on a CI, you need to pass the '--ci' flag to prevent opening a
+        browser by default.
+      `);
+    }
+  });
 }

lib/core-server/typings.d.ts

@@ -6,6 +6,8 @@ declare module 'pnp-webpack-plugin';
 declare module '@storybook/theming/paths';
 declare module '@storybook/ui/paths';
 declare module 'better-opn';
+declare module 'open';
+declare module 'x-default-browser';
 declare module '@storybook/ui';
 declare module '@discoveryjs/json-ext';
 declare module 'watchpack';

lib/manager-webpack4/typings.d.ts

@@ -6,6 +6,8 @@ declare module 'pnp-webpack-plugin';
 declare module '@storybook/theming/paths';
 declare module '@storybook/ui/paths';
 declare module 'better-opn';
+declare module 'open';
+declare module 'x-default-browser';
 declare module '@storybook/ui';
 
 declare module 'file-system-cache' {

lib/manager-webpack5/typings.d.ts

@@ -5,6 +5,8 @@ declare module 'lazy-universal-dotenv';
 declare module '@storybook/theming/paths';
 declare module '@storybook/ui/paths';
 declare module 'better-opn';
+declare module 'open';
+declare module 'x-default-browser';
 declare module '@storybook/ui';
 
 declare module 'file-system-cache' {

yarn.lock

@@ -8269,6 +8269,7 @@ __metadata:
     jest-specific-snapshot: ^4.0.0
     lodash: ^4.17.20
     node-fetch: ^2.6.1
+    open: ^8.4.0
     pretty-hrtime: ^1.0.3
     prompts: ^2.4.0
     regenerator-runtime: ^0.13.7
@@ -8280,6 +8281,7 @@ __metadata:
     watchpack: ^2.2.0
     webpack: 4
     ws: ^8.2.3
+    x-default-browser: ^0.4.0
   peerDependencies:
     "@storybook/builder-webpack5": 6.4.0-rc.11
     "@storybook/manager-webpack5": 6.4.0-rc.11
@@ -15036,6 +15038,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"big-integer@npm:^1.6.7":
+  version: 1.6.51
+  resolution: "big-integer@npm:1.6.51"
+  checksum: c8139662d57f8833a44802f4b65be911679c569535ea73c5cfd3c1c8994eaead1b84b6f63e1db63833e4d4cacb6b6a9e5522178113dfdc8e4c81ed8436f1e8cc
+  languageName: node
+  linkType: hard
+
 "big.js@npm:^3.1.3":
   version: 3.2.0
   resolution: "big.js@npm:3.2.0"
@@ -15257,6 +15266,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bplist-parser@npm:^0.1.0":
+  version: 0.1.1
+  resolution: "bplist-parser@npm:0.1.1"
+  dependencies:
+    big-integer: ^1.6.7
+  checksum: cd50206f956e74f6e46cb5ed14be5eb00b2e14676ea3dd36703470715177a2770fc22032eca63a36adb3b56a1e51138a95bb0fc6849a78c21e92caeedf219ea7
+  languageName: node
+  linkType: hard
+
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -19594,6 +19612,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"default-browser-id@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "default-browser-id@npm:1.0.4"
+  dependencies:
+    bplist-parser: ^0.1.0
+    meow: ^3.1.0
+    untildify: ^2.0.0
+  bin:
+    default-browser-id: cli.js
+  checksum: a00a2ab66beab70490b4d76258a1f2eadfadca6414bf67ab78aa25b33dc3de0c4c813bb8f204271aa7a08281c39474487db0229e325112456464fb97a0522a8a
+  languageName: node
+  linkType: hard
+
 "default-gateway@npm:^4.2.0":
   version: 4.2.0
   resolution: "default-gateway@npm:4.2.0"
@@ -31727,7 +31758,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"meow@npm:^3.3.0":
+"meow@npm:^3.1.0, meow@npm:^3.3.0":
   version: 3.7.0
   resolution: "meow@npm:3.7.0"
   dependencies:
@@ -33666,6 +33697,17 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"open@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "open@npm:8.4.0"
+  dependencies:
+    define-lazy-prop: ^2.0.0
+    is-docker: ^2.1.1
+    is-wsl: ^2.2.0
+  checksum: 585596580226cbeb7262f36b5acc7eed05211dc26980020a2527f829336b8b07fd79cdc4240f4d995b5615f635e0a59ebb0261c4419fef91edd5d4604c463f18
+  languageName: node
+  linkType: hard
+
 "opencollective-postinstall@npm:^2.0.0, opencollective-postinstall@npm:^2.0.2, opencollective-postinstall@npm:^2.0.3":
   version: 2.0.3
   resolution: "opencollective-postinstall@npm:2.0.3"
@@ -44665,7 +44707,7 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
-"untildify@npm:^2.1.0":
+"untildify@npm:^2.0.0, untildify@npm:^2.1.0":
   version: 2.1.0
   resolution: "untildify@npm:2.1.0"
   dependencies:
@@ -47092,6 +47134,20 @@ resolve@1.19.0:
   languageName: node
   linkType: hard
 
+"x-default-browser@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "x-default-browser@npm:0.4.0"
+  dependencies:
+    default-browser-id: ^1.0.4
+  dependenciesMeta:
+    default-browser-id:
+      optional: true
+  bin:
+    x-default-browser: bin/x-default-browser.js
+  checksum: a19e42ffeab19560ea05a423561f5b3b82bb3a5878dc932cfd0847fadc5890b8b685d6b39e2356c8304b3943f5a7120ba4b233365d686ff8f9bf2499ce11f052
+  languageName: node
+  linkType: hard
+
 "xdg-basedir@npm:^4.0.0":
   version: 4.0.0
   resolution: "xdg-basedir@npm:4.0.0"