Core: Fix manager assets to be routed in express

examples/dev-kits/manager.js

@@ -6,8 +6,14 @@ import { useAddonState, useStoryState } from '@storybook/api';
 import { themes } from '@storybook/theming';
 import { AddonPanel } from '@storybook/components';
 
+import logo from './logo.svg';
+
 addons.setConfig({
-  theme: themes.dark,
+  theme: {
+    brandImage: logo,
+    brandTitle: 'Custom - Storybook',
+    ...themes.dark,
+  },
   panelPosition: 'bottom',
   selectedPanel: 'storybook/roundtrip',
 });

lib/core/src/server/dev-server.js

@@ -42,35 +42,39 @@ export default function(options) {
     if (options.debugWebpack) {
       logConfig('Manager webpack config', config, logger);
     }
+    const managerCompiler = webpack(config);
+
+    const devMiddlewareOptions = {
+      publicPath: config.output.publicPath,
+      watchOptions: {
+        aggregateTimeout: 2000,
+        ignored: /node_modules/,
+      },
+      // this actually causes 0 (regular) output from wdm & webpack
+      logLevel: 'warn',
+      clientLogLevel: 'warning',
+      noInfo: true,
+    };
+
+    const managerDevMiddlewareInstance = webpackDevMiddleware(
+      managerCompiler,
+      devMiddlewareOptions
+    );
+
+    router.use(managerDevMiddlewareInstance);
+
     return new Promise((resolve, reject) => {
-      webpack(config).watch(
-        {
-          aggregateTimeout: 1,
-          ignored: /node_modules/,
-        },
-        (err, stats) => {
-          managerTotalTime = process.hrtime(startTime);
-          if (!resolved && (err || stats.hasErrors())) {
-            const error = new Error('Manager build is broken');
-            error.error = err;
-            error.close = true;
-            error.stats = stats;
-            logger.line();
-            logger.line();
-            try {
-              previewReject(error);
-              previewProcess.close();
-              logger.warn('force closed preview build');
-            } catch (e) {
-              logger.warn('Unable to close preview build!');
-            }
-            logger.line();
-            reject(error);
-          } else {
-            resolve(stats);
-          }
+      managerDevMiddlewareInstance.waitUntilValid(stats => {
+        managerTotalTime = process.hrtime(startTime);
+
+        if (!stats) {
+          reject(new Error('no stats after building preview'));
+        } else if (stats.hasErrors()) {
+          reject(stats);
+        } else {
+          resolve(stats);
         }
-      );
+      });
     });
   });
 
@@ -110,17 +114,18 @@ export default function(options) {
           ...previewConfig.devServer,
         };
 
-        const webpackDevMiddlewareInstance = webpackDevMiddleware(
+        const previewDevMiddlewareInstance = webpackDevMiddleware(
           previewCompiler,
           devMiddlewareOptions
         );
 
-        router.use(webpackDevMiddlewareInstance);
+        router.use(previewDevMiddlewareInstance);
         router.use(webpackHotMiddleware(previewCompiler));
 
         return new Promise((resolve, reject) => {
           previewReject = reject;
-          webpackDevMiddlewareInstance.waitUntilValid(stats => {
+          previewDevMiddlewareInstance.waitUntilValid(stats => {
+            resolved = true;
             previewTotalTime = process.hrtime(startTime);
 
             if (!stats) {
@@ -131,16 +136,27 @@ export default function(options) {
               resolve(stats);
             }
           });
-          previewProcess = webpackDevMiddlewareInstance;
+          previewProcess = previewDevMiddlewareInstance;
         });
       });
 
   // custom middleware
   const middlewareFn = getMiddleware(configDir);
   middlewareFn(router);
 
+  managerPromise.catch(e => {
+    try {
+      if (!resolved) {
+        previewReject();
+      }
+      previewProcess.close();
+      logger.warn('force closed preview build');
+    } catch (err) {
+      logger.warn('Unable to close preview build!');
+    }
+  });
+
   return Promise.all([managerPromise, previewPromise]).then(([managerStats, previewStats]) => {
-    resolved = true;
     router.get('/', (request, response) => {
       response.set('Content-Type', 'text/html');
       response.sendFile(path.join(`${outputDir}/index.html`));
@@ -153,10 +169,6 @@ export default function(options) {
       response.set('Content-Type', 'text/html');
       response.sendFile(path.join(`${dllPath}/${request.params[0]}`));
     });
-    router.get(/(.+\.js)$/, (request, response) => {
-      response.set('Content-Type', 'text/javascript');
-      response.sendFile(path.join(`${outputDir}/${request.params[0]}`));
-    });
 
     return { previewStats, managerStats, managerTotalTime, previewTotalTime, router };
   });