Merge pull request #413 from kadirahq/env-config

Configure start/build using env variables

dist/server/build.js

@@ -52,6 +52,14 @@ var logger = console;
 
 _commander2.default.version(_package2.default.version).option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-o, --output-dir [dir-name]', 'Directory where to store built files').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').parse(process.argv);
 
+// The key is the field created in `program` variable for
+// each command line argument. Value is the env variable.
+(0, _utils.getEnvConfig)(_commander2.default, {
+  staticDir: 'STORYBOOK_STATIC_DIR',
+  outputDir: 'STORYBOOK_OUTPUT_DIR',
+  configDir: 'STORYBOOK_CONFIG_DIR'
+});
+
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 var configDir = _commander2.default.configDir || './.storybook';

dist/server/index.js

@@ -35,6 +35,16 @@ var logger = console;
 
 _commander2.default.version(_package2.default.version).option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt).option('-h, --host [string]', 'Host to run Storybook').option('-s, --static-dir <dir-names>', 'Directory where to load static files from', _utils.parseList).option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').option('--dont-track', 'Do not send anonymous usage stats.').parse(process.argv);
 
+// The key is the field created in `program` variable for
+// each command line argument. Value is the env variable.
+(0, _utils.getEnvConfig)(_commander2.default, {
+  port: 'STORYBOOK_PORT',
+  host: 'STORYBOOK_HOST',
+  staticDir: 'STORYBOOK_STATIC_DIR',
+  configDir: 'STORYBOOK_CONFIG_DIR',
+  dontTrack: 'STORYBOOK_DO_NOT_TRACK'
+});
+
 if (_commander2.default.dontTrack) {
   (0, _track_usage.dontTrack)();
 }

dist/server/utils.js

@@ -3,8 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
 exports.parseList = parseList;
 exports.getHeadHtml = getHeadHtml;
+exports.getEnvConfig = getEnvConfig;
 
 var _path = require('path');
 
@@ -29,3 +35,13 @@ function getHeadHtml(configDirPath) {
 
   return headHtml;
 }
+
+function getEnvConfig(program, configEnv) {
+  (0, _keys2.default)(configEnv).forEach(function (fieldName) {
+    var envVarName = configEnv[fieldName];
+    var envVarValue = process.env[envVarName];
+    if (envVarValue) {
+      program[fieldName] = envVarValue; // eslint-disable-line no-param-reassign
+    }
+  });
+}

src/server/build.js

@@ -12,7 +12,7 @@ import baseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
-import { getHeadHtml, parseList } from './utils';
+import { getHeadHtml, parseList, getEnvConfig } from './utils';
 
 // avoid ESLint errors
 const logger = console;
@@ -24,6 +24,14 @@ program
   .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
   .parse(process.argv);
 
+// The key is the field created in `program` variable for
+// each command line argument. Value is the env variable.
+getEnvConfig(program, {
+  staticDir: 'STORYBOOK_STATIC_DIR',
+  outputDir: 'STORYBOOK_OUTPUT_DIR',
+  configDir: 'STORYBOOK_CONFIG_DIR',
+});
+
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';

src/server/index.js

@@ -6,7 +6,7 @@ import path from 'path';
 import fs from 'fs';
 import storybook from './middleware';
 import packageJson from '../../package.json';
-import { parseList } from './utils';
+import { parseList, getEnvConfig } from './utils';
 import { track, dontTrack } from './track_usage';
 
 const logger = console;
@@ -20,6 +20,15 @@ program
   .option('--dont-track', 'Do not send anonymous usage stats.')
   .parse(process.argv);
 
+// The key is the field created in `program` variable for
+// each command line argument. Value is the env variable.
+getEnvConfig(program, {
+  port: 'STORYBOOK_PORT',
+  host: 'STORYBOOK_HOST',
+  staticDir: 'STORYBOOK_STATIC_DIR',
+  configDir: 'STORYBOOK_CONFIG_DIR',
+  dontTrack: 'STORYBOOK_DO_NOT_TRACK',
+});
 
 if (program.dontTrack) {
   dontTrack();

src/server/utils.js

@@ -14,3 +14,13 @@ export function getHeadHtml(configDirPath) {
 
   return headHtml;
 }
+
+export function getEnvConfig(program, configEnv) {
+  Object.keys(configEnv).forEach(fieldName => {
+    const envVarName = configEnv[fieldName];
+    const envVarValue = process.env[envVarName];
+    if (envVarValue) {
+      program[fieldName] = envVarValue; // eslint-disable-line no-param-reassign
+    }
+  });
+}