Merge pull request #4146 from storybooks/detect-port

start-storybook: suggest an alternative when the port is occupied

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

@@ -15,9 +15,9 @@ Here are all those options:
 
     Options:
 
-      -h, --help                    output usage information
+      --help                    output usage information
       -V, --version                 output the version number
-      -p, --port [number]           Port to run Storybook (Required)
+      -p, --port [number]           Port to run Storybook
       -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

lib/core/package.json

@@ -40,13 +40,15 @@
     "core-js": "^2.5.7",
     "css-loader": "^1.0.0",
     "deepmerge": "^2.1.1",
+    "detect-port": "^1.2.3",
     "dotenv-webpack": "^1.5.7",
     "ejs": "^2.6.1",
     "express": "^4.16.3",
     "file-loader": "^2.0.0",
     "find-cache-dir": "^2.0.0",
     "generate-page-webpack-plugin": "^1.1.0",
     "global": "^4.3.2",
+    "inquirer": "^6.2.0",
     "interpret": "^1.1.0",
     "json5": "^2.0.1",
     "object.omit": "^3.0.0",

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

@@ -5,19 +5,27 @@ import program from 'commander';
 import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
+import detectFreePort from 'detect-port';
+import inquirer from 'inquirer';
 import { logger } from '@storybook/node-logger';
 import storybook, { webpackValid } from './middleware';
 import { parseList, getEnvConfig } from './utils';
 import './config/env';
 
 const defaultFavIcon = require.resolve('./public/favicon.ico');
 
-export function buildDev({ packageJson, ...loadOptions }) {
+const getFreePort = port =>
+  detectFreePort(port).catch(error => {
+    logger.error(error);
+    process.exit(-1);
+  });
+
+export async function buildDev({ packageJson, ...loadOptions }) {
   process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
   program
     .version(packageJson.version)
-    .option('-p, --port [number]', 'Port to run Storybook (Required)', str => parseInt(str, 10))
+    .option('-p, --port [number]', 'Port to run Storybook', str => parseInt(str, 10))
     .option('-h, --host [string]', 'Host to run Storybook')
     .option('-s, --static-dir <dir-names>', 'Directory where to load static files from')
     .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
@@ -47,14 +55,23 @@ export function buildDev({ packageJson, ...loadOptions }) {
     configDir: 'SBCONFIG_CONFIG_DIR',
   });
 
-  if (!program.port) {
-    logger.error('Error: port to run Storybook is required!\n');
-    program.help();
-    process.exit(-1);
+  const port = await getFreePort(program.port);
+
+  if (!program.smokeTest && program.port != null && port !== program.port) {
+    const { shouldChangePort } = await inquirer.prompt({
+      type: 'confirm',
+      default: true,
+      name: 'shouldChangePort',
+      message: `Port ${program.port} is not available.
+Would you like to run Storybook on port ${port} instead?`,
+    });
+    if (!shouldChangePort) {
+      process.exit(1);
+    }
   }
 
   // Used with `app.listen` below
-  const listenAddr = [program.port];
+  const listenAddr = [port];
 
   if (program.host) {
     listenAddr.push(program.host);
@@ -129,21 +146,20 @@ export function buildDev({ packageJson, ...loadOptions }) {
     }
   });
 
-  Promise.all([webpackValid, serverListening])
-    .then(([stats]) => {
-      const proto = program.https ? 'https' : 'http';
-      const address = `${proto}://${program.host || 'localhost'}:${program.port}/`;
-      logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
-      if (program.smokeTest) {
-        process.exit(stats.toJson().warnings.length ? 1 : 0);
-      }
-    })
-    .catch(error => {
-      if (error instanceof Error) {
-        logger.error(error);
-      }
-      if (program.smokeTest) {
-        process.exit(1);
-      }
-    });
+  try {
+    const [stats] = await Promise.all([webpackValid, serverListening]);
+    const proto = program.https ? 'https' : 'http';
+    const address = `${proto}://${program.host || 'localhost'}:${port}/`;
+    logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
+    if (program.smokeTest) {
+      process.exit(stats.toJson().warnings.length ? 1 : 0);
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      logger.error(error);
+    }
+    if (program.smokeTest) {
+      process.exit(1);
+    }
+  }
 }

yarn.lock

@@ -6397,6 +6397,13 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
+detect-port@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.2.3.tgz#15bf49820d02deb84bfee0a74876b32d791bf610"
+  dependencies:
+    address "^1.0.1"
+    debug "^2.6.0"
+
 detective@^5.0.2:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.1.0.tgz#7a20d89236d7b331ccea65832e7123b5551bb7cb"