diff --git a/app/react/src/server/index.html.js b/app/react/src/server/index.html.js
index fa7b791d8413..375f03acb84c 100644
--- a/app/react/src/server/index.html.js
+++ b/app/react/src/server/index.html.js
@@ -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
}
+ ${headHtml}
diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js
index 112740698259..d15201c82a28 100644
--- a/app/react/src/server/middleware.js
+++ b/app/react/src/server/middleware.js
@@ -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);
diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js
index 3961915ba6f7..70f20e268f49 100644
--- a/app/react/src/server/utils.js
+++ b/app/react/src/server/utils.js
@@ -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];
diff --git a/docs/pages/configurations/add-custom-head-tags/index.md b/docs/pages/configurations/add-custom-head-tags/index.md
index b7bb8943c8ca..6cae4180c759 100644
--- a/docs/pages/configurations/add-custom-head-tags/index.md
+++ b/docs/pages/configurations/add-custom-head-tags/index.md
@@ -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
@@ -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.
+