use HtmlWebpackPlugin & custom webpack.config.js in cra-kitchen-sink

app/react/package.json

@@ -50,6 +50,7 @@
     "glamor": "^2.20.40",
     "glamorous": "^4.1.2",
     "global": "^4.3.2",
+    "html-webpack-plugin": "^2.30.1",
     "json-loader": "^0.5.4",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.1",

app/react/src/server/build.js

@@ -9,9 +9,7 @@ import shelljs from 'shelljs';
 import packageJson from '../../package.json';
 import getBaseConfig from './config/webpack.config.prod';
 import loadConfig from './config';
-import getIndexHtml from './index.html';
-import getIframeHtml from './iframe.html';
-import { getPreviewHeadHtml, getManagerHeadHtml, parseList, getEnvConfig } from './utils';
+import { parseList, getEnvConfig } from './utils';
 
 process.env.NODE_ENV = process.env.NODE_ENV || 'production';
 
@@ -86,19 +84,4 @@ webpack(config).run((err, stats) => {
     stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
     process.exit(1);
   }
-
-  const data = {
-    publicPath: config.output.publicPath,
-    assets: stats.toJson().assetsByChunkName,
-  };
-
-  // Write both the storybook UI and IFRAME HTML files to destination path.
-  fs.writeFileSync(
-    path.resolve(outputDir, 'index.html'),
-    getIndexHtml({ ...data, headHtml: getManagerHeadHtml(configDir) })
-  );
-  fs.writeFileSync(
-    path.resolve(outputDir, 'iframe.html'),
-    getIframeHtml({ ...data, headHtml: getPreviewHeadHtml(configDir) })
-  );
 });

app/react/src/server/config/utils.js

@@ -23,11 +23,15 @@ export function loadEnv(options = {}) {
     PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
   };
 
-  Object.keys(process.env).filter(name => /^STORYBOOK_/.test(name)).forEach(name => {
-    env[name] = JSON.stringify(process.env[name]);
-  });
+  Object.keys(process.env)
+    .filter(name => /^STORYBOOK_/.test(name))
+    .forEach(name => {
+      env[name] = JSON.stringify(process.env[name]);
+    });
 
   return {
     'process.env': env,
   };
 }
+
+export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

app/react/src/server/config/webpack.config.js

@@ -1,9 +1,20 @@
 import path from 'path';
 import webpack from 'webpack';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
-import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
+
+import {
+  getConfigDir,
+  includePaths,
+  excludePaths,
+  nodeModulesPaths,
+  loadEnv,
+  nodePaths,
+} from './utils';
 import babelLoaderConfig from './babel';
+import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
+import { version } from '../../../package.json';
 
 export default function() {
   const config = {
@@ -22,6 +33,23 @@ export default function() {
       publicPath: '/',
     },
     plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        chunks: ['manager'],
+        data: {
+          managerHead: getManagerHeadHtml(getConfigDir()),
+          version,
+        },
+        template: require.resolve('../index.html.ejs'),
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'iframe.html',
+        excludeChunks: ['manager'],
+        data: {
+          previewHead: getPreviewHeadHtml(getConfigDir()),
+        },
+        template: require.resolve('../iframe.html.ejs'),
+      }),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),

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

@@ -1,7 +1,10 @@
 import path from 'path';
 import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
 import babelLoaderConfig from './babel.prod';
-import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
+import { version } from '../../../package.json';
 
 export default function() {
   const entries = {
@@ -23,6 +26,23 @@ export default function() {
       publicPath: '',
     },
     plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'index.html',
+        chunks: ['manager'],
+        data: {
+          managerHead: getManagerHeadHtml(getConfigDir()),
+          version,
+        },
+        template: require.resolve('../index.html.ejs'),
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'iframe.html',
+        excludeChunks: ['manager'],
+        data: {
+          previewHead: getPreviewHeadHtml(getConfigDir()),
+        },
+        template: require.resolve('../iframe.html.ejs'),
+      }),
       new webpack.DefinePlugin(loadEnv({ production: true })),
       new webpack.optimize.UglifyJsPlugin({
         compress: {

app/react/src/server/iframe.html.ejs

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <base target="_parent">
+    <script>
+        if (window.parent !== window) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+        }
+    </script>
+    <title>Storybook</title>
+    <%= htmlWebpackPlugin.options.data.previewHead %>
+</head>
+<body>
+<div id="root"></div>
+<div id="error-display"></div>
+</body>
+</html>

app/react/src/server/index.html.ejs

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="storybook-version" content="<%= htmlWebpackPlugin.options.data.version %>">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>Storybook</title>
+    <style>
+        /*
+          When resizing panels, the drag event breaks if the cursor
+          moves over the iframe. Add the 'dragging' class to the body
+          at drag start and remove it when the drag ends.
+         */
+        .dragging iframe {
+            pointer-events: none;
+        }
+
+        /* Styling the fuzzy search box placeholders */
+        .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: #ddd;
+            font-size: 16px;
+        }
+
+        .searchBox::-moz-placeholder { /* Firefox 19+ */
+            color: #ddd;
+            font-size: 16px;
+        }
+
+        .searchBox:focus{
+            border-color: #EEE !important;
+        }
+
+        .btn:hover{
+            background-color: #eee
+        }
+    </style>
+    <%= htmlWebpackPlugin.options.data.managerHead %>
+
+</head>
+<body style="margin: 0;">
+    <div id="root"></div>
+</body>
+</html>