From 1e64ec1dd46d060767b149609ba64849f9aa7797 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Wed, 21 Sep 2016 15:09:57 +0530 Subject: [PATCH 1/2] Enable DB only if the env variable is set --- src/client/manager/provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/manager/provider.js b/src/client/manager/provider.js index 5cc655bd4f71..d9e5bdf73dfb 100644 --- a/src/client/manager/provider.js +++ b/src/client/manager/provider.js @@ -16,7 +16,7 @@ export default class ReactProvider extends Provider { this.channel = createChannel({ key: this.dataId }); addons.setChannel(this.channel); this.database = addons.getDatabase(); - if (!this.database) { + if (!this.database && process.env.STORYBOOK_ENABLE_DB) { const bundled = process.env.NODE_ENV === 'production'; if (bundled) { this.database = createDatabase({ url: 'addon-db.json', bundled }); From e0fafe30ae604fd3be394c011d140d5684340628 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Wed, 21 Sep 2016 15:10:53 +0530 Subject: [PATCH 2/2] Set the db environment variable Also refactor loading config to enable setting env variable from js --- src/server/build.js | 40 ++++---- src/server/config/webpack.config.js | 84 +++++++-------- src/server/config/webpack.config.prod.js | 124 ++++++++++++----------- src/server/index.js | 7 +- src/server/middleware.js | 6 +- 5 files changed, 136 insertions(+), 125 deletions(-) diff --git a/src/server/build.js b/src/server/build.js index c37d257d1dfe..26fcc06af14b 100644 --- a/src/server/build.js +++ b/src/server/build.js @@ -6,7 +6,7 @@ import path from 'path'; import fs from 'fs'; import shelljs from 'shelljs'; import packageJson from '../../package.json'; -import baseConfig from './config/webpack.config.prod'; +import getBaseConfig from './config/webpack.config.prod'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; @@ -34,20 +34,32 @@ getEnvConfig(program, { configDir: 'STORYBOOK_CONFIG_DIR', }); -// Build the webpack configuration using the `baseConfig` -// custom `.babelrc` file and `webpack.config.js` files const configDir = program.configDir || './.storybook'; -const config = loadConfig('PRODUCTION', baseConfig, configDir); - -const publicPath = config.output.publicPath; - const outputDir = program.outputDir || './storybook-static'; -config.output.path = outputDir; // create output directory (and the static dir) if not exists shelljs.rm('-rf', outputDir); shelljs.mkdir('-p', path.resolve(outputDir)); +// The addon database service is disabled by default for now +// It should be enabled with the --enable-db for dev server +if (program.enableDb) { + // NOTE enables database on client + process.env.STORYBOOK_ENABLE_DB = 1; + const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json'); + // create addon-db.json file if it's missing to avoid the 404 error + if (!fs.existsSync(dbPath)) { + fs.writeFileSync(dbPath, '{}'); + } + shelljs.cp(dbPath, outputDir); +} + +// Build the webpack configuration using the `baseConfig` +// custom `.babelrc` file and `webpack.config.js` files +// NOTE changes to env should be done before calling `getBaseConfig` +const config = loadConfig('PRODUCTION', getBaseConfig(), configDir); +config.output.path = outputDir; + // copy all static files if (program.staticDir) { program.staticDir.forEach(dir => { @@ -60,19 +72,9 @@ if (program.staticDir) { }); } -// The addon database service is disabled by default for now -// It should be enabled with the --enable-db for dev server -if (program.enableDb) { - const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json'); - // create addon-db.json file if it's missing to avoid the 404 error - if (!fs.existsSync(dbPath)) { - fs.writeFileSync(dbPath, '{}'); - } - shelljs.cp(dbPath, outputDir); -} - // Write both the storybook UI and IFRAME HTML files to destination path. const headHtml = getHeadHtml(configDir); +const publicPath = config.output.publicPath; fs.writeFileSync(path.resolve(outputDir, 'index.html'), getIndexHtml(publicPath)); fs.writeFileSync(path.resolve(outputDir, 'iframe.html'), getIframeHtml(headHtml, publicPath)); diff --git a/src/server/config/webpack.config.js b/src/server/config/webpack.config.js index cda94308d5c4..633e81365b7d 100644 --- a/src/server/config/webpack.config.js +++ b/src/server/config/webpack.config.js @@ -11,48 +11,50 @@ import { } from './utils'; import babalLoaderConfig from './babel.js'; -const config = { - devtool: '#cheap-module-eval-source-map', - entry: { - manager: [ - require.resolve('./polyfills'), - require.resolve('../../client/manager'), - ], - preview: [ - require.resolve('./polyfills'), - require.resolve('./error_enhancements'), - `${require.resolve('webpack-hot-middleware/client')}?reload=true`, +export default function () { + const config = { + devtool: '#cheap-module-eval-source-map', + entry: { + manager: [ + require.resolve('./polyfills'), + require.resolve('../../client/manager'), + ], + preview: [ + require.resolve('./polyfills'), + require.resolve('./error_enhancements'), + `${require.resolve('webpack-hot-middleware/client')}?reload=true`, + ], + }, + output: { + path: path.join(__dirname, 'dist'), + filename: 'static/[name].bundle.js', + publicPath: '/', + }, + plugins: [ + new webpack.DefinePlugin(loadEnv()), + new OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new CaseSensitivePathsPlugin(), + new WatchMissingNodeModulesPlugin(nodeModulesPaths), ], - }, - output: { - path: path.join(__dirname, 'dist'), - filename: 'static/[name].bundle.js', - publicPath: '/', - }, - plugins: [ - new webpack.DefinePlugin(loadEnv()), - new OccurenceOrderPlugin(), - new webpack.HotModuleReplacementPlugin(), - new CaseSensitivePathsPlugin(), - new WatchMissingNodeModulesPlugin(nodeModulesPaths), - ], - module: { - loaders: [ - { - test: /\.jsx?$/, - loader: require.resolve('babel-loader'), - query: babalLoaderConfig, - include: includePaths, - exclude: excludePaths, + module: { + loaders: [ + { + test: /\.jsx?$/, + loader: require.resolve('babel-loader'), + query: babalLoaderConfig, + include: includePaths, + exclude: excludePaths, + }, + ], + }, + resolve: { + alias: { + // This is to add addon support for NPM2 + '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'), }, - ], - }, - resolve: { - alias: { - // This is to add addon support for NPM2 - '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'), }, - }, -}; + }; -export default config; + return config; +} diff --git a/src/server/config/webpack.config.prod.js b/src/server/config/webpack.config.prod.js index 594199a1daab..815619b75656 100644 --- a/src/server/config/webpack.config.prod.js +++ b/src/server/config/webpack.config.prod.js @@ -3,69 +3,71 @@ import webpack from 'webpack'; import { OccurenceOrderPlugin, includePaths, excludePaths, loadEnv } from './utils'; import babalLoaderConfig from './babel.prod.js'; -const entries = { - preview: [ - require.resolve('./polyfills'), - ], - manager: [ - require.resolve('./polyfills'), - path.resolve(__dirname, '../../client/manager'), - ], -}; +export default function () { + const entries = { + preview: [ + require.resolve('./polyfills'), + ], + manager: [ + require.resolve('./polyfills'), + path.resolve(__dirname, '../../client/manager'), + ], + }; -const config = { - bail: true, - devtool: '#cheap-module-source-map', - entry: entries, - output: { - filename: 'static/[name].bundle.js', - // Here we set the publicPath to ''. - // This allows us to deploy storybook into subpaths like GitHub pages. - // This works with css and image loaders too. - // This is working for storybook since, we don't use pushState urls and - // relative URLs works always. - publicPath: '', - }, - plugins: [ - new webpack.DefinePlugin(loadEnv({ production: true })), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.UglifyJsPlugin({ - compress: { - screw_ie8: true, - warnings: false, - }, - mangle: { - screw_ie8: true, - }, - output: { - comments: false, - screw_ie8: true, - }, - }), - ], - module: { - loaders: [ - { - test: /\.jsx?$/, - loader: require.resolve('babel-loader'), - query: babalLoaderConfig, - include: includePaths, - exclude: excludePaths, - }, + const config = { + bail: true, + devtool: '#cheap-module-source-map', + entry: entries, + output: { + filename: 'static/[name].bundle.js', + // Here we set the publicPath to ''. + // This allows us to deploy storybook into subpaths like GitHub pages. + // This works with css and image loaders too. + // This is working for storybook since, we don't use pushState urls and + // relative URLs works always. + publicPath: '', + }, + plugins: [ + new webpack.DefinePlugin(loadEnv({ production: true })), + new webpack.optimize.DedupePlugin(), + new webpack.optimize.UglifyJsPlugin({ + compress: { + screw_ie8: true, + warnings: false, + }, + mangle: { + screw_ie8: true, + }, + output: { + comments: false, + screw_ie8: true, + }, + }), ], - }, - resolve: { - alias: { - // This is to add addon support for NPM2 - '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'), + module: { + loaders: [ + { + test: /\.jsx?$/, + loader: require.resolve('babel-loader'), + query: babalLoaderConfig, + include: includePaths, + exclude: excludePaths, + }, + ], + }, + resolve: { + alias: { + // This is to add addon support for NPM2 + '@kadira/storybook-addons': require.resolve('@kadira/storybook-addons'), + }, }, - }, -}; + }; -// Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode. -// But webpack 1 has it. That's why we do this. -if (OccurenceOrderPlugin) { - config.plugins.unshift(new OccurenceOrderPlugin()); -} + // Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode. + // But webpack 1 has it. That's why we do this. + if (OccurenceOrderPlugin) { + config.plugins.unshift(new OccurenceOrderPlugin()); + } -export default config; + return config; +} diff --git a/src/server/index.js b/src/server/index.js index 980e1e947fef..ec2d4bb9c076 100755 --- a/src/server/index.js +++ b/src/server/index.js @@ -68,15 +68,20 @@ if (program.staticDir) { // Build the webpack configuration using the `baseConfig` // custom `.babelrc` file and `webpack.config.js` files const configDir = program.configDir || './.storybook'; -app.use(storybook(configDir)); // The addon database service is disabled by default for now // It should be enabled with the --enable-db for dev server if (program.enableDb) { + // NOTE enables database on client + process.env.STORYBOOK_ENABLE_DB = 1; const dbPath = program.dbPath || path.resolve(configDir, 'addon-db.json'); app.use('/db', datastore(dbPath)); } +// NOTE changes to env should be done before calling `getBaseConfig` +// `getBaseConfig` function which is called inside the middleware +app.use(storybook(configDir)); + app.listen(...listenAddr, function (error) { if (error) { throw error; diff --git a/src/server/middleware.js b/src/server/middleware.js index f8ef41c85672..b7e3b8b4cfa5 100644 --- a/src/server/middleware.js +++ b/src/server/middleware.js @@ -2,16 +2,16 @@ import { Router } from 'express'; import webpack from 'webpack'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; -import baseConfig from './config/webpack.config'; +import getBaseConfig from './config/webpack.config'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; import { getHeadHtml } from './utils'; export default function (configDir) { - // Build the webpack configuration using the `baseConfig` + // Build the webpack configuration using the `getBaseConfig` // custom `.babelrc` file and `webpack.config.js` files - const config = loadConfig('DEVELOPMENT', baseConfig, configDir); + const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir); // remove the leading '/' let publicPath = config.output.publicPath;