Allow including a js files just before manager.bundle.js

Context & Why? The process went like this: 1. Why are storybook's build times so slow (5 sec or more)? 2. Lets try adding the webpack dll plugin 3. Oh wait, now I need to include a vendor.js (it has the react bits) prior to storybook 4. This commit 5. Now build times are sub 200ms.
storybookjs · May 26, 2017 · b390c34 · b390c34
1 parent fe66b26
commit b390c34
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git 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, bodyScript } = data;
 
   const managerUrls = managerUrlsFromAssets(assets);
 
@@ -73,6 +73,7 @@ export default function(data) {
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
+        ${bodyScript}
         <script src="${url.resolve(publicPath, managerUrls.js)}"></script>
       </body>
     </html>

diff --git 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, getBodyScript, getMiddleware } from './utils';
 
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
@@ -36,7 +36,8 @@ export default function(configDir) {
   middlewareFn(router);
 
   router.get('/', (req, res) => {
-    res.send(getIndexHtml({ publicPath }));
+    const bodyScript = getBodyScript(configDir)
+    res.send(getIndexHtml({ publicPath, bodyScript }));
   });
 
   router.get('/iframe.html', (req, res) => {

diff --git a/app/react/src/server/utils.js b/app/react/src/server/utils.js
@@ -15,6 +15,17 @@ export function getHeadHtml(configDirPath) {
   return headHtml;
 }
 
+export function getBodyScript(configDirPath) {
+  const scriptPath = path.resolve(configDirPath, 'bodyscript.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];