Closed romanlex closed 4 years ago
This version of package https://github.com/facebook/create-react-app/blob/next/packages/react-dev-utils/webpackHotDevClient.js It used in create-react-app
hi @romanlex
i'm not sure i understand what you're trying to achieve. what is the reason for using package with webpackHotDevClient directly?
the code you sent (webpackHotDevClient) seems to be a client code for create-react-app implementation of webpack-dev-server. browser-sync itself has the similar code as it serves a similar purpose. for ones who want to use both browser-sync and webpack-dev-server simultaneously, there's an example in package docs. in this case nobody really cares for what browser-sync or webpack-dev-server really does on client, your just need to match ports and other options on backend.
this client has another link for RHL /sockjs-node
but browser-sync-plugin doesn't has websocket proxy connection or support rewrite rules for this
new BrowserSyncPlugin(
{
host: HOST,
port: port,
notify: BROWSER_NOTIFY === 'true',
open: BROWSER_OPEN === 'true',
injectCss: true,
https: process.env.HTTPS === 'true',
logLevel: 'info',
cors: true,
proxy: {
target: `${protocol}://${HOST}:${port + 1}`,
ws: true,
},
ui: { port: port + 2 },
},
{
reload: false,
},
),
In my case I use nginx as proxy for all local domains and sockjs connection not work properly. May be this info help someone
location /sockjs-node {
proxy_pass http://127.0.0.1:3001; // webpack hot client
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
location / {
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header Connection "upgrade";
proxy_set_header Upgrade $http_upgrade;
proxy_read_timeout 300;
proxy_send_timeout 300;
proxy_buffering off;
proxy_cache off;
proxy_redirect off;
proxy_pass http://127.0.0.1:3000; // BrowserSync plugin
}
sorry for delay. i'm glad you've figured this exotic use-case out. gonna close the issue now. thanks
Hello, how it use with webpackHotDevClient from react-dev-utils? Example pkg https://github.com/react-doc/webpack-hot-dev-clients/blob/master/webpackHotDevClient.js It use window.location.hostname & window.location.port for work this