Norvell's Public Machinations
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-utils-hmr-prefix

1.0.2 • Public • Published

react-utils-hmr-prefix

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

npm version

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

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

Install

npm i react-utils-hmr-prefix

DownloadsWeekly Downloads

42

Version

1.0.2

License

ISC

Unpacked Size

15.5 kB

Total Files

5

Last publish

Collaborators

  • avatar