Merge pull request #3919 from storybooks/tech/replace-html-webpack-plugin

CHANGE html-webpack-plugin for generate-page-plugin

app/angular/src/server/angular-cli_config.js

@@ -80,7 +80,9 @@ export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions
   // cliStyleConfig.entry adds global style files to the webpack context
   const entry = {
     ...baseConfig.entry,
-    ...cliStyleConfig.entry,
+    iframe: []
+      .concat(baseConfig.entry.iframe)
+      .concat(Object.values(cliStyleConfig.entry).reduce((acc, item) => acc.concat(item), [])),
   };
 
   const mod = {

app/react-native/package.json

@@ -47,10 +47,11 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "commander": "^2.17.0",
     "dotenv-webpack": "^1.5.7",
+    "ejs": "^2.6.1",
     "express": "^4.16.3",
     "find-cache-dir": "^2.0.0",
+    "generate-page-webpack-plugin": "^1.0.0",
     "global": "^4.3.2",
-    "html-webpack-plugin": "^3.2.0",
     "json5": "^1.0.1",
     "prop-types": "^15.6.2",
     "raw-loader": "^0.5.1",

app/react-native/src/server/config.js

@@ -116,7 +116,7 @@ export default function(configType, baseConfig, projectDir, configDir) {
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType, defaultConfig);
+    return customConfig(config, configType, defaultConfig, configDir);
   }
 
   logger.info('=> Loading custom webpack config.');

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

@@ -4,54 +4,73 @@ import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { indexHtmlPath } from '@storybook/core/server';
-import { version } from '../../../package.json';
-import { includePaths, excludePaths, nodeModulesPaths } from './utils';
 
-const getConfig = options => ({
-  mode: 'development',
-  devtool: '#cheap-module-eval-source-map',
-  entry: {
-    manager: [require.resolve('../../manager')],
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'static/[name].bundle.js',
-    publicPath: '/',
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      data: {
-        version,
-      },
-      template: indexHtmlPath,
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new CaseSensitivePathsPlugin(),
-    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
-    new webpack.DefinePlugin(getEnvironment().webpack),
-    new Dotenv({ silent: true }),
-    new webpack.DefinePlugin({
-      storybookOptions: JSON.stringify(options),
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        loader: require.resolve('babel-loader'),
-        query: require('./babel.js'), // eslint-disable-line
-        include: includePaths,
-        exclude: excludePaths,
-      },
-      {
-        test: /\.md$/,
-        loader: require.resolve('raw-loader'),
-      },
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+
+import { getManagerHeadHtml } from '@storybook/core/server';
+
+import { includePaths, excludePaths, nodeModulesPaths } from './utils';
+import { version } from '../../../package.json';
+
+const getConfig = options => {
+  const entriesMeta = {
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
+    },
+  };
+
+  return {
+    mode: 'development',
+    devtool: '#cheap-module-eval-source-map',
+    entry: {
+      manager: [require.resolve('../../manager')],
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      filename: 'static/[name].bundle.js',
+      publicPath: '/',
+    },
+    plugins: [
+      new GeneratePagePlugin(
+        {
+          template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
+          // eslint-disable-next-line global-require
+          parser: require('ejs'),
+          filename: entry => (entry === 'manager' ? 'index' : entry),
+        },
+        {
+          data: { version },
+          headHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
+          bodyHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
+        }
+      ),
+      new webpack.HotModuleReplacementPlugin(),
+      new CaseSensitivePathsPlugin(),
+      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      new webpack.DefinePlugin(getEnvironment().webpack),
+      new Dotenv({ silent: true }),
+      new webpack.DefinePlugin({
+        storybookOptions: JSON.stringify(options),
+      }),
     ],
-  },
-});
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          loader: require.resolve('babel-loader'),
+          query: require('./babel.js'), // eslint-disable-line
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.md$/,
+          loader: require.resolve('raw-loader'),
+        },
+      ],
+    },
+  };
+};
 
 export default getConfig;

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

@@ -2,8 +2,9 @@ import path from 'path';
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { indexHtmlPath } from '@storybook/core/server';
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+
+import { getManagerHeadHtml } from '@storybook/core/dist/server/utils';
 import { version } from '../../../package.json';
 import { includePaths, excludePaths } from './utils';
 
@@ -26,13 +27,18 @@ const getConfig = options => {
       publicPath: '/',
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        data: {
-          version,
+      new GeneratePagePlugin(
+        {
+          template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
+          // eslint-disable-next-line global-require
+          parser: require('ejs'),
+          filename: entry => (entry === 'manager' ? 'index' : entry),
         },
-        template: indexHtmlPath,
-      }),
+        {
+          data: { version },
+          headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
+        }
+      ),
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': '"production"',
         storybookOptions: JSON.stringify(options),

app/react-native/src/server/middleware.js

@@ -20,7 +20,8 @@ function getMiddleware(configDir) {
   return () => {};
 }
 
-export default function({ projectDir, configDir, ...options }) {
+export default function(options) {
+  const { projectDir, configDir } = options;
   // Build the webpack configuration using the `baseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
   const environment = options.environment || 'DEVELOPMENT';

examples/cra-kitchen-sink/.storybook/config.js

@@ -11,7 +11,7 @@ setOptions({
   sortStoriesByKind: false,
   hierarchySeparator: /\./,
   hierarchyRootSeparator: /\|/,
-  enableShortcuts: false,
+  enableShortcuts: true,
 });
 
 function loadStories() {

lib/core/package.json

@@ -38,12 +38,13 @@
     "core-js": "^2.5.7",
     "css-loader": "^1.0.0",
     "dotenv-webpack": "^1.5.7",
+    "ejs": "^2.6.1",
     "emotion": "^9.2.6",
     "express": "^4.16.3",
     "file-loader": "^1.1.11",
     "find-cache-dir": "^2.0.0",
+    "generate-page-webpack-plugin": "^1.0.0",
     "global": "^4.3.2",
-    "html-webpack-plugin": "^3.2.0",
     "interpret": "^1.1.0",
     "json5": "^1.0.1",
     "postcss-flexbugs-fixes": "^4.1.0",

lib/core/server.js

@@ -4,7 +4,4 @@ const serverUtils = require('./dist/server/utils');
 const buildStatic = require('./dist/server/build-static');
 const buildDev = require('./dist/server/build-dev');
 
-module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils, {
-  indexHtmlPath: require.resolve('./src/server/index.html.ejs'),
-  iframeHtmlPath: require.resolve('./src/server/iframe.html.ejs'),
-});
+module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils);

lib/core/src/server/config/utils.js

@@ -37,7 +37,7 @@ export function loadEnv(options = {}) {
 }
 
 export function getEntries(configDir) {
-  const preview = [require.resolve('./polyfills'), require.resolve('./globals')];
+  const iframe = [require.resolve('./polyfills'), require.resolve('./globals')];
   const manager = [require.resolve('./polyfills'), require.resolve('../../client/manager')];
 
   // Check whether a config.{ext} file exists inside the storybook
@@ -47,7 +47,7 @@ export function getEntries(configDir) {
     throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`);
   }
 
-  preview.push(require.resolve(storybookConfigPath));
+  iframe.push(require.resolve(storybookConfigPath));
 
   // Check whether addons.{ext} file exists inside the storybook.
   const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
@@ -56,5 +56,5 @@ export function getEntries(configDir) {
     manager.unshift(storybookCustomAddonsPath);
   }
 
-  return { preview, manager };
+  return { iframe, manager };
 }

lib/core/src/server/config/webpack.config.js

@@ -2,12 +2,10 @@ import path from 'path';
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-
-import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
+import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
 
 import {
   includePaths,
@@ -21,13 +19,23 @@ import { version } from '../../../package.json';
 
 export default ({ configDir, quiet, babelOptions }) => {
   const entries = getEntries(configDir, true);
+  const entriesMeta = {
+    iframe: {
+      headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
+      bodyHtmlSnippet: getPreviewBodyHtml(),
+    },
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
+    },
+  };
+
   return {
     mode: 'development',
     devtool: 'cheap-module-source-map',
     entry: {
       ...entries,
-      preview: [
-        ...entries.preview,
+      iframe: [
+        ...entries.iframe,
         `${require.resolve('webpack-hot-middleware/client')}?reload=true`,
       ],
     },
@@ -42,26 +50,21 @@ export default ({ configDir, quiet, babelOptions }) => {
       publicPath: '',
     },
     plugins: [
-      new HtmlWebpackPlugin({
-        filename: 'index.html',
-        chunks: ['manager'],
-        chunksSortMode: 'none',
-        data: {
-          managerHead: getManagerHeadHtml(configDir),
-          version,
+      new GeneratePagePlugin(
+        {
+          template: require.resolve('../templates/index.html.ejs'),
+          // eslint-disable-next-line global-require
+          parser: require('ejs'),
+          filename: entry => (entry === 'manager' ? 'index' : entry),
         },
-        template: require.resolve('../index.html.ejs'),
-      }),
-      new HtmlWebpackPlugin({
-        filename: 'iframe.html',
-        excludeChunks: ['manager'],
-        chunksSortMode: 'none',
-        data: {
-          previewHead: getPreviewHeadHtml(configDir),
-        },
-        template: require.resolve('../iframe.html.ejs'),
-      }),
-      new InterpolateHtmlPlugin(process.env),
+        {
+          data: { version },
+          headHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
+          bodyHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
+        }
+      ),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),

lib/core/src/server/config/webpack.config.prod.js

@@ -1,92 +1,100 @@
 import webpack from 'webpack';
 import { getEnvironment } from 'universal-dotenv';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+import GeneratePagePlugin from 'generate-page-webpack-plugin';
 
 import { version } from '../../../package.json';
-import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
+import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
 
 import { includePaths, excludePaths, loadEnv, nodePaths, getEntries } from './utils';
 
-export default ({ configDir, babelOptions }) => ({
-  mode: 'production',
-  bail: true,
-  devtool: '#cheap-module-source-map',
-  entry: getEntries(configDir),
-  output: {
-    filename: 'static/[name].[chunkhash].bundle.js',
-    // Here we set the publicPath to ''.
-    // This allows us to deploy storybook into subpaths like GitHub pages.
-    // This works with css and image loaders too.
-    // This is working for storybook since, we don't use pushState urls and
-    // relative URLs works always.
-    publicPath: '',
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      chunks: ['manager', 'runtime~manager'],
-      chunksSortMode: 'none',
-      data: {
-        managerHead: getManagerHeadHtml(configDir),
-        version,
-      },
-      template: require.resolve('../index.html.ejs'),
-    }),
-    new HtmlWebpackPlugin({
-      filename: 'iframe.html',
-      excludeChunks: ['manager', 'runtime~manager'],
-      chunksSortMode: 'none',
-      data: {
-        previewHead: getPreviewHeadHtml(configDir),
-      },
-      template: require.resolve('../iframe.html.ejs'),
-    }),
-    new InterpolateHtmlPlugin(process.env),
-    new webpack.DefinePlugin(loadEnv({ production: true })),
-    new webpack.DefinePlugin(getEnvironment().webpack),
-    new Dotenv({ silent: true }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [
-          {
-            loader: require.resolve('babel-loader'),
-            options: babelOptions,
-          },
-        ],
-        include: includePaths,
-        exclude: excludePaths,
-      },
-      {
-        test: /\.md$/,
-        use: [
-          {
-            loader: require.resolve('raw-loader'),
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    // Since we ship with json-loader always, it's better to move extensions to here
-    // from the default config.
-    extensions: ['.js', '.json'],
-    // Add support to NODE_PATH. With this we could avoid relative path imports.
-    // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules'].concat(nodePaths),
-  },
-  optimization: {
-    // Automatically split vendor and commons for preview bundle
-    // https://twitter.com/wSokra/status/969633336732905474
-    splitChunks: {
-      chunks: chunk => chunk.name !== 'manager',
+export default ({ configDir, babelOptions }) => {
+  const entries = getEntries(configDir);
+
+  const entriesMeta = {
+    iframe: {
+      headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
+      bodyHtmlSnippet: getPreviewBodyHtml(),
     },
-    // Keep the runtime chunk seperated to enable long term caching
-    // https://twitter.com/wSokra/status/969679223278505985
-    runtimeChunk: true,
-  },
-});
+    manager: {
+      headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
+    },
+  };
+
+  return {
+    mode: 'production',
+    bail: true,
+    devtool: '#cheap-module-source-map',
+    entry: entries,
+    output: {
+      filename: 'static/[name].[chunkhash].bundle.js',
+      // Here we set the publicPath to ''.
+      // This allows us to deploy storybook into subpaths like GitHub pages.
+      // This works with css and image loaders too.
+      // This is working for storybook since, we don't use pushState urls and
+      // relative URLs works always.
+      publicPath: '',
+    },
+    plugins: [
+      new GeneratePagePlugin(
+        {
+          template: require.resolve('../templates/index.html.ejs'),
+          // eslint-disable-next-line global-require
+          parser: require('ejs'),
+          filename: entry => (entry === 'manager' ? 'index' : entry),
+        },
+        {
+          data: { version },
+          headHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
+          bodyHtmlSnippet: entry =>
+            entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
+        }
+      ),
+      new webpack.DefinePlugin(loadEnv({ production: true })),
+      new webpack.DefinePlugin(getEnvironment().webpack),
+      new Dotenv({ silent: true }),
+    ],
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: babelOptions,
+            },
+          ],
+          include: includePaths,
+          exclude: excludePaths,
+        },
+        {
+          test: /\.md$/,
+          use: [
+            {
+              loader: require.resolve('raw-loader'),
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      // Since we ship with json-loader always, it's better to move extensions to here
+      // from the default config.
+      extensions: ['.js', '.json'],
+      // Add support to NODE_PATH. With this we could avoid relative path imports.
+      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
+      modules: ['node_modules'].concat(nodePaths),
+    },
+    optimization: {
+      // Automatically split vendor and commons for preview bundle
+      // https://twitter.com/wSokra/status/969633336732905474
+      splitChunks: {
+        chunks: chunk => chunk.name !== 'manager',
+      },
+      // Keep the runtime chunk seperated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      runtimeChunk: true,
+    },
+  };
+};

lib/core/src/server/iframe.html.ejs

@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
-    <base target="_parent">
-    <title>Storybook</title>
-    <link rel="shortcut icon" href="favicon.ico?v=1" />
-    <%= htmlWebpackPlugin.options.data.previewHead %>
-    <style>
-        :not(.sb-show-main) > .sb-main,
-        :not(.sb-show-nopreview) > .sb-nopreview,
-        :not(.sb-show-errordisplay) > .sb-errordisplay {
-            display: none;
-        }
-
-
-        .sb-wrapper {
-            position: fixed;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 20px;
-            font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        .sb-heading {
-            font-size: 20px;
-            font-weight: 600;
-            letter-spacing: 0.2px;
-            margin: 10px 0;
-        }
-
-
-        .sb-nopreview {
-            display: flex;
-            align-content: center;
-            justify-content: center;
-        }
-
-        .sb-nopreview_main {
-            margin: auto;
-            padding: 30px;
-            border-radius: 10px;
-            background: rgba(0,0,0,0.03);
-        }
-
-        .sb-nopreview_heading {
-            text-align: center;
-        }
-
-
-        .sb-errordisplay {
-            background-color: rgb(187, 49, 49);
-            color: #FFF;
-        }
-
-        .sb-errordisplay_code {
-            font-size: 14px;
-            width: 100vw;
-            overflow: auto;
-        }
-    </style>
-</head>
-<body class="sb-show-main">
-    <div id="root" class="sb-main"></div>
-
-    <div class="sb-nopreview sb-wrapper">
-        <div class="sb-nopreview_main">
-            <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
-            <p>Sorry, but you either have no stories or none are selected somehow.</p>
-            <ul>
-                <li>Please check the storybook config.</li>
-                <li>Try reloading the page.</li>
-            </ul>
-        </div>
-    </div>
-
-    <div class="sb-errordisplay sb-wrapper">
-        <div id="error-message" class="sb-heading"></div>
-        <pre class="sb-errordisplay_code">
-            <code id="error-stack"></code>
-        </pre>
-    </div>
-</body>
-</html>

lib/core/src/server/index.html.ejs

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>
-    <link rel="shortcut icon" href="favicon.ico?v=1" />
-    <%= htmlWebpackPlugin.options.data.managerHead %>
-
-</head>
-<body style="margin: 0;">
-    <style>
-        html, body {
-            overflow: hidden;
-            height: 100%;
-            width: 100%;
-        }
-    </style>
-    <div id="root"></div>
-</body>
-</html>

lib/core/src/server/templates/base-manager-head.html

@@ -0,0 +1,16 @@
+<style>
+  html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+</style>
+
+<script>
+  if (window.parent !== window) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+  }
+</script>

lib/core/src/server/templates/base-preview-body.html

@@ -0,0 +1,17 @@
+<div class="sb-nopreview sb-wrapper">
+  <div class="sb-nopreview_main">
+    <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
+    <p>Sorry, but you either have no stories or none are selected somehow.</p>
+    <ul>
+      <li>Please check the storybook config.</li>
+      <li>Try reloading the page.</li>
+    </ul>
+  </div>
+</div>
+
+<div class="sb-errordisplay sb-wrapper">
+  <div id="error-message" class="sb-heading"></div>
+  <pre class="sb-errordisplay_code">
+    <code id="error-stack"></code>
+  </pre>
+</div>

lib/core/src/server/templates/base-preview-head.html

@@ -0,0 +1,62 @@
+<base target="_parent">
+
+<style>
+  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+      display: none;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .sb-heading {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    background-color: rgb(187, 49, 49);
+    color: #FFF;
+  }
+
+  .sb-errordisplay_code {
+    font-size: 14px;
+    width: 100vw;
+    overflow: auto;
+  }
+</style>
+
+<script>
+  if (window.parent !== window) {
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+    window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+  }
+</script>

lib/core/src/server/templates/index.html.ejs

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <title>Storybook</title>
+    <link rel="shortcut icon" href="favicon.ico?v=1" />
+
+    <% if (options.links) { %>
+      <% for (item of options.links) { %>
+      <% if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
+        <link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %>>
+      <% } %>
+    <% } %>
+  
+    <% if (options.headHtmlSnippet) { %>
+      <%- options.headHtmlSnippet %>
+    <% } %>
+  
+</head>
+<body>
+    
+    <% if (options.window) { %>
+      <script>
+        <% for (key in options.window) { %>
+          window['<%= key %>'] = <%= JSON.stringify(options.window[key]) %>;
+        <% } %>
+      </script>
+    <% } %>
+
+    <% if (options.bodyHtmlSnippet) { %>
+      <%- options.bodyHtmlSnippet %>
+    <% } %>
+  
+    <div id="root"></div>
+
+    <% if (options.scripts) { %>
+      <% for (item of options.scripts) { %>
+      <% if (typeof item === 'string' || item instanceof String) { item = { src: item } } %>
+        <script <% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> defer></script>
+      <% } %>
+    <% } %>
+      
+    <% for (key in dlls) { %>
+      <script src="<%= compilation.outputOptions.publicPath %><%= dlls[key] %>" defer></script>
+    <% } %>
+  
+    <% for (index in chunks) { %>
+      <% for (key in chunks[index].files) { %>
+        <script src="<%= compilation.outputOptions.publicPath %><%= chunks[index].files[key] %>" defer></script>
+      <% } %>
+    <% } %>
+  
+</body>
+</html>

lib/core/src/server/utils.js

@@ -27,22 +27,35 @@ export function getMiddleware(configDir) {
   return () => {};
 }
 
-export function getPreviewHeadHtml(configDirPath) {
+const interpolate = (string, data = {}) =>
+  Object.entries(data).reduce((acc, [k, v]) => acc.replace(`%${k}%`, v), string);
+
+export function getPreviewBodyHtml() {
+  return fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-body.html'), 'utf8');
+}
+
+export function getPreviewHeadHtml(configDirPath, interpolations) {
+  const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-preview-head.html'), 'utf8');
   const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
 
+  let result = base;
+
   if (fs.existsSync(headHtmlPath)) {
-    return fs.readFileSync(headHtmlPath, 'utf8');
+    result += fs.readFileSync(headHtmlPath, 'utf8');
   }
 
-  return '';
+  return interpolate(result, interpolations);
 }
 
-export function getManagerHeadHtml(configDirPath) {
+export function getManagerHeadHtml(configDirPath, interpolations) {
+  const base = fs.readFileSync(path.resolve(__dirname, 'templates/base-manager-head.html'), 'utf8');
   const scriptPath = path.resolve(configDirPath, 'manager-head.html');
 
+  let result = base;
+
   if (fs.existsSync(scriptPath)) {
-    return fs.readFileSync(scriptPath, 'utf8');
+    result += fs.readFileSync(scriptPath, 'utf8');
   }
 
-  return '';
+  return interpolate(result, interpolations);
 }

lib/core/src/server/utils.test.js

@@ -2,11 +2,13 @@ import mock from 'mock-fs';
 import { getPreviewHeadHtml } from './utils';
 
 const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
+const BASE_HTML_CONTENTS = '<script>console.log("base script!");</script>';
 
 describe('server.getPreviewHeadHtml', () => {
   describe('when .storybook/preview-head.html does not exist', () => {
     beforeEach(() => {
       mock({
+        [`${__dirname}/templates/base-preview-head.html`]: BASE_HTML_CONTENTS,
         config: {},
       });
     });
@@ -17,13 +19,14 @@ describe('server.getPreviewHeadHtml', () => {
 
     it('return an empty string', () => {
       const result = getPreviewHeadHtml('./config');
-      expect(result).toEqual('');
+      expect(result).toEqual(BASE_HTML_CONTENTS);
     });
   });
 
   describe('when .storybook/preview-head.html exists', () => {
     beforeEach(() => {
       mock({
+        [`${__dirname}/templates/base-preview-head.html`]: BASE_HTML_CONTENTS,
         config: {
           'preview-head.html': HEAD_HTML_CONTENTS,
         },
@@ -36,7 +39,7 @@ describe('server.getPreviewHeadHtml', () => {
 
     it('return the contents of the file', () => {
       const result = getPreviewHeadHtml('./config');
-      expect(result).toEqual(HEAD_HTML_CONTENTS);
+      expect(result).toEqual(BASE_HTML_CONTENTS + HEAD_HTML_CONTENTS);
     });
   });
 });

yarn.lock

@@ -5822,6 +5822,10 @@ ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
+ejs@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
+
 ejson@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ejson/-/ejson-2.1.2.tgz#0eed4055bc7e0e7561fe59e8c320edc3ff8ce7df"
@@ -7576,6 +7580,10 @@ gaze@^1.0.0:
   dependencies:
     globule "^1.0.0"
 
+generate-page-webpack-plugin@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/generate-page-webpack-plugin/-/generate-page-webpack-plugin-1.0.0.tgz#e6261efb7e6b9ef8a8136126b14fa26aedfb7f33"
+
 genfun@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/genfun/-/genfun-4.0.1.tgz#ed10041f2e4a7f1b0a38466d17a5c3e27df1dfc1"