From b633e487bda8acf01aa4db829952c99d871773a6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 6 Feb 2020 11:27:59 +0800 Subject: [PATCH] Merge pull request #9646 from storybookjs/fix/9443-assets-in-manager Core: Fix manager assets to be routed in express --- examples/dev-kits/logo.svg | 3 ++ examples/dev-kits/manager.js | 8 ++- lib/core/src/server/dev-server.js | 84 ++++++++++++++++++------------- 3 files changed, 58 insertions(+), 37 deletions(-) create mode 100644 examples/dev-kits/logo.svg diff --git a/examples/dev-kits/logo.svg b/examples/dev-kits/logo.svg new file mode 100644 index 000000000000..b9185494179f --- /dev/null +++ b/examples/dev-kits/logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/dev-kits/manager.js b/examples/dev-kits/manager.js index 203b71164ba8..d90a65bf9b6f 100644 --- a/examples/dev-kits/manager.js +++ b/examples/dev-kits/manager.js @@ -5,8 +5,14 @@ import '@storybook/addon-preview-wrapper/register'; import { addons } from '@storybook/addons'; import { themes } from '@storybook/theming'; +import logo from './logo.svg'; + addons.setConfig({ - theme: themes.dark, + theme: { + brandImage: logo, + brandTitle: 'Custom - Storybook', + ...themes.dark, + }, panelPosition: 'bottom', selectedPanel: 'storybook/roundtrip', }); diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js index 9962d613d89b..297f9306982a 100644 --- a/lib/core/src/server/dev-server.js +++ b/lib/core/src/server/dev-server.js @@ -41,35 +41,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); } - ); + }); }); }); @@ -109,17 +113,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) { @@ -130,7 +135,7 @@ export default function(options) { resolve(stats); } }); - previewProcess = webpackDevMiddlewareInstance; + previewProcess = previewDevMiddlewareInstance; }); }); @@ -138,8 +143,19 @@ export default function(options) { 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`)); @@ -152,10 +168,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 }; });