Can i eject react-dev-utils files?

Can someone tell me if is there any way to override webpackHotDevClient.js file (which is in the react-dev-utils package) and the webpack.config.js (which is in the react-scripts package) ?

In the webpackHotDevClient i want to change :

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

to

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

And in webpack.config.js change the publicPath property to publicPath: “/Apps/MyApp/app/”. Because my app is in mydomain.com/Apps/MyApp/app/

So i can use hot dev server reloading through https.

edit : i have tryed eject command and i have the webpack.config.js in a config folder but not the webpackHotDevClient.js file. So is it possible to have an equivalent or a work around so i can edit the webpackHotDevClient.js settings as said above. Right now i’m directly editing the file in the node_modules folder.

[djhouseknecht]

@shiglet , as a temporary fix you can do this to manually eject it:

1. Copy node_modules/react-dev-utils/webpackHotDevClient.js to your app’s root project (something like: config/webpackHotDevClient.js).

   1. It should be in the same directory as your webpack.config.js and wepackDevServer.config.js.

2. Edit these lines in config/webpackHotDevClient.js:

// find these two lines
var launchEditorEndpoint = require('./launchEditorEndpoint');
var formatWebpackMessages = require('./formatWebpackMessages');

// and change to 
var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

// find and make your desired change
var connection = new WebSocket(
  url.format({
    protocol: window.location.protocol === 'https:' ? 'wss' : 'ws', // <- change to this
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

1. Edit this line in config/webpack.configs.js

  // find this 
  isEnvDevelopment &&
  require.resolve('react-dev-utils/webpackHotDevClient'),

  // change to this
  isEnvDevelopment &&
  require.resolve('./webpackHotDevClient'),

That should give you the control you need. Once that new version of react-dev-utils is published, you can undo those changes to sync back up.

[heyimalex]

@djhouseknecht RE:

Is there a way to have react-dev-utils version bumped with those changes? I am not familiar with build/versioning process.

That PR should land in 3.3.1 which we’re planning to release soon. The holidays have slowed things down a bit, sorry for any trouble!