Merge pull request #4149 from storybooks/open-tab

start-storybook: open browser tab on first compilation

MIGRATION.md

@@ -88,6 +88,10 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you
     ```
   * If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7`.
 
+### start-storybook opens browser automatically
+
+If you're using `start-storybook` on CI, you may need to opt out of this using the new `--ci` flag.
+
 ## From version 3.3.x to 3.4.x
 
 There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.

docs/src/pages/configurations/cli-options/index.md

@@ -21,6 +21,12 @@ Here are all those options:
       -h, --host [string]           Host to run Storybook
       -s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list
       -c, --config-dir [dir-name]   Directory where to load Storybook configurations from
+      --https                       Serve Storybook over HTTPS. Note: You must provide your own certificate information.
+      --ssl-ca <ca>                 Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
+      --ssl-cert <cert>             Provide an SSL certificate. (Required with --https)
+      --ssl-key <key>               Provide an SSL key. (Required with --https)
+      --smoke-test                  Exit after successful start
+      --ci                          CI mode (skip interactive prompts, don't open browser)
       --quiet                       Suppress verbose build output
 
 ## For build-storybook

lib/core/package.json

@@ -52,6 +52,7 @@
     "interpret": "^1.1.0",
     "json5": "^2.0.1",
     "object.omit": "^3.0.0",
+    "opn": "^5.3.0",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.6.2",

lib/core/src/server/build-dev.js

@@ -8,6 +8,8 @@ import chalk from 'chalk';
 import detectFreePort from 'detect-port';
 import inquirer from 'inquirer';
 import { logger } from '@storybook/node-logger';
+import opn from 'opn';
+
 import storybook, { webpackValid } from './middleware';
 import { parseList, getEnvConfig } from './utils';
 import './config/env';
@@ -41,6 +43,7 @@ export async function buildDev({ packageJson, ...loadOptions }) {
     .option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
     .option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
     .option('--smoke-test', 'Exit after successful start')
+    .option('--ci', "CI mode (skip interactive prompts, don't open browser")
     .option('--quiet', 'Suppress verbose build output')
     .parse(process.argv);
 
@@ -57,7 +60,7 @@ export async function buildDev({ packageJson, ...loadOptions }) {
 
   const port = await getFreePort(program.port);
 
-  if (!program.smokeTest && program.port != null && port !== program.port) {
+  if (!program.ci && !program.smokeTest && program.port != null && port !== program.port) {
     const { shouldChangePort } = await inquirer.prompt({
       type: 'confirm',
       default: true,
@@ -153,6 +156,8 @@ Would you like to run Storybook on port ${port} instead?`,
     logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
     if (program.smokeTest) {
       process.exit(stats.toJson().warnings.length ? 1 : 0);
+    } else if (!program.ci) {
+      opn(address);
     }
   } catch (error) {
     if (error instanceof Error) {

package.json

@@ -53,7 +53,7 @@
     "postpublish": "yarn --cwd lib/cli test -o",
     "publish:alpha": "npm run publish -- --npm-tag=alpha",
     "repo-dirty-check": "node ./scripts/repo-dirty-check",
-    "start": "npm --prefix examples/official-storybook run storybook",
+    "start": "yarn --cwd examples/official-storybook storybook",
     "test": "node ./scripts/test.js",
     "test-latest-cra": "npm --prefix lib/cli run test-latest-cra"
   },