How it use with webpackHotDevClient

[romanlex]

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

[romanlex]

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

[Va1]

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.

[romanlex]

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
    }

[Va1]

sorry for delay. i'm glad you've figured this exotic use-case out. gonna close the issue now. thanks