diff --git a/dist/server/middleware.js b/dist/server/middleware.js
new file mode 100644
index 000000000000..b7216a521052
--- /dev/null
+++ b/dist/server/middleware.js
@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = function (configDir) {
+  // Build the webpack configuration using the `baseConfig`
+  // custom `.babelrc` file and `webpack.config.js` files
+  var config = (0, _config2.default)('DEVELOPMENT', _webpack4.default, configDir);
+  var compiler = (0, _webpack2.default)(config);
+  var devMiddlewareOptions = {
+    noInfo: true,
+    publicPath: config.output.publicPath
+  };
+
+  var router = new _express.Router();
+  router.use((0, _webpackDevMiddleware2.default)(compiler, devMiddlewareOptions));
+  router.use((0, _webpackHotMiddleware2.default)(compiler));
+
+  router.get('/', function (req, res) {
+    res.send((0, _index2.default)());
+  });
+
+  var headHtml = (0, _utils.getHeadHtml)(configDir);
+  router.get('/iframe.html', function (req, res) {
+    res.send((0, _iframe2.default)(headHtml));
+  });
+
+  return router;
+};
+
+var _express = require('express');
+
+var _webpack = require('webpack');
+
+var _webpack2 = _interopRequireDefault(_webpack);
+
+var _webpackDevMiddleware = require('webpack-dev-middleware');
+
+var _webpackDevMiddleware2 = _interopRequireDefault(_webpackDevMiddleware);
+
+var _webpackHotMiddleware = require('webpack-hot-middleware');
+
+var _webpackHotMiddleware2 = _interopRequireDefault(_webpackHotMiddleware);
+
+var _webpack3 = require('./webpack.config');
+
+var _webpack4 = _interopRequireDefault(_webpack3);
+
+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);
+
+var _utils = require('./utils');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
\ No newline at end of file
diff --git a/src/server/index.js b/src/server/index.js
index 2737fceb9a95..e1e6de04027f 100755
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -1,18 +1,11 @@
 #!/usr/bin/env node
 
-import webpack from 'webpack';
-import webpackDevMiddleware from 'webpack-dev-middleware';
-import webpackHotMiddleware from 'webpack-hot-middleware';
-import getIndexHtml from './index.html';
-import getIframeHtml from './iframe.html';
 import express from 'express';
 import program from 'commander';
-import packageJson from '../../package.json';
-import baseConfig from './webpack.config';
-import loadConfig from './config';
 import path from 'path';
 import fs from 'fs';
-import { getHeadHtml } from './utils';
+import storybook from './middleware';
+import packageJson from '../../package.json';
 
 const logger = console;
 
@@ -53,24 +46,7 @@ if (program.staticDir) {
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';
-const config = loadConfig('DEVELOPMENT', baseConfig, configDir);
-
-const compiler = webpack(config);
-const devMiddlewareOptions = {
-  noInfo: true,
-  publicPath: config.output.publicPath,
-};
-app.use(webpackDevMiddleware(compiler, devMiddlewareOptions));
-app.use(webpackHotMiddleware(compiler));
-
-app.get('/', function (req, res) {
-  res.send(getIndexHtml());
-});
-
-const headHtml = getHeadHtml(configDir);
-app.get('/iframe.html', function (req, res) {
-  res.send(getIframeHtml(headHtml));
-});
+app.use(storybook(configDir));
 
 app.listen(...listenAddr, function (error) {
   if (error) {
diff --git a/src/server/middleware.js b/src/server/middleware.js
new file mode 100644
index 000000000000..8cb8e81d1e48
--- /dev/null
+++ b/src/server/middleware.js
@@ -0,0 +1,35 @@
+import { Router } from 'express';
+import webpack from 'webpack';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import baseConfig from './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`
+  // custom `.babelrc` file and `webpack.config.js` files
+  const config = loadConfig('DEVELOPMENT', baseConfig, configDir);
+  const compiler = webpack(config);
+  const devMiddlewareOptions = {
+    noInfo: true,
+    publicPath: config.output.publicPath,
+  };
+
+  const router = new Router();
+  router.use(webpackDevMiddleware(compiler, devMiddlewareOptions));
+  router.use(webpackHotMiddleware(compiler));
+
+  router.get('/', function (req, res) {
+    res.send(getIndexHtml());
+  });
+
+  const headHtml = getHeadHtml(configDir);
+  router.get('/iframe.html', function (req, res) {
+    res.send(getIframeHtml(headHtml));
+  });
+
+  return router;
+}