Skip to content

Commit 159c7f5

Browse files
jamesblightTimer
jamesblight
authored and
Timer
committed
Allow custom proxies in development (facebook#1790)
* Change proxy handling to allow multiple proxies to be specified in package.json. * Up webpack-dev-server to 2.4.2 Webpack Dev Server version 2.4.2 handles the external websocket upgrade for all proxies * Fix the listen() call * Switch to correct default host * Remove promises and extract to react-dev-utils * oops
1 parent bcbd308 commit 159c7f5

File tree

3 files changed

+87
-261
lines changed

3 files changed

+87
-261
lines changed

‎config/webpackDevServer.config.js

+65-45
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,74 @@
1010
// @remove-on-eject-end
1111
'use strict';
1212

13+
const launchEditor = require('react-dev-utils/launchEditor');
1314
const config = require('./webpack.config.dev');
1415
const paths = require('./paths');
1516

1617
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
17-
const host = process.env.HOST || 'localhost';
18+
const host = process.env.HOST || '0.0.0.0';
1819

19-
module.exports = {
20-
// Enable gzip compression of generated files.
21-
compress: true,
22-
// Silence WebpackDevServer's own logs since they're generally not useful.
23-
// It will still show compile warnings and errors with this setting.
24-
clientLogLevel: 'none',
25-
// By default WebpackDevServer serves physical files from current directory
26-
// in addition to all the virtual build products that it serves from memory.
27-
// This is confusing because those files won’t automatically be available in
28-
// production build folder unless we copy them. However, copying the whole
29-
// project directory is dangerous because we may expose sensitive files.
30-
// Instead, we establish a convention that only files in `public` directory
31-
// get served. Our build script will copy `public` into the `build` folder.
32-
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
33-
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
34-
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
35-
// Note that we only recommend to use `public` folder as an escape hatch
36-
// for files like `favicon.ico`, `manifest.json`, and libraries that are
37-
// for some reason broken when imported through Webpack. If you just want to
38-
// use an image, put it in `src` and `import` it from JavaScript instead.
39-
contentBase: paths.appPublic,
40-
// By default files from `contentBase` will not trigger a page reload.
41-
watchContentBase: true,
42-
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
43-
// for the WebpackDevServer client so it can learn when the files were
44-
// updated. The WebpackDevServer client is included as an entry point
45-
// in the Webpack development configuration. Note that only changes
46-
// to CSS are currently hot reloaded. JS changes will refresh the browser.
47-
hot: true,
48-
// It is important to tell WebpackDevServer to use the same "root" path
49-
// as we specified in the config. In development, we always serve from /.
50-
publicPath: config.output.publicPath,
51-
// WebpackDevServer is noisy by default so we emit custom message instead
52-
// by listening to the compiler events with `compiler.plugin` calls above.
53-
quiet: true,
54-
// Reportedly, this avoids CPU overload on some systems.
55-
// https://github.com/facebookincubator/create-react-app/issues/293
56-
watchOptions: {
57-
ignored: /node_modules/,
58-
},
59-
// Enable HTTPS if the HTTPS environment variable is set to 'true'
60-
https: protocol === 'https',
61-
host: host,
62-
overlay: false,
20+
module.exports = function(proxy) {
21+
return {
22+
// Enable gzip compression of generated files.
23+
compress: true,
24+
// Silence WebpackDevServer's own logs since they're generally not useful.
25+
// It will still show compile warnings and errors with this setting.
26+
clientLogLevel: 'none',
27+
// By default WebpackDevServer serves physical files from current directory
28+
// in addition to all the virtual build products that it serves from memory.
29+
// This is confusing because those files won’t automatically be available in
30+
// production build folder unless we copy them. However, copying the whole
31+
// project directory is dangerous because we may expose sensitive files.
32+
// Instead, we establish a convention that only files in `public` directory
33+
// get served. Our build script will copy `public` into the `build` folder.
34+
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
35+
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
36+
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
37+
// Note that we only recommend to use `public` folder as an escape hatch
38+
// for files like `favicon.ico`, `manifest.json`, and libraries that are
39+
// for some reason broken when imported through Webpack. If you just want to
40+
// use an image, put it in `src` and `import` it from JavaScript instead.
41+
contentBase: paths.appPublic,
42+
// By default files from `contentBase` will not trigger a page reload.
43+
watchContentBase: true,
44+
// Enable hot reloading server. It will provide /sockjs-node/ endpoint
45+
// for the WebpackDevServer client so it can learn when the files were
46+
// updated. The WebpackDevServer client is included as an entry point
47+
// in the Webpack development configuration. Note that only changes
48+
// to CSS are currently hot reloaded. JS changes will refresh the browser.
49+
hot: true,
50+
// It is important to tell WebpackDevServer to use the same "root" path
51+
// as we specified in the config. In development, we always serve from /.
52+
publicPath: config.output.publicPath,
53+
// WebpackDevServer is noisy by default so we emit custom message instead
54+
// by listening to the compiler events with `compiler.plugin` calls above.
55+
quiet: true,
56+
// Reportedly, this avoids CPU overload on some systems.
57+
// https://github.com/facebookincubator/create-react-app/issues/293
58+
watchOptions: {
59+
ignored: /node_modules/,
60+
},
61+
// Enable HTTPS if the HTTPS environment variable is set to 'true'
62+
https: protocol === 'https',
63+
host: host,
64+
overlay: false,
65+
historyApiFallback: {
66+
// Paths with dots should still use the history fallback.
67+
// See https://github.com/facebookincubator/create-react-app/issues/387.
68+
disableDotRule: true,
69+
},
70+
proxy,
71+
setup(app) {
72+
// This lets us open files from the crash overlay.
73+
app.use(function launchEditorMiddleware(req, res, next) {
74+
if (req.url.startsWith('/__open-stack-frame-in-editor')) {
75+
launchEditor(req.query.fileName, req.query.lineNumber);
76+
res.end();
77+
} else {
78+
next();
79+
}
80+
});
81+
},
82+
};
6383
};

‎scripts/start.js

+22-28
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const paths = require('../config/paths');
3535
const config = require('../config/webpack.config.dev');
3636
const devServerConfig = require('../config/webpackDevServer.config');
3737
const createWebpackCompiler = require('./utils/createWebpackCompiler');
38-
const addWebpackMiddleware = require('./utils/addWebpackMiddleware');
38+
const prepareProxy = require('react-dev-utils/prepareProxy');
3939

4040
const useYarn = fs.existsSync(paths.yarnLockFile);
4141
const cli = useYarn ? 'yarn' : 'npm';
@@ -73,34 +73,28 @@ function run(port) {
7373
}
7474
);
7575

76+
// Load proxy config
77+
const proxy = require(paths.appPackageJson).proxy;
7678
// Serve webpack assets generated by the compiler over a web sever.
77-
const devServer = new WebpackDevServer(compiler, devServerConfig);
78-
79-
// Our custom middleware proxies requests to /index.html or a remote API.
80-
addWebpackMiddleware(devServer)
81-
.then(() => {
82-
// Launch WebpackDevServer.
83-
devServer.listen(port, HOST, err => {
84-
if (err) {
85-
return console.log(err);
86-
}
87-
88-
if (isInteractive) {
89-
clearConsole();
90-
}
91-
console.log(chalk.cyan('Starting the development server...'));
92-
console.log();
93-
94-
openBrowser(`${protocol}://${HOST}:${port}/`);
95-
});
96-
})
97-
.catch(e => {
98-
console.log(
99-
chalk.red('Failed to setup middleware, please report this error:')
100-
);
101-
console.log(e);
102-
process.exit(1);
103-
});
79+
const devServer = new WebpackDevServer(
80+
compiler,
81+
devServerConfig(prepareProxy(proxy))
82+
);
83+
84+
// Launch WebpackDevServer.
85+
devServer.listen(port, HOST, err => {
86+
if (err) {
87+
return console.log(err);
88+
}
89+
90+
if (isInteractive) {
91+
clearConsole();
92+
}
93+
console.log(chalk.cyan('Starting the development server...'));
94+
console.log();
95+
96+
openBrowser(`${protocol}://${HOST}:${port}/`);
97+
});
10498
}
10599

106100
// We attempt to use the default port but if it is busy, we offer the user to

‎scripts/utils/addWebpackMiddleware.js

-188
This file was deleted.

0 commit comments

Comments
 (0)