Proxy config hot reloading (#605)

webpack · Sep 16, 2016 · 155d036 · 155d036
1 parent 325ef59
commit 155d036
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 8 deletions.
diff --git a/examples/proxy-hot-reload/README.md b/examples/proxy-hot-reload/README.md
@@ -0,0 +1,32 @@
+# Proxy: hot reload
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+Enables hot reloading for proxy config. If function is provided instead of
+object, dev server calls it on each request to get proxy config and replaces proxy middleware if config was changed.
+
+## What should happen
+
+The script should open `http://localhost:8080/`. It should show "It's working."
+
+Go to `http://localhost:8080/api/users`. It should show a couple of JSON objects.
+
+While dev server is running, open `proxy-config.js` and replace
+```js
+module.exports = {
+    target: 'http://jsonplaceholder.typicode.com/',
+    pathRewrite: {
+        '^/api': ''
+    }
+};
+```
+with
+```js
+module.exports = {
+    target: 'http://reqres.in/'
+};
+```
+
+Now `http://localhost:8080/api/users` should return a response from `http://reqres.in/`.
diff --git a/examples/proxy-hot-reload/app.js b/examples/proxy-hot-reload/app.js
@@ -0,0 +1 @@
+document.write("It's working.");
diff --git a/examples/proxy-hot-reload/index.html b/examples/proxy-hot-reload/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: proxy - hot reload</h1>
+    <p>Change config in <code>proxy-config.js</code> and open <a href="/api/users">/api/users</a></p>
+	</body>
+</html>
diff --git a/examples/proxy-hot-reload/proxy-config.js b/examples/proxy-hot-reload/proxy-config.js
@@ -0,0 +1,18 @@
+/**/
+module.exports = {
+	target: 'http://jsonplaceholder.typicode.com/',
+	pathRewrite: {
+		'^/api': ''
+	}
+};
+/**/
+
+//
+// Replace it with following and save the file:
+//
+
+/** /
+module.exports = {
+	target: 'http://reqres.in/'
+};
+/**/
diff --git a/examples/proxy-hot-reload/webpack.config.js b/examples/proxy-hot-reload/webpack.config.js
@@ -0,0 +1,37 @@
+var fs = require('fs');
+
+var proxyConfig = require('./proxy-config');
+var proxyOptions = {
+	context: '/api',
+	target: proxyConfig.target,
+	pathRewrite: proxyConfig.pathRewrite,
+	changeOrigin: true
+};
+
+fs.watch('./proxy-config.js', function() {
+	delete require.cache[require.resolve('./proxy-config')];
+	try {
+		var newProxyConfig = require('./proxy-config');
+		if(proxyOptions.target !== newProxyConfig.target) {
+			console.log('Proxy target changed:', newProxyConfig.target);
+			proxyOptions = {
+				context: '/api',
+				target: newProxyConfig.target,
+				pathRewrite: newProxyConfig.pathRewrite,
+				changeOrigin: true
+			};
+		}
+	} catch(e) {}
+});
+
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		proxy: [
+			function() {
+				return proxyOptions;
+			}
+		]
+	}
+};
diff --git a/lib/Server.js b/lib/Server.js
@@ -162,26 +162,53 @@ function Server(compiler, options) {
 					});
 				}
 
+				var getProxyMiddleware = function(proxyConfig) {
+					var context = proxyConfig.context || proxyConfig.path;
+
+					// It is possible to use the `bypass` method without a `target`.
+					// However, the proxy middleware has no use in this case, and will fail to instantiate.
+					if(proxyConfig.target) {
+						return httpProxyMiddleware(context, proxyConfig);
+					}
+				}
+
 				/**
 				 * Assume a proxy configuration specified as:
 				 * proxy: [
 				 *   {
 				 *     context: ...,
 				 *     ...options...
-				 *   }
+				 *   },
+				 *   // or:
+				 *   function() {
+				 *     return {
+				 *       context: ...,
+				 *       ...options...
+				 *     };
+				 *	 }
 				 * ]
 				 */
-				options.proxy.forEach(function(proxyConfig) {
-					var bypass = typeof proxyConfig.bypass === 'function';
-					var context = proxyConfig.context || proxyConfig.path;
+				options.proxy.forEach(function(proxyConfigOrCallback) {
+					var proxyConfig;
 					var proxyMiddleware;
-					// It is possible to use the `bypass` method without a `target`.
-					// However, the proxy middleware has no use in this case, and will fail to instantiate.
-					if(proxyConfig.target) {
-						proxyMiddleware = httpProxyMiddleware(context, proxyConfig);
+
+					if(typeof proxyConfigOrCallback === 'function') {
+						proxyConfig = proxyConfigOrCallback();
+					} else {
+						proxyConfig = proxyConfigOrCallback;
 					}
 
+					proxyMiddleware = getProxyMiddleware(proxyConfig);
+
 					app.use(function(req, res, next) {
+						if(typeof proxyConfigOrCallback === 'function') {
+							var newProxyConfig = proxyConfigOrCallback();
+							if(newProxyConfig !== proxyConfig) {
+								proxyConfig = newProxyConfig;
+								proxyMiddleware = getProxyMiddleware(proxyConfig);
+							}
+						}
+						var bypass = typeof proxyConfig.bypass === 'function';
 						var bypassUrl = bypass && proxyConfig.bypass(req, res, proxyConfig) || false;
 
 						if(bypassUrl) {