react-utils-hmr-prefix

If you familier with Create react app and the prefix bug, you came to right place!

Over View

The problematic code:

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

As you can see in the above code, the sockJS implementation is Hard Coded in the code, that means that you can't add a prefix to your development hmr socket.

if you will try using your app with a prerix, for example:

http://localhost:3000/prefix

it's not going to work, no matter how hard you try.

react-utils-hmr-prefix will help you to accomplish the above with minimum changes.

Installation

npm i react-utils-hmr-prefix -D

requirements

• use eject (link)

Implementation

webpack.config.dev.js

require.resolve('react-dev-utils/webpackHotDevClient') // this line should be change to the line below
require.resolve('react-utils-hmr-prefix')

env.js

 PUBLIC_URL: publicUrl,
 SOCK_JS_PREFIX: 'myCustomPrefix' //add this line to the file with your prefix

public/index.html

 <!-- add this line into your head tag -->
 <meta id="dev-sock-js" content="%SOCK_JS_PREFIX%">

Those actions will create a socket on your origin + the custom prefix, for example http://localhost:3000/myCustomPrefix