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's mean that you can't add prefix to your development hmr socket.

if you will try to use your app with prerix for example

http://localhost:3000/prefix

it's not gonna work, no metter how hard you will 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 socket on yout origin + the custom prefix, for example http://localhost:3000/myCustomPrefix