Merge branch 'martinerko-feature-custom-config-folder'

README.md

@@ -123,7 +123,7 @@ There are many things you can do with React Storybook. You can explore them with
 * [API and configurations](docs/api.md)
 * [Guideline for writing stories](docs/guidelines.md)
 * [Known Issues](docs/known_issues.md)
-* [Contributing Guide](.github/CONTRIBUTING.md)
+* [How to Contribute](.github/CONTRIBUTING.md)
 * How React Storybook works (coming soon)
 
 ## Sample Apps

docs/api.md

@@ -7,6 +7,7 @@ You can configure React Storybook in different ways. We'll discuss them here.
 * [Command Line API](#command-line-api)
   * [Port](#port)
   * [Static Directory](#static-directory)
+  * [Configuration Directory](#configuration-directory)
 * [Story Creation API](#story-creation-api)
   * [Creating Stories](#creating-stories)
   * [Creating Actions](#creating-actions)
@@ -38,6 +39,16 @@ Here's how to tell React Storybook to use that directory to load static files:
 start-storybook -p 6977 -s ./public
 ```
 
+### Configuration Directory
+
+React Storybook uses `.storybook` directory as a default location for its [basic](#basic-configurations) and [custom webpack](#custom-webpack-configurations) configuration.
+
+Here's how to tell React Storybook to use a custom directory to load your configuration files:
+
+```
+start-storybook -p 6977 -s ./public -c ./storybook-config
+```
+
 ## Story Creation API
 
 We need to create stories to show your components inside React Storybook. For that, we need to use this API.

src/server/index.js

@@ -20,6 +20,7 @@ program
   .version(packageJson.version)
   .option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt)
   .option('-s, --static-dir [dir-name]', 'Directory where to load static files from')
+  .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
   .parse(process.argv);
 
 if (!program.port) {
@@ -41,6 +42,47 @@ if (program.staticDir) {
   }
 }
 
+// add config path to the entry
+const configDir = program.configDir || './.storybook';
+const configDirPath = path.resolve(configDir);
+
+// load babelrc file.
+const babelrcPath = path.resolve('./.babelrc');
+if (fs.existsSync(babelrcPath)) {
+  logger.info('=> Using custom .babelrc configurations.');
+  const babelrcContent = fs.readFileSync(babelrcPath);
+  try {
+    const babelrc = JSON.parse(babelrcContent);
+    config.module.loaders[0].query = babelrc;
+  } catch (ex) {
+    logger.error(`=> Error parsing .babelrc file: ${ex.message}`);
+    throw ex;
+  }
+}
+
+const storybookConfigPath = path.resolve(configDirPath, 'config.js');
+if (!fs.existsSync(storybookConfigPath)) {
+  logger.error(`=> Create a storybook config file in "${configDir}/config.js".\n`);
+  process.exit(0);
+}
+config.entry.preview.push(storybookConfigPath);
+
+// load custom webpack configurations
+const customConfigPath = path.resolve(configDirPath, 'webpack.config.js');
+if (fs.existsSync(customConfigPath)) {
+  const customConfig = require(customConfigPath);
+  if (customConfig.module.loaders) {
+    logger.info('=> Loading custom webpack loaders.');
+    config.module.loaders =
+      config.module.loaders.concat(customConfig.module.loaders);
+  }
+
+  if (customConfig.plugins) {
+    logger.info(' => Loading custom webpack plugins.');
+    config.plugins = config.plugins.concat(customConfig.plugins);
+  }
+}
+
 const compiler = webpack(config);
 const devMiddlewareOptions = {
   noInfo: true,

src/server/webpack.config.js

@@ -1,8 +1,5 @@
 import path from 'path';
 import webpack from 'webpack';
-import fs from 'fs';
-
-const logger = console;
 
 const config = {
   devtool: 'cheap-module-eval-source-map',
@@ -39,44 +36,4 @@ const config = {
   },
 };
 
-const configDir = path.resolve('./.storybook');
-
-// load babelrc file.
-const babelrcPath = path.resolve('./.babelrc');
-if (fs.existsSync(babelrcPath)) {
-  logger.info('=> Using custom .babelrc configurations.');
-  const babelrcContent = fs.readFileSync(babelrcPath);
-  try {
-    const babelrc = JSON.parse(babelrcContent);
-    config.module.loaders[0].query = babelrc;
-  } catch (ex) {
-    logger.error(`=> Error parsing .babelrc file: ${ex.message}`);
-    throw ex;
-  }
-}
-
-// add config path to the entry
-const storybookConfigPath = path.resolve(configDir, 'config.js');
-if (!fs.existsSync(storybookConfigPath)) {
-  logger.error('=> Create a storybook config file in ".storybook/config.js".\n');
-  process.exit(0);
-}
-config.entry.preview.push(storybookConfigPath);
-
-// load custom webpack configurations
-const customConfigPath = path.resolve(configDir, 'webpack.config.js');
-if (fs.existsSync(customConfigPath)) {
-  const customConfig = require(customConfigPath);
-  if (customConfig.module.loaders) {
-    logger.info('=> Loading custom webpack loaders.');
-    config.module.loaders =
-      config.module.loaders.concat(customConfig.module.loaders);
-  }
-
-  if (customConfig.plugins) {
-    logger.info(' => Loading custom webpack plugins.');
-    config.plugins = config.plugins.concat(customConfig.plugins);
-  }
-}
-
 export default config;