Enable the addon-db with an env variable

src/client/manager/provider.js

@@ -16,7 +16,7 @@ export default class ReactProvider extends Provider {
     this.channel = createChannel({ key: this.dataId });
     addons.setChannel(this.channel);
     this.database = addons.getDatabase();
-    if (!this.database) {
+    if (!this.database && process.env.STORYBOOK_ENABLE_DB) {
       const bundled = process.env.NODE_ENV === 'production';
       if (bundled) {
         this.database = createDatabase({ url: 'addon-db.json', bundled });

src/server/build.js

@@ -6,7 +6,7 @@ import path from 'path';
 import fs from 'fs';
 import shelljs from 'shelljs';
 import packageJson from '../../package.json';
-import baseConfig from './config/webpack.config.prod';
+import getBaseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
@@ -34,20 +34,32 @@ getEnvConfig(program, {
   configDir: 'STORYBOOK_CONFIG_DIR',
 });
 
-// Build the webpack configuration using the `baseConfig`
-// custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';
-const config = loadConfig('PRODUCTION', baseConfig, configDir);
-
-const publicPath = config.output.publicPath;
-
 const outputDir = program.outputDir || './storybook-static';
-config.output.path = outputDir;
 
 // create output directory (and the static dir) if not exists
 shelljs.rm('-rf', outputDir);
 shelljs.mkdir('-p', path.resolve(outputDir));
 
+// The addon database service is disabled by default for now
+// It should be enabled with the --enable-db for dev server
+if (program.enableDb) {
+  // NOTE enables database on client
+  process.env.STORYBOOK_ENABLE_DB = 1;
+  const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json');
+  // create addon-db.json file if it's missing to avoid the 404 error
+  if (!fs.existsSync(dbPath)) {
+    fs.writeFileSync(dbPath, '{}');
+  }
+  shelljs.cp(dbPath, outputDir);
+}
+
+// Build the webpack configuration using the `baseConfig`
+// custom `.babelrc` file and `webpack.config.js` files
+// NOTE changes to env should be done before calling `getBaseConfig`
+const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+config.output.path = outputDir;
+
 // copy all static files
 if (program.staticDir) {
   program.staticDir.forEach(dir => {
@@ -60,19 +72,9 @@ if (program.staticDir) {
   });
 }
 
-// The addon database service is disabled by default for now
-// It should be enabled with the --enable-db for dev server
-if (program.enableDb) {
-  const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json');
-  // create addon-db.json file if it's missing to avoid the 404 error
-  if (!fs.existsSync(dbPath)) {
-    fs.writeFileSync(dbPath, '{}');
-  }
-  shelljs.cp(dbPath, outputDir);
-}
-
 // Write both the storybook UI and IFRAME HTML files to destination path.
 const headHtml = getHeadHtml(configDir);
+const publicPath = config.output.publicPath;
 fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath));
 fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath));
 

src/server/config/webpack.config.js

@@ -11,48 +11,50 @@ import {
 } from './utils';
 import babalLoaderConfig from './babel.js';
 
-const config = {
-  devtool: '#cheap-module-eval-source-map',
-  entry: {
-    manager: [
-      require.resolve('./polyfills'),
-      require.resolve('../../client/manager'),
-    ],
-    preview: [
-      require.resolve('./polyfills'),
-      require.resolve('./error_enhancements'),
-      `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
+export default function () {
+  const config = {
+    devtool: '#cheap-module-eval-source-map',
+    entry: {
+      manager: [
+        require.resolve('./polyfills'),
+        require.resolve('../../client/manager'),
+      ],
+      preview: [
+        require.resolve('./polyfills'),
+        require.resolve('./error_enhancements'),
+        `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
+      ],
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'static/[name].bundle.js',
+      publicPath: '/',
+    },
+    plugins: [
+      new webpack.DefinePlugin(loadEnv()),
+      new OccurenceOrderPlugin(),
+      new webpack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
     ],
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'static/[name].bundle.js',
-    publicPath: '/',
-  },
-  plugins: [
-    new webpack.DefinePlugin(loadEnv()),
-    new OccurenceOrderPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
-  ],
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        loader: require.resolve('babel-loader'),
-        query: babalLoaderConfig,
-        include: includePaths,
-        exclude: excludePaths,
+    module: {
+      loaders: [
+        {
+          test: /\.jsx?$/,
+          loader: require.resolve('babel-loader'),
+          query: babalLoaderConfig,
+          include: includePaths,
+          exclude: excludePaths,
+        },
+      ],
+    },
+    resolve: {
+      alias: {
+        // This is to add addon support for NPM2
+        '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'),
       },
-    ],
-  },
-  resolve: {
-    alias: {
-      // This is to add addon support for NPM2
-      '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'),
     },
-  },
-};
+  };
 
-export default config;
+  return config;
+}

src/server/config/webpack.config.prod.js

@@ -3,69 +3,71 @@ import webpack from 'webpack';
 import { OccurenceOrderPlugin, includePaths, excludePaths, loadEnv } from './utils';
 import babalLoaderConfig from './babel.prod.js';
 
-const entries = {
-  preview: [
-    require.resolve('./polyfills'),
-  ],
-  manager: [
-    require.resolve('./polyfills'),
-    path.resolve(__dirname, '../../client/manager'),
-  ],
-};
+export default function () {
+  const entries = {
+    preview: [
+      require.resolve('./polyfills'),
+    ],
+    manager: [
+      require.resolve('./polyfills'),
+      path.resolve(__dirname, '../../client/manager'),
+    ],
+  };
 
-const config = {
-  bail: true,
-  devtool: '#cheap-module-source-map',
-  entry: entries,
-  output: {
-    filename: 'static/[name].bundle.js',
-    // Here we set the publicPath to ''.
-    // This allows us to deploy storybook into subpaths like GitHub pages.
-    // This works with css and image loaders too.
-    // This is working for storybook since, we don't use pushState urls and
-    // relative URLs works always.
-    publicPath: '',
-  },
-  plugins: [
-    new webpack.DefinePlugin(loadEnv({ production: true })),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        screw_ie8: true,
-        warnings: false,
-      },
-      mangle: {
-        screw_ie8: true,
-      },
-      output: {
-        comments: false,
-        screw_ie8: true,
-      },
-    }),
-  ],
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        loader: require.resolve('babel-loader'),
-        query: babalLoaderConfig,
-        include: includePaths,
-        exclude: excludePaths,
-      },
+  const config = {
+    bail: true,
+    devtool: '#cheap-module-source-map',
+    entry: entries,
+    output: {
+      filename: 'static/[name].bundle.js',
+      // Here we set the publicPath to ''.
+      // This allows us to deploy storybook into subpaths like GitHub pages.
+      // This works with css and image loaders too.
+      // This is working for storybook since, we don't use pushState urls and
+      // relative URLs works always.
+      publicPath: '',
+    },
+    plugins: [
+      new webpack.DefinePlugin(loadEnv({ production: true })),
+      new webpack.optimize.DedupePlugin(),
+      new webpack.optimize.UglifyJsPlugin({
+        compress: {
+          screw_ie8: true,
+          warnings: false,
+        },
+        mangle: {
+          screw_ie8: true,
+        },
+        output: {
+          comments: false,
+          screw_ie8: true,
+        },
+      }),
     ],
-  },
-  resolve: {
-    alias: {
-      // This is to add addon support for NPM2
-      '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'),
+    module: {
+      loaders: [
+        {
+          test: /\.jsx?$/,
+          loader: require.resolve('babel-loader'),
+          query: babalLoaderConfig,
+          include: includePaths,
+          exclude: excludePaths,
+        },
+      ],
+    },
+    resolve: {
+      alias: {
+        // This is to add addon support for NPM2
+        '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'),
+      },
     },
-  },
-};
+  };
 
-// Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
-// But webpack 1 has it. That's why we do this.
-if (OccurenceOrderPlugin) {
-  config.plugins.unshift(new OccurenceOrderPlugin());
-}
+  // Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
+  // But webpack 1 has it. That's why we do this.
+  if (OccurenceOrderPlugin) {
+    config.plugins.unshift(new OccurenceOrderPlugin());
+  }
 
-export default config;
+  return config;
+}

src/server/index.js

@@ -68,15 +68,20 @@ if (program.staticDir) {
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';
-app.use(storybook(configDir));
 
 // The addon database service is disabled by default for now
 // It should be enabled with the --enable-db for dev server
 if (program.enableDb) {
+  // NOTE enables database on client
+  process.env.STORYBOOK_ENABLE_DB = 1;
   const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json');
   app.use('/db', datastore(dbPath));
 }
 
+// NOTE changes to env should be done before calling `getBaseConfig`
+// `getBaseConfig` function which is called inside the middleware
+app.use(storybook(configDir));
+
 app.listen(...listenAddr, function (error) {
   if (error) {
     throw error;

src/server/middleware.js

@@ -2,16 +2,16 @@ import { Router } from 'express';
 import webpack from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
-import baseConfig from './config/webpack.config';
+import getBaseConfig from './config/webpack.config';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
 import { getHeadHtml } from './utils';
 
 export default function (configDir) {
-  // Build the webpack configuration using the `baseConfig`
+  // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', baseConfig, configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
 
   // remove the leading '/'
   let publicPath = config.output.publicPath;