Skip to content

Commit 5eebc84

Browse files
committed
Add devProxy option to package.json
1 parent bbce803 commit 5eebc84

File tree

2 files changed

+51
-3
lines changed

2 files changed

+51
-3
lines changed

package.json

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"babel-preset-react": "6.11.1",
4242
"babel-runtime": "6.11.6",
4343
"chalk": "1.1.3",
44+
"connect-history-api-fallback": "1.2.0",
4445
"cross-spawn": "4.0.0",
4546
"css-loader": "0.23.1",
4647
"detect-port": "0.1.4",
@@ -56,6 +57,7 @@
5657
"fs-extra": "0.30.0",
5758
"gzip-size": "3.0.0",
5859
"html-webpack-plugin": "2.22.0",
60+
"http-proxy-middleware": "0.17.0",
5961
"json-loader": "0.5.4",
6062
"opn": "4.0.2",
6163
"postcss-loader": "0.9.1",

scripts/start.js

+49-3
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ var path = require('path');
1313
var chalk = require('chalk');
1414
var webpack = require('webpack');
1515
var WebpackDevServer = require('webpack-dev-server');
16+
var historyApiFallback = require('connect-history-api-fallback');
17+
var httpProxyMiddleware = require('http-proxy-middleware');
1618
var execSync = require('child_process').execSync;
1719
var opn = require('opn');
1820
var detect = require('detect-port');
1921
var prompt = require('./utils/prompt');
2022
var config = require('../config/webpack.config.dev');
23+
var paths = require('../config/paths');
2124

2225
// Tools like Cloud9 rely on this
2326
var DEFAULT_PORT = process.env.PORT || 3000;
@@ -150,13 +153,56 @@ function openBrowser(port) {
150153
opn('http://localhost:' + port + '/');
151154
}
152155

156+
function addMiddleware(devServer) {
157+
// `devProxy` lets you to specify a fallback server during development.
158+
// Every unrecognized request will be forwarded to it.
159+
var devProxy = require(paths.appPackageJson).devProxy;
160+
devServer.use(historyApiFallback({
161+
// For single page apps, we generally want to fallback to /index.html.
162+
// However we also want to respect `devProxy` for API calls.
163+
// So if `devProxy` is specified, we need to decide which fallback to use.
164+
// We use a heuristic: if request `accept`s text/html, we pick /index.html.
165+
// Modern browsers include text/html into `accept` header when navigating.
166+
// However API calls like `fetch()` won’t generally won’t accept text/html.
167+
// If this heuristic doesn’t work well for you, don’t use `devProxy`.
168+
htmlAcceptHeaders: devProxy ?
169+
['text/html'] :
170+
['text/html', '*/*']
171+
}));
172+
if (devProxy) {
173+
if (typeof devProxy !== 'string') {
174+
console.log(chalk.red('When specified, "devProxy" in package.json must be a string.'));
175+
console.log(chalk.red('Instead, the type of "devProxy" was "' + typeof devProxy + '".'));
176+
console.log(chalk.red('Either remove "devProxy" from package.json, or make it a string.'));
177+
process.exit(1);
178+
}
179+
180+
// Otherwise, if devProxy is specified, we will let it handle any request
181+
// that isn't /index.html or /sockjs-node/* (used for hot reloading).
182+
var safeToProxy = /^(?!\/(index\.html|sockjs-node\/.*)).*$/;
183+
devServer.use(safeToProxy,
184+
// Pass the scope regex both to Express and to the middleware for proxying
185+
// of both HTTP and WebSockets to work without false positives.
186+
httpProxyMiddleware(pathname => safeToProxy.test(pathname), {
187+
target: devProxy,
188+
logLevel: 'silent',
189+
ws: true
190+
})
191+
);
192+
}
193+
// Finally, by now we have certainly resolved the URL.
194+
// It may be /index.html, so let the dev server try serving it again.
195+
devServer.use(devServer.middleware);
196+
}
197+
153198
function runDevServer(port) {
154-
new WebpackDevServer(compiler, {
155-
historyApiFallback: true,
199+
var devServer = new WebpackDevServer(compiler, {
156200
hot: true, // Note: only CSS is currently hot reloaded
157201
publicPath: config.output.publicPath,
158202
quiet: true
159-
}).listen(port, (err, result) => {
203+
});
204+
addMiddleware(devServer);
205+
devServer.listen(port, (err, result) => {
160206
if (err) {
161207
return console.log(err);
162208
}

0 commit comments

Comments
 (0)