Create a static storybook builder

dist/client/ui/admin.js

@@ -94,7 +94,7 @@ function getIframe(data) {
 
   return _react2.default.createElement('iframe', {
     style: iframeStyle,
-    src: '/iframe?' + queryString
+    src: '/iframe.html?' + queryString
   });
 }
 

dist/server/build.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+'use strict';
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _commander = require('commander');
+
+var _commander2 = _interopRequireDefault(_commander);
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _shelljs = require('shelljs');
+
+var _shelljs2 = _interopRequireDefault(_shelljs);
+
+var _package = require('../../package.json');
+
+var _package2 = _interopRequireDefault(_package);
+
+var _webpackConfig = require('./webpack.config.prod');
+
+var _webpackConfig2 = _interopRequireDefault(_webpackConfig);
+
+var _config = require('./config');
+
+var _config2 = _interopRequireDefault(_config);
+
+var _index = require('./index.html');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _iframe = require('./iframe.html');
+
+var _iframe2 = _interopRequireDefault(_iframe);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+process.env.NODE_ENV = 'production';
+
+// avoid ESLint errors
+var logger = console;
+
+_commander2.default.version(_package2.default.version).option('-s, --static-dir [dir-name]', 'Directory where to load static files from').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);
+
+// create output directory (and the static dir) if not exists
+var outputDir = _commander2.default.outputDir || './storybook-static';
+_shelljs2.default.mkdir('-p', _path2.default.resolve(outputDir, 'static'));
+
+// Write both the storybook UI and IFRAME HTML files to destination path.
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'index.html'), (0, _index2.default)());
+_fs2.default.writeFileSync(_path2.default.resolve(outputDir, 'iframe.html'), (0, _iframe2.default)());
+
+// copy all static files
+if (_commander2.default.staticDir) {
+  if (!_fs2.default.existsSync(_commander2.default.staticDir)) {
+    logger.error('Error: no such directory to load static files: ' + _commander2.default.staticDir);
+    process.exit(-1);
+  }
+  logger.log('=> Copying static files from: ' + _commander2.default.staticDir);
+  _shelljs2.default.cp('-r', _commander2.default.staticDir + '/', outputDir);
+}
+
+// Build the webpack configuration using the `baseConfig`
+// custom `.babelrc` file and `webpack.config.js` files
+var configDir = _commander2.default.configDir || './.storybook';
+var config = (0, _config2.default)(_webpackConfig2.default, configDir);
+
+// compile all resources with webpack and write them to the disk.
+logger.log('Building storybook ...');
+(0, _webpack2.default)(config).compile(function (err, stats) {
+  for (var filename in stats.assets) {
+    if (!stats.assets.hasOwnProperty(filename)) {
+      continue;
+    }
+
+    var asset = stats.assets[filename];
+    if (asset.children && asset.children.length) {
+      var _source = asset.children[0]._value;
+      var _dstPath = _path2.default.resolve(outputDir, 'static/' + filename);
+      _fs2.default.writeFileSync(_dstPath, _source);
+      continue;
+    }
+
+    var source = asset._value;
+    var dstPath = _path2.default.resolve(outputDir, 'static/' + filename);
+    _fs2.default.writeFileSync(dstPath, source);
+  }
+});

dist/server/config.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+exports.default = function (baseConfig, configDir) {
+  var config = baseConfig;
+
+  // if user has a .babelrc file in current directory
+  // use that to extend webpack configurations
+  if (_fs2.default.existsSync('./.babelrc')) {
+    var content = _fs2.default.readFileSync('./.babelrc');
+    try {
+      var babelrc = JSON.parse(content);
+      config.module.loaders[0].query = babelrc;
+    } catch (e) {
+      logger.error('=> Error parsing .babelrc file: ' + e.message);
+      throw e;
+    }
+  }
+
+  // Check whether a config.js file exists inside the storybook
+  // config directory and throw an error if it's not.
+  var storybookConfigPath = _path2.default.resolve(configDir, 'config.js');
+  if (!_fs2.default.existsSync(storybookConfigPath)) {
+    var err = new Error('=> Create a storybook config file in "' + configDir + '/config.js".');
+    throw err;
+  }
+  config.entry.preview.push(storybookConfigPath);
+
+  // Check whether user has a custom webpack config file and
+  // return the (extended) base configuration if it's not available.
+  var customConfigPath = _path2.default.resolve(configDir, 'webpack.config.js');
+  if (!_fs2.default.existsSync(customConfigPath)) {
+    return config;
+  }
+
+  var customConfig = require(customConfigPath);
+  logger.info('=> Loading custom webpack config.');
+
+  return (0, _extends3.default)({}, customConfig, config, {
+    // We need to use our and custom plugins.
+    plugins: [].concat((0, _toConsumableArray3.default)(config.plugins), (0, _toConsumableArray3.default)(customConfig.plugins || [])),
+    module: (0, _extends3.default)({}, config.module, {
+      // We need to use our and custom loaders.
+      loaders: [].concat((0, _toConsumableArray3.default)(config.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
+    })
+  });
+};
+
+var _fs = require('fs');
+
+var _fs2 = _interopRequireDefault(_fs);
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// avoid ESLint errors
+var logger = console;
+
+// `baseConfig` is a webpack configuration bundled with storybook.
+// React Storybook will look in the `configDir` directory
+// (inside working directory) if a config path is not provided.

dist/server/index.js

@@ -1,14 +1,6 @@
 #!/usr/bin/env node
 'use strict';
 
-var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
-
-var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
-
-var _extends2 = require('babel-runtime/helpers/extends');
-
-var _extends3 = _interopRequireDefault(_extends2);
-
 var _webpack = require('webpack');
 
 var _webpack2 = _interopRequireDefault(_webpack);
@@ -45,6 +37,10 @@ var _webpack3 = require('./webpack.config');
 
 var _webpack4 = _interopRequireDefault(_webpack3);
 
+var _config = require('./config');
+
+var _config2 = _interopRequireDefault(_config);
+
 var _path = require('path');
 
 var _path2 = _interopRequireDefault(_path);
@@ -80,51 +76,15 @@ if (_commander2.default.staticDir) {
   }
 }
 
-// add config path to the entry
+// Build the webpack configuration using the `baseConfig`
+// custom `.babelrc` file and `webpack.config.js` files
 var configDir = _commander2.default.configDir || './.storybook';
-var configDirPath = _path2.default.resolve(configDir);
-
-// load babelrc file.
-var babelrcPath = _path2.default.resolve('./.babelrc');
-if (_fs2.default.existsSync(babelrcPath)) {
-  logger.info('=> Using custom .babelrc configurations.');
-  var babelrcContent = _fs2.default.readFileSync(babelrcPath);
-  try {
-    var babelrc = JSON.parse(babelrcContent);
-    _webpack4.default.module.loaders[0].query = babelrc;
-  } catch (ex) {
-    logger.error('=> Error parsing .babelrc file: ' + ex.message);
-    throw ex;
-  }
-}
-
-var storybookConfigPath = _path2.default.resolve(configDirPath, 'config.js');
-if (!_fs2.default.existsSync(storybookConfigPath)) {
-  logger.error('=> Create a storybook config file in "' + configDir + '/config.js".\n');
-  process.exit(0);
-}
-_webpack4.default.entry.preview.push(storybookConfigPath);
-
-// load custom webpack configurations
-var customConfigPath = _path2.default.resolve(configDirPath, 'webpack.config.js');
-var finalConfig = _webpack4.default;
-if (_fs2.default.existsSync(customConfigPath)) {
-  var customConfig = require(customConfigPath);
-  logger.info('=> Loading custom webpack config.');
-  finalConfig = (0, _extends3.default)({}, customConfig, _webpack4.default, {
-    // We need to use our and custom plugins.
-    plugins: [].concat((0, _toConsumableArray3.default)(_webpack4.default.plugins), (0, _toConsumableArray3.default)(customConfig.plugins || [])),
-    module: (0, _extends3.default)({}, _webpack4.default.module, {
-      // We need to use our and custom loaders.
-      loaders: [].concat((0, _toConsumableArray3.default)(_webpack4.default.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
-    })
-  });
-}
+var config = (0, _config2.default)(_webpack4.default, configDir);
 
-var compiler = (0, _webpack2.default)(finalConfig);
+var compiler = (0, _webpack2.default)(config);
 var devMiddlewareOptions = {
   noInfo: true,
-  publicPath: finalConfig.output.publicPath
+  publicPath: config.output.publicPath
 };
 app.use((0, _webpackDevMiddleware2.default)(compiler, devMiddlewareOptions));
 app.use((0, _webpackHotMiddleware2.default)(compiler));
@@ -133,7 +93,7 @@ app.get('/', function (req, res) {
   res.send((0, _index2.default)());
 });
 
-app.get('/iframe', function (req, res) {
+app.get('/iframe.html', function (req, res) {
   res.send((0, _iframe2.default)());
 });
 

dist/server/webpack.config.prod.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _path = require('path');
+
+var _path2 = _interopRequireDefault(_path);
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var config = {
+  devtool: '#cheap-module-source-map',
+  entry: {
+    admin: [_path2.default.resolve(__dirname, '../client/init_admin')],
+    preview: [_path2.default.resolve(__dirname, '../client/init_preview')]
+  },
+  output: {
+    filename: '[name].bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [new _webpack2.default.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), new _webpack2.default.optimize.UglifyJsPlugin(), new _webpack2.default.optimize.OccurenceOrderPlugin()],
+  module: {
+    loaders: [{
+      test: /\.jsx?$/,
+      loader: 'babel',
+      query: { presets: ['react', 'es2015', 'stage-2'] },
+      exclude: [_path2.default.resolve('./node_modules'), _path2.default.resolve(__dirname, 'node_modules')],
+      include: [_path2.default.resolve('./'), __dirname]
+    }]
+  }
+};
+
+exports.default = config;

package.json

@@ -36,6 +36,7 @@
     "page-bus": "^3.0.1",
     "query-string": "^3.0.3",
     "redbox-react": "^1.2.2",
+    "shelljs": "^0.6.0",
     "stack-source-map": "^1.0.4",
     "uuid": "^2.0.1",
     "webpack": "^1.12.11",
@@ -67,6 +68,7 @@
   },
   "bin": {
     "start-storybook": "./dist/server/index.js",
+    "build-storybook": "./dist/server/build.js",
     "storybook-server": "./dist/server/index.js"
   }
 }

src/client/ui/admin.js

@@ -60,7 +60,7 @@ export function getIframe(data) {
   return (
     <iframe
       style={iframeStyle}
-      src={`/iframe?${queryString}`}
+      src={`/iframe.html?${queryString}`}
     />
   );
 }