ADD webpack progressbar && show server ready message after webpack

FIX 'urlsFromAssets'
storybookjs · Jun 7, 2017 · 7c707f6 · 7c707f6
1 parent 4889257
commit 7c707f6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 17 deletions.
diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js
@@ -26,6 +26,7 @@ export default function() {
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      new webpack.ProgressPlugin(),
     ],
     module: {
       rules: [

diff --git a/app/react/src/server/iframe.html.js b/app/react/src/server/iframe.html.js
@@ -8,7 +8,7 @@ import url from 'url';
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css',
 //   'static/preview.9adbb5ef965106be1cc3.bundle.js.map',
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css.map' ]
-const previewUrlsFromAssets = assets => {
+const urlsFromAssets = assets => {
   if (!assets) {
     return {
       js: ['static/preview.bundle.js'],

diff --git a/app/react/src/server/index.js b/app/react/src/server/index.js
@@ -8,7 +8,7 @@ import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
 import shelljs from 'shelljs';
-import storybook from './middleware';
+import storybook, { webpackValid } from './middleware';
 import packageJson from '../../package.json';
 import { parseList, getEnvConfig } from './utils';
 
@@ -135,11 +135,23 @@ process.env.STORYBOOK_GIT_BRANCH =
 // `getBaseConfig` function which is called inside the middleware
 app.use(storybook(configDir));
 
+let serverResolve = () => {};
+let serverReject = () => {};
+const serverListening = new Promise((resolve, reject) => {
+  serverResolve = resolve;
+  serverReject = reject;
+});
 server.listen(...listenAddr, error => {
   if (error) {
-    throw error;
+    serverReject(error);
   } else {
-    const address = `http://${program.host || 'localhost'}:${program.port}/`;
-    logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
+    serverResolve();
   }
 });
+
+Promise.all([webpackValid, serverListening])
+  .then(() => {
+    const address = `http://${program.host || 'localhost'}:${program.port}/`;
+    logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
+  })
+  .catch(error => logger.error(error));
diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js
@@ -8,6 +8,13 @@ import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
 import { getHeadHtml, getMiddleware } from './utils';
 
+let webpackResolve = () => {};
+let webpackReject = () => {};
+export const webpackValid = new Promise((resolve, reject) => {
+  webpackResolve = resolve;
+  webpackReject = reject;
+});
+
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
@@ -29,19 +36,33 @@ export default function(configDir) {
   };
 
   const router = new Router();
-  router.use(webpackDevMiddleware(compiler, devMiddlewareOptions));
+  const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
+  router.use(webpackDevMiddlewareInstance);
   router.use(webpackHotMiddleware(compiler));
 
   // custom middleware
   middlewareFn(router);
 
-  router.get('/', (req, res) => {
-    res.send(getIndexHtml({ publicPath }));
-  });
+  webpackDevMiddlewareInstance.waitUntilValid(stats => {
+    const data = {
+      publicPath: config.output.publicPath,
+      assets: stats.toJson().assetsByChunkName,
+    };
+
+    router.get('/', (req, res) => {
+      res.send(getIndexHtml({ publicPath }));
+    });
+
+    router.get('/iframe.html', (req, res) => {
+      const headHtml = getHeadHtml(configDir);
+      res.send(getIframeHtml({ ...data, headHtml, publicPath }));
+    });
 
-  router.get('/iframe.html', (req, res) => {
-    const headHtml = getHeadHtml(configDir);
-    res.send(getIframeHtml({ headHtml, publicPath }));
+    if (stats.toJson().errors.length) {
+      webpackReject(stats);
+    } else {
+      webpackResolve(stats);
+    }
   });
 
   return router;

diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json
@@ -19,11 +19,11 @@
     "uuid": "^3.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "3.0.0",
-    "@storybook/addon-links": "3.0.0",
-    "@storybook/addon-events": "3.0.1",
-    "@storybook/addons": "3.0.0",
-    "@storybook/react": "3.0.0",
+    "@storybook/addon-actions": "^3.0.0",
+    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-events": "^3.0.0",
+    "@storybook/addons": "^3.0.0",
+    "@storybook/react": "^3.0.0",
     "react-scripts": "1.0.1"
   },
   "private": true