storybookjs · ndelangen · Jun 7, 2017 · May 26, 2017 · May 27, 2017 · May 27, 2017
@@ -28,7 +28,7 @@ const managerUrlsFromAssets = assets => {
 };
 
 export default function(data) {
-  const { assets, publicPath } = data;
+  const { assets, publicPath, headHtml } = data;
 
   const managerUrls = managerUrlsFromAssets(assets);
 
@@ -70,6 +70,7 @@ export default function(data) {
             background-color: #eee
           }
         </style>
+        ${headHtml}
       </head>
       <body style="margin: 0;">
         <div id="root"></div>

@@ -6,7 +6,7 @@ import getBaseConfig from './config/webpack.config';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
-import { getHeadHtml, getMiddleware } from './utils';
+import { getHeadHtml, getManagerHeadHtml, getMiddleware } from './utils';
 
 let webpackResolve = () => {};
 let webpackReject = () => {};
@@ -50,13 +50,14 @@ export default function(configDir) {
     };
 
     router.get('/', (req, res) => {
-      res.send(getIndexHtml({ publicPath }));
+      const headHtml = getManagerHeadHtml(configDir)
+      res.send(getIndexHtml({ publicPath, headHtml }));
     });
 
     router.get('/iframe.html', (req, res) => {
       const headHtml = getHeadHtml(configDir);
       res.send(getIframeHtml({ ...data, headHtml, publicPath }));
-    });
+    }); 
 
     if (stats.toJson().errors.length) {
       webpackReject(stats);

@@ -1,20 +1,40 @@
 import path from 'path';
 import fs from 'fs';
+import deprecate from 'util-deprecate';
+
+const fallbackHeadUsage = deprecate(
+  () => {},
+  'Usage of head.html has been deprecated. Please rename head.html to preview-head.html'
+);
 
 export function parseList(str) {
   return str.split(',');
 }
 
 export function getHeadHtml(configDirPath) {
-  const headHtmlPath = path.resolve(configDirPath, 'head.html');
+  const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
+  const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
   let headHtml = '';
   if (fs.existsSync(headHtmlPath)) {
     headHtml = fs.readFileSync(headHtmlPath, 'utf8');
+  } else if (fs.existsSync(fallbackHtmlPath)) {
+    headHtml = fs.readFileSync(fallbackHtmlPath, 'utf8');
+    fallbackHeadUsage();
   }
 
   return headHtml;
 }
 
+export function getManagerHeadHtml(configDirPath) {
+  const scriptPath = path.resolve(configDirPath, 'manager-head.html');
+  let scriptHtml = '';
+  if (fs.existsSync(scriptPath)) {
+    scriptHtml = fs.readFileSync(scriptPath, 'utf8');
+  }
+
+  return scriptHtml;
+}
+
 export function getEnvConfig(program, configEnv) {
   Object.keys(configEnv).forEach(fieldName => {
     const envVarName = configEnv[fieldName];

@@ -5,7 +5,7 @@ title: 'Add Custom Head Tags'
 
 Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts.
 
-You can do this very easily. Simply create a file called `head.html` inside the Storybook config directory and add tags like this:
+You can do this very easily. Simply create a file called `preview-head.html` inside the Storybook config directory and add tags like this:
 
 ```html
 <script src="https://use.typekit.net/xxxyyy.js"></script>
@@ -17,3 +17,14 @@ That's it. Storybook will inject these tags.
 > **Important**
 >
 > Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.
+
+## Add Tags or Scripts to the Main UI.
+
+Additionally, you may need to add different scripts or tags to the main Storybook UI. This might arise when your custom Webpack configuration outputs or requires additional chunks.
+
+Create a file called `manager-head.html` inside of the Storybook config directory and add any tags you require.
+
+> **Important**
+>
+> Your scripts will run before Storybook's React UI. Also be aware, that this is an uncommon scenario and could potentially break Storybook's UI. So use with caution.  
+