Skip to content

Commit f1dac3c

Browse files
heygradyheygrady
committed
adding env variables for sockHost and sockPort options
1 parent 763c7a3 commit f1dac3c

File tree

5 files changed

+21
-7
lines changed

5 files changed

+21
-7
lines changed

‎docusaurus/docs/advanced-configuration.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ You can adjust various development and production settings by setting environmen
1414
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
1515
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
1616
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
17-
| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set to `/pathname`, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. |
17+
| WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. |
18+
| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. |
19+
| WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details. |
1820
| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
1921
| CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
2022
| REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](<https://en.wikipedia.org/wiki/PATH_(variable)>) environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. |

‎packages/react-dev-utils/WebpackDevServerUtils.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -378,10 +378,13 @@ function prepareProxy(proxy, appPublicFolder) {
378378
// files in the public folder and requests to the WebpackDevServer socket endpoint.
379379
// https://github.com/facebook/create-react-app/issues/6720
380380
const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node';
381+
const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
381382
function mayProxy(pathname) {
382383
const maybePublicPath = path.resolve(appPublicFolder, pathname.slice(1));
383384
const isPublicFileRequest = fs.existsSync(maybePublicPath);
384-
const isWdsEndpointRequest = pathname.startsWith(sockPath); // used by webpackHotDevClient
385+
// used by webpackHotDevClient
386+
const isWdsEndpointRequest =
387+
isDefaultSockHost && pathname.startsWith(sockPath);
385388
return !(isPublicFileRequest || isWdsEndpointRequest);
386389
}
387390

‎packages/react-dev-utils/webpackHotDevClient.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,8 @@ if (module.hot && typeof module.hot.dispose === 'function') {
6060
var connection = new WebSocket(
6161
url.format({
6262
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
63-
hostname: window.location.hostname,
64-
port: window.location.port,
63+
hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
64+
port: process.env.WDS_SOCKET_PORT || window.location.port,
6565
// Hardcoded in WebpackDevServer
6666
pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
6767
slashes: true,

‎packages/react-scripts/config/env.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,13 @@ function getClientEnvironment(publicUrl) {
8686
// images into the `src` and `import` them in code to get their paths.
8787
PUBLIC_URL: publicUrl,
8888
// We support configuring the sockjs pathname during development.
89-
// This lets a developer run multiple simultaneous projects.
90-
// It is used as the connection `pathname` in webpackHotDevClient.
91-
// It is used as the `sockPath` option in webpack dev server.
89+
// These settings let a developer run multiple simultaneous projects.
90+
// They are used as the connection `hostname`, `pathname` and `port`
91+
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
92+
// and `sockPort` options in webpack-dev-server.
93+
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
9294
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
95+
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
9396
}
9497
);
9598
// Stringify all values so we can feed into Webpack DefinePlugin

‎packages/react-scripts/config/webpackDevServer.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ const fs = require('fs');
1717

1818
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
1919
const host = process.env.HOST || '0.0.0.0';
20+
const sockHost = process.env.WDS_SOCKET_HOST;
2021
const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
22+
const sockPort = process.env.WDS_SOCKET_PORT;
2123

2224
module.exports = function(proxy, allowedHost) {
2325
return {
@@ -74,7 +76,11 @@ module.exports = function(proxy, allowedHost) {
7476
// `webpackHotDevClient`.
7577
injectClient: false,
7678
// Enable custom sockjs pathname for websocket connection to hot reloading server.
79+
// Enable custom sockjs hostname, pathname and port for websocket connection
80+
// to hot reloading server.
81+
sockHost,
7782
sockPath,
83+
sockPort,
7884
// It is important to tell WebpackDevServer to use the same "root" path
7985
// as we specified in the config. In development, we always serve from /.
8086
publicPath: '/',

0 commit comments

Comments
 (0)