diff --git a/dist/server/config/utils.js b/dist/server/config/utils.js
index b50deb88749f..04bab2f45550 100644
--- a/dist/server/config/utils.js
+++ b/dist/server/config/utils.js
@@ -5,6 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.nodeModulesPaths = exports.excludePaths = exports.includePaths = exports.OccurenceOrderPlugin = undefined;
 
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+exports.loadEnv = loadEnv;
+
 var _webpack = require('webpack');
 
 var _webpack2 = _interopRequireDefault(_webpack);
@@ -25,4 +35,23 @@ var includePaths = exports.includePaths = [_path2.default.resolve('./')];
 
 var excludePaths = exports.excludePaths = [_path2.default.resolve('./node_modules')];
 
+// Load environment variables starts with STORYBOOK_ to the client side.
+function loadEnv() {
+  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var defaultNodeEnv = options.production ? 'production' : 'development';
+  var env = {
+    'process.env.NODE_ENV': (0, _stringify2.default)(process.env.NODE_ENV || defaultNodeEnv)
+  };
+
+  (0, _keys2.default)(process.env).filter(function (name) {
+    return (/^STORYBOOK_/.test(name)
+    );
+  }).forEach(function (name) {
+    env['process.env.' + name] = (0, _stringify2.default)(process.env[name]);
+  });
+
+  return env;
+}
+
 var nodeModulesPaths = exports.nodeModulesPaths = _path2.default.resolve('./node_modules');
\ No newline at end of file
diff --git a/dist/server/config/webpack.config.js b/dist/server/config/webpack.config.js
index 41cfe74d9833..b0db11aa03d4 100644
--- a/dist/server/config/webpack.config.js
+++ b/dist/server/config/webpack.config.js
@@ -39,7 +39,7 @@ var config = {
     filename: 'static/[name].bundle.js',
     publicPath: '/'
   },
-  plugins: [new _utils.OccurenceOrderPlugin(), new _webpack2.default.HotModuleReplacementPlugin(), new _caseSensitivePathsWebpackPlugin2.default(), new _WatchMissingNodeModulesPlugin2.default(_utils.nodeModulesPaths)],
+  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?$/,
diff --git a/dist/server/config/webpack.config.prod.js b/dist/server/config/webpack.config.prod.js
index 42e3126ff5f9..fb26b847a630 100644
--- a/dist/server/config/webpack.config.prod.js
+++ b/dist/server/config/webpack.config.prod.js
@@ -38,7 +38,7 @@ var config = {
     // relative URLs works always.
     publicPath: ''
   },
-  plugins: [new _webpack2.default.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), new _webpack2.default.optimize.DedupePlugin(), new _webpack2.default.optimize.UglifyJsPlugin({
+  plugins: [new _webpack2.default.DefinePlugin((0, _utils.loadEnv)({ production: true })), new _webpack2.default.optimize.DedupePlugin(), new _webpack2.default.optimize.UglifyJsPlugin({
     compress: {
       screw_ie8: true,
       warnings: false
diff --git a/src/server/config/utils.js b/src/server/config/utils.js
index 71da98e65030..31afcb21e14d 100644
--- a/src/server/config/utils.js
+++ b/src/server/config/utils.js
@@ -15,4 +15,20 @@ export const excludePaths = [
   path.resolve('./node_modules'),
 ];
 
+// Load environment variables starts with STORYBOOK_ to the client side.
+export function loadEnv(options = {}) {
+  const defaultNodeEnv = options.production ? 'production' : 'development';
+  const env = {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
+  };
+
+  Object.keys(process.env)
+    .filter((name) => /^STORYBOOK_/.test(name))
+    .forEach((name) => {
+      env[`process.env.${name}`] = JSON.stringify(process.env[name]);
+    });
+
+  return env;
+}
+
 export const nodeModulesPaths = path.resolve('./node_modules');
diff --git a/src/server/config/webpack.config.js b/src/server/config/webpack.config.js
index f9481a0a64dd..f7ae029b760f 100644
--- a/src/server/config/webpack.config.js
+++ b/src/server/config/webpack.config.js
@@ -7,6 +7,7 @@ import {
   includePaths,
   excludePaths,
   nodeModulesPaths,
+  loadEnv,
 } from './utils';
 import babalLoaderConfig from './babel.js';
 
@@ -29,6 +30,7 @@ const config = {
     publicPath: '/',
   },
   plugins: [
+    new webpack.DefinePlugin(loadEnv()),
     new OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
diff --git a/src/server/config/webpack.config.prod.js b/src/server/config/webpack.config.prod.js
index f153fd11922a..63982e1ddf4f 100644
--- a/src/server/config/webpack.config.prod.js
+++ b/src/server/config/webpack.config.prod.js
@@ -1,6 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
-import { OccurenceOrderPlugin, includePaths, excludePaths } from './utils';
+import { OccurenceOrderPlugin, includePaths, excludePaths, loadEnv } from './utils';
 import babalLoaderConfig from './babel.prod.js';
 
 const entries = {
@@ -27,7 +27,7 @@ const config = {
     publicPath: '',
   },
   plugins: [
-    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
+    new webpack.DefinePlugin(loadEnv({ production: true })),
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({
       compress: {