Merge with the master.

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Changelog
 
+### v2.13.1
+14-September-2016
+
+* Fix 404 error when db file does not exist [PR449](https://github.com/kadirahq/react-storybook/pull/449)
+
 ### v2.13.0
 9-September-2016
 

dist/client/preview/config_api.js

@@ -18,6 +18,8 @@ var _ = require('./');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/* globals location */
+
 var ConfigApi = function () {
   function ConfigApi(_ref) {
     var channel = _ref.channel;
@@ -63,7 +65,16 @@ var ConfigApi = function () {
         try {
           _this._renderMain(loaders);
         } catch (error) {
-          _this._renderError(error);
+          if (module.hot.status() === 'apply') {
+            // We got this issue, after webpack fixed it and applying it.
+            // Therefore error message is displayed forever even it's being fixed.
+            // So, we'll detect it reload the page.
+            location.reload();
+          } else {
+            // If we are accessing the site, but the error is not fixed yet.
+            // There we can render the error.
+            _this._renderError(error);
+          }
         }
       };
 

dist/server/build.js

@@ -90,6 +90,10 @@ if (_commander2.default.staticDir) {
 // It should be enabled with the --enable-db for dev server
 if (_commander2.default.enableDb) {
   var dbPath = _commander2.default.dbPath || _path2.default.resolve(configDir, 'addon-db.json');
+  // create addon-db.json file if it's missing to avoid the 404 error
+  if (!_fs2.default.existsSync(dbPath)) {
+    _fs2.default.writeFileSync(dbPath, '{}');
+  }
   _shelljs2.default.cp(dbPath, outputDir);
 }
 

dist/server/config/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined;
+exports.nodeModulesPaths = exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined;
 
 var _keys = require('babel-runtime/core-js/object/keys');
 
@@ -52,4 +52,6 @@ function loadEnv() {
   });
 
   return env;
-}
+}
+
+var nodeModulesPaths = exports.nodeModulesPaths = _path2.default.resolve('./node_modules');

dist/server/config/webpack.config.js

@@ -16,6 +16,10 @@ var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plu
 
 var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin);
 
+var _WatchMissingNodeModulesPlugin = require('./WatchMissingNodeModulesPlugin');
+
+var _WatchMissingNodeModulesPlugin2 = _interopRequireDefault(_WatchMissingNodeModulesPlugin);
+
 var _utils = require('./utils');
 
 var _babel = require('./babel.js');
@@ -28,14 +32,14 @@ var 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')]
+    preview: [require.resolve('./polyfills'), require.resolve('./error_enhancements'), require.resolve('webpack-hot-middleware/client') + '?reload=true']
   },
   output: {
     path: _path2.default.join(__dirname, 'dist'),
     filename: 'static/[name].bundle.js',
     publicPath: '/'
   },
-  plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)()), new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default()],
+  plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)()), new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(_utils.nodeModulesPaths)],
   module: {
     loaders: [{
       test: /\.jsx?$/,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kadira/storybook",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "description": "React Storybook: Isolate React Component Development with Hot Reloading.",
   "repository": {
     "type": "git",

src/client/preview/config_api.js

@@ -1,3 +1,5 @@
+/* globals location */
+
 import {
   setInitialStory,
   setError,
@@ -38,7 +40,16 @@ export default class ConfigApi {
       try {
         this._renderMain(loaders);
       } catch (error) {
-        this._renderError(error);
+        if (module.hot.status() === 'apply') {
+          // We got this issue, after webpack fixed it and applying it.
+          // Therefore error message is displayed forever even it's being fixed.
+          // So, we'll detect it reload the page.
+          location.reload();
+        } else {
+          // If we are accessing the site, but the error is not fixed yet.
+          // There we can render the error.
+          this._renderError(error);
+        }
       }
     };
 

src/server/build.js

@@ -64,6 +64,10 @@ if (program.staticDir) {
 // 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);
 }
 

src/server/config/WatchMissingNodeModulesPlugin.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+// @remove-on-eject-end
+
+// This Webpack plugin ensures `npm install <library>` forces a project rebuild.
+// We’re not sure why this isn't Webpack's default behavior.
+// See https://github.com/facebookincubator/create-react-app/issues/186.
+
+function WatchMissingNodeModulesPlugin(nodeModulesPath) {
+  this.nodeModulesPath = nodeModulesPath;
+}
+
+WatchMissingNodeModulesPlugin.prototype.apply = function (compiler) {
+  compiler.plugin('emit', (compilation, callback) => {
+    const missingDeps = compilation.missingDependencies;
+    const nodeModulesPath = this.nodeModulesPath;
+
+    // If any missing files are expected to appear in node_modules...
+    if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
+      // ...tell webpack to watch node_modules recursively until they appear.
+      compilation.contextDependencies.push(nodeModulesPath);
+    }
+
+    callback();
+  });
+};
+
+module.exports = WatchMissingNodeModulesPlugin;

src/server/config/utils.js

@@ -30,3 +30,5 @@ export function loadEnv(options = {}) {
 
   return env;
 }
+
+export const nodeModulesPaths = path.resolve('./node_modules');

src/server/config/webpack.config.js

@@ -1,7 +1,14 @@
 import path from 'path';
 import webpack from 'webpack';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import { OccurenceOrderPlugin, includePaths, excludePaths, loadEnv } from './utils';
+import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
+import {
+  OccurenceOrderPlugin,
+  includePaths,
+  excludePaths,
+  nodeModulesPaths,
+  loadEnv,
+} from './utils';
 import babalLoaderConfig from './babel.js';
 
 const config = {
@@ -14,7 +21,7 @@ const config = {
     preview: [
       require.resolve('./polyfills'),
       require.resolve('./error_enhancements'),
-      require.resolve('webpack-hot-middleware/client'),
+      `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
     ],
   },
   output: {
@@ -27,6 +34,7 @@ const config = {
     new OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
+    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
   ],
   module: {
     loaders: [