Merge pull request react-bootstrap#628 from react-bootstrap/docs-dev-workflow

Use webpack-dev-server instead of webpack-dev-middleware

Author: AlexKVal

docs/dev-run

@@ -0,0 +1,78 @@
+#!/usr/bin/env babel-node
+/* eslint no-process-exit: 0 */
+import 'colors';
+import portfinder from 'portfinder';
+import { exec } from 'child-process-promise';
+
+portfinder.basePort = 4000;
+
+const SIGINT = 'SIGINT';
+let webpackDevServer;
+let docsServer;
+
+function output(prefix, message) {
+  let formattedMessage = message.trim().split('\n')
+    .reduce((acc, line) => `${acc}${ acc !== '' ? '\n' : '' }${prefix} ${line}`, '');
+
+  console.log(formattedMessage);
+}
+
+function listen({stdout, stderr}, name) {
+  stdout.on('data', data => output(`[${name}] `.grey, data));
+  stderr.on('data', data => output(`[${name}] `.grey, data));
+}
+
+function shutdown() {
+  if (webpackDevServer) {
+    webpackDevServer.kill(SIGINT);
+  }
+  if (docsServer) {
+    docsServer.kill(SIGINT);
+  }
+}
+
+function catchExec(name, err) {
+  if (err.killed) {
+    console.log('Shutdown: '.cyan + name.green);
+  } else {
+    console.log(`${name} -- Failed`.red);
+    console.log(err.toString().red);
+  }
+  shutdown();
+}
+
+console.log('Starting docs in Development mode'.cyan);
+
+process.on(SIGINT, shutdown);
+
+portfinder.getPorts(2, {}, (portFinderErr, [docsPort, webpackPort]) => {
+  if (portFinderErr) {
+    console.log('Failed to acquire ports'.red);
+    process.exit(1);
+  }
+
+  exec(`webpack-dev-server --quiet --config webpack.docs.js --color --port ${webpackPort}`)
+    .progress(childProcess => {
+      listen(childProcess, 'webpack-dev-server');
+      webpackDevServer = childProcess;
+      return;
+    })
+    .then(() => console.log('Shutdown: '.cyan + 'webpack-dev-server'.green))
+    .catch(err => catchExec('webpack-dev-server', err));
+
+  exec('nodemon --exec babel-node docs/server.js', {
+      env: {
+        PORT: docsPort,
+        WEBPACK_DEV_PORT: webpackPort,
+        ...process.env
+      }
+    })
+    .progress(childProcess => {
+      listen(childProcess, 'docs-server');
+      docsServer = childProcess;
+      return;
+    })
+    .then(() => console.log('Shutdown: '.cyan + 'docs-server'.green))
+    .catch(err => catchExec('docs-server', err));
+});
+

docs/server.js

@@ -1,46 +1,40 @@
+import 'colors';
 import React from 'react';
 import express from 'express';
 import path from 'path';
-import webpack from 'webpack';
-import webpackMiddleware from 'webpack-dev-middleware';
-import webpackConfigBuilder from '../webpack/webpack.config';
 import Router from 'react-router';
 import routes from './src/Routes';
+import httpProxy from 'http-proxy';
 
 const development = process.env.NODE_ENV !== 'production';
+const port = process.env.PORT || 4000;
+
 let app = express();
 
 if (development) {
-  let webpackConfig = webpackConfigBuilder({
-    development: development,
-    docs: true
-  });
-  let publicPath = webpackConfig.output.publicPath;
+  let proxy = httpProxy.createProxyServer();
+  let webpackPort = process.env.WEBPACK_DEV_PORT;
+  let target = `http://localhost:${webpackPort}`;
 
-  webpackConfig.output.path = '/';
-  webpackConfig.output.publicPath = undefined;
-  webpackConfig.module.noParse = /babel-core\/browser/;
+  app.get('/assets/*', function (req, res) {
+    proxy.web(req, res, { target });
+  });
 
-  app = app
-    .use(webpackMiddleware(webpack(webpackConfig), {
-      noInfo: false,
-      publicPath: publicPath,
-      stats: {
-          colors: true
-      }
-    }))
-    .use(function renderApp(req, res) {
-      Router.run(routes, req.url, Handler => {
-        let html = React.renderToString(<Handler />);
-        res.send(html);
-      });
+  app.use(function renderApp(req, res) {
+    Router.run(routes, req.url, Handler => {
+      let html = React.renderToString(<Handler />);
+      res.send(html);
     });
+  });
+
+  proxy.on('error', function(e) {
+    console.log('Could not connect to webpack proxy'.red);
+    console.log(e.toString().red);
+  });
 } else {
-  app = app
-    .use(express.static(path.join(__dirname, '../docs-built')));
+  app.use(express.static(path.join(__dirname, '../docs-built')));
 }
 
-app
-  .listen(4000, function () {
-    console.log('Server started at http://localhost:4000');
-  });
+app.listen(port, function () {
+  console.log(`Server started at http://localhost:${port}`);
+});

package.json

@@ -13,7 +13,7 @@
     "test": "npm run lint && npm run build && karma start --single-run",
     "lint": "eslint src test docs ie8 tools webpack karma.conf.js webpack.config.js webpack.docs.js",
     "docs-build": "babel-node tools/build-cli.js --docs-only",
-    "docs": "babel-node docs/server.js",
+    "docs": "docs/dev-run",
     "docs-prod": "webpack --config webpack.docs.js -p --progress && NODE_ENV=production babel-node docs/server.js",
     "ie8": "babel-node ie8/server.js"
   },
@@ -53,6 +53,7 @@
     "file-loader": "^0.8.1",
     "fs-extra": "^0.18.0",
     "fs-promise": "^0.3.1",
+    "http-proxy": "^1.11.1",
     "json-loader": "^0.5.1",
     "karma": "~0.12.32",
     "karma-chai": "^0.1.0",
@@ -69,6 +70,8 @@
     "less-loader": "^2.1.0",
     "lodash": "^3.5.0",
     "mocha": "^2.2.1",
+    "nodemon": "^1.3.7",
+    "portfinder": "^0.4.0",
     "react": "^0.13.1",
     "react-router": "^0.13.1",
     "rf-changelog": "^0.4.0",
@@ -78,7 +81,7 @@
     "style-loader": "^0.12.0",
     "transform-loader": "^0.2.1",
     "webpack": "^1.7.2",
-    "webpack-dev-middleware": "^1.0.11",
+    "webpack-dev-server": "^1.8.2",
     "yargs": "^3.5.4"
   },
   "dependencies": {

webpack/strategies/docs.js

@@ -20,6 +20,7 @@ export default (config, options) => {
         extensions: ['', '.js', '.json']
       },
       module: {
+        noParse: /babel-core\/browser/,
         loaders: config.module.loaders
           .map(value => {
             if (/\.js\/$/.test(value.test.toString())) {