move production build to separate util

Author: robhrt7

contributing.md

@@ -60,8 +60,6 @@ function foo(bar, fum) {
 - Don’t commit generated files: compiled from Stylus CSS, minified JavaScript, etc.
 - Don’t change version number and changelog.
 - Install [EditorConfig](http://editorconfig.org/) plugin for your code editor.
-- Feel free to [ask me](http://sapegin.me) anything you need.
-
 
 ## Building and running tests
 

core/build.js

@@ -0,0 +1,20 @@
+var path = require('path');
+var express = require('express');
+var webpack = require('webpack');
+
+global.userPath = global.userPath || process.cwd();
+global.pathToApp = global.pathToApp || path.join(process.cwd(), 'node_modules/sourcejs');
+
+var makeWebpackConfig = require('../src/make-webpack-config.js');
+var config = require('../src/utils/config');
+var env = process.env.NODE_ENV || 'development';
+
+console.log('ReactStyleguidist: webpack building '+ env +' bundle...');
+
+webpack(makeWebpackConfig(process.env.NODE_ENV), function (err, stats) {
+	if (err) {
+		console.error('ReactStyleguidist: error building webpack bundle', err, stats);
+	}
+
+	console.log('ReactStyleguidist: webpack '+ env +' build done');
+});

core/index.js

@@ -7,20 +7,12 @@ var config = require('../src/utils/config');
 if (config.enabled) {
 	var compiler = webpack(makeWebpackConfig(env));
 
-	if (env === 'development') {
+	if (env !== 'production') {
 		global.app.use(require('webpack-dev-middleware')(compiler, {
 			noInfo: true
 		}));
 		global.app.use(require('webpack-hot-middleware')(compiler));
-	} else {
-		console.log('webpack building production styleguidist bundle...');
-
-		webpack(makeWebpackConfig('production'), function(err, stats) {
-			if (err) {
-				console.log(err, stats);
-			}
-
-			console.log('webpack production styleguidist build done');
-		});
+	} else if (config.preBuild) {
+		require('./build.js');
 	}
 }

core/middleware/index.js

@@ -19,10 +19,10 @@ var processRequest = function (req, res, next) {
 		var pathToStyleguide = config._styleguideDir.replace(/^\./, '');
 		var pathToBundle = config.bundlePath.replace(/^\./, '');
 
-		if (global.MODE === 'development') {
-			append = '<script src="/'+ config.bundlePath +'"></script>'
-		} else {
+		if (global.MODE === 'production') {
 			append = '<link rel="stylesheet" href="' + pathToStyleguide + '/build/styles.css"><script src="' + pathToStyleguide + pathToBundle + '"></script>'
+		} else {
+			append = '<script src="'+ pathToBundle +'"></script>'
 		}
 
 		req.specData.renderedHtml += append;

package.json

@@ -3,7 +3,7 @@
   "description": "SourceJS integration plugin for react-styleuguidist",
   "version": "0.3.2",
   "homepage": "https://github.com/sourcejs/sourcejs-react-styleguidist",
-  "contributirs": [
+  "contributors": [
     {
       "name": "Artem Sapegin",
       "url": "http://sapegin.me/"

readme.md

@@ -69,9 +69,9 @@ Examples are written in Markdown where any code blocks will be rendered as a rea
 
 ## How it works
 
-SourceJS plugins are loaded together with main applications, adding additional initialization steps or changing rendering flow using middleware integration. With this plugin, in development mode, SourceJS in enhanced with webpack middleware, that builds all the React examples on demand and listens to file changes for hot-reloading.
+SourceJS plugins are loaded together with main application, adding additional initialization steps or changing rendering flow using middleware integration. With this plugin, in development mode, SourceJS in enhanced with webpack middleware, that builds all the React examples on demand and listens to file changes for hot-reloading.
 
-Running app with `NODE_ENV=production`, webpack will be triggered only once to build a static, minified version, which is done also on app start.
+In production mode webpack is not triggered, expecting that bundle is already built (read configuration section for more).
 
 Rendering flow with this plugins looks like this:
 
@@ -86,6 +86,14 @@ Rendering flow with this plugins looks like this:
 
 Use SourceJS `options.js` for deep plugin configuration.
 
+* **`enabled`**
+  Type: `Boolean`
+  Set to `false`, if wan't to disable plugin load with SourceJS app.
+
+* **`preBuild`**
+  Type: `Boolean`
+  Set to `true`, if you wan't to automatically build webpack bundle in production mode right after app starts.
+
 * **`rootDir`**
   Type: `String`, required
   Your components sources root folder (eg. `./lib`). Should not point to a folder with the `node_modules` folder.
@@ -140,12 +148,25 @@ Use SourceJS `options.js` for deep plugin configuration.
   }
   ```
 
+### Environment settings
+
+Running app with `NODE_ENV=production`, initial webpack build won't be triggered. To properly prepare production environment, first run react-styleguidist build command, and only after that run application:
+
+```
+NODE_ENV=production node ./node_modules/sourcejs-react-styleguidist/core/build.js
+NODE_ENV=production npm start
+```
+
+Note: this command should be ran from SourceJS root folder, where `node_modules` is placed.
+
+Alternatively, you can set `preBuild` to true in plugin configuration, to build webpack bundle once app is ran in production mode. This will require less build steps, but may cause higher load in production environment container.
+
 ## Contributing
 
-Everyone is welcome to contribute. Please take a moment to review the [contributing guidelines](Contributing.md).
+Everyone is welcome to contribute. Please take a moment to review the [contributing guidelines](contributing.md).
 
 ---
 
 ## License
 
-The MIT License, see the included [License.md](License.md) file.
+The MIT License, see the included [license.md](license.md) file.

src/utils/config.js

@@ -11,7 +11,7 @@ var pathToSourceJSUser = '';
 
 if (global.pathToApp) {
 	sourceJSUtils = require(path.join(global.pathToApp, 'core/lib/utils'));
-	globalConfig = global.opts.plugins && global.opts.plugins.reactStyleguidist ? global.opts.plugins.reactStyleguidist : {};
+	globalConfig = global.opts && global.opts.plugins && global.opts.plugins.reactStyleguidist ? global.opts.plugins.reactStyleguidist : {};
 
 	pathToSourceJSUser = global.userPath;
 }
@@ -57,7 +57,6 @@ function readConfig() {
 		options = _.merge({}, options, customConfig);
 		options.rootDir = path.resolve(path.dirname(configFilepath), options.rootDir);
 	} else {
-		options._rootDir = config.rootDir;
 		options.rootDir = path.join(pathToSourceJSUser, options.rootDir);
 
 		options._styleguideDir = config.styleguideDir;
@@ -73,10 +72,10 @@ function readConfig() {
 	}
 
 	if (options.rootDir === global.userPath) {
-		throw Error('Styleguidist: "rootDir" should not point to folder with node_modules');
+		throw Error('ReactStyleguidist: "rootDir" should not point to folder with node_modules');
 	}
 	if (!utils.isDirectoryExists(options.rootDir)) {
-		throw Error('Styleguidist: "rootDir" directory not found: ' + options.rootDir);
+		throw Error('ReactStyleguidist: "rootDir" directory not found: ' + options.rootDir);
 	}
 
 	return options;
@@ -97,16 +96,16 @@ function findConfig(argv) {
 
 function validateConfig(options) {
 	if (!options.rootDir) {
-		throw Error('Styleguidist: "rootDir" options is required.');
+		throw Error('ReactStyleguidist: "rootDir" options is required.');
 	}
 	if (!options.components) {
-		throw Error('Styleguidist: "components" options is required.');
+		throw Error('ReactStyleguidist: "components" options is required.');
 	}
 	if (options.getExampleFilename && typeof options.getExampleFilename !== 'function') {
-		throw Error('Styleguidist: "getExampleFilename" options must be a function.');
+		throw Error('ReactStyleguidist: "getExampleFilename" options must be a function.');
 	}
 	if (options.updateWebpackConfig && typeof options.updateWebpackConfig !== 'function') {
-		throw Error('Styleguidist: "updateWebpackConfig" options must be a function.');
+		throw Error('ReactStyleguidist: "updateWebpackConfig" options must be a function.');
 	}
 }