Dynamic hostname and port of hot update manifest

[kentor]

Say my app is served on port 3000, and I have webpack dev server running on port 45537. I'm only using the dev server for assets/hot reloading, not serving the html files, that is taken care of by something else (django, rails, whatever). The thing is, I may access this app using different hostnames or IPs (e.g. localhost, 10.0.2.2, the internal network IP of the server) so I want the hot reloading stuff to work no matter how/where I am accessing the app.

Command used to start webpack-dev-server:

webpack-dev-server --config webpack.hot.config.js --host 0.0.0.0 --port 45537 --hot --no-info

conifg:

const path = require('path');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:45537',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src', 'js', 'app.js'),
  ],
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel-loader'],
        test: /\.js$/,
      },
    ],
  },
  output: {
    filename: 'app.js',
    publicPath: '/',
  },
};

In my html file, I have this at the bottom to load webpack-dev-server.js and my app bundle:

    <script>
      !function() {
        var host = location.host.split(':')[0];
        document.write(
          '<script src="http://' + host + ':45537/app.js"></' + 'script>'
        );
      }()
    </script>

The problem is when I reload a file, it tries to grab the manifest from port 3000 instead of 45537:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
GET http://192.168.1.45:3000/0f047ad04fb3ea0a8b54.hot-update.json 404 (Not Found)

Of course, specifing the publicPath as http://localhost:45537/ would only work if I am on the same computer as the dev server, so that's not what I am looking for.

[sokra]

You can set the publicPath at runtime (in webpack compiled modules):

__webpack_public_path__ = 'http://' + host + ':45537/js/'

[kentor]

I don't understand. I followed http://webpack.github.io/docs/configuration.html#output-publicpath, (the warning about the Hot Module Replace Plugin needing to be disabled scares me, if I can't use HMR then what's the point of this?) and created a file called webpack.init.js and in it put

var host = window.location.host.split(':')[0];
__webpack_public_path__ = 'http://' + host + ':45537/';

and then I modified my entry list to include it:

 entry: [
    './webpack.init.js',
    'webpack/hot/only-dev-server',
    path.join(__dirname, 'src', 'js', 'app.js'),
  ],

That didn't seem to affect anything.

[sokra]

the warning about the Hot Module Replace Plugin needing to be disabled scares me, if I can't use HMR then what's the point of this?

The note is wrong, I removed it.

---

hmmm... it should work that way.

[kentor]

Yeah I see the source code says

function hotDownloadManifest(callback) { // eslint-disable-line no-unused-vars
/******/        if(typeof XMLHttpRequest === "undefined")
/******/            return callback(new Error("No browser support"));
/******/        try {
/******/            var request = new XMLHttpRequest();
/******/            var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json";

and with my webpack.init.js in the entry file I see in the compiled output

/* 1 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(module) {/* REACT HOT LOADER */ if (true) { (function () { var ReactHotAPI = __webpack_require__(3), RootInstanceProvider = __webpack_require__(11), ReactMount = __webpack_require__(13), React = __webpack_require__(67); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {

    'use strict';

    var host = window.location.host.split(':')[0];
    __webpack_require__.p = 'http://' + host + ':45537/';

Seems like it should work. But __webpack_require__ is a different object in the 1 module than the __webpack_require__ in the hotDownloadManifest function.

[kentor]

I think I need to modify __webpack_public_path__ in module 0 instead of any other later module because of this:

/******/    function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars
/******/        var me = installedModules[moduleId];
/******/        if(!me) return __webpack_require__;
/******/        var fn = function(request) {

Whatever me is is undefined only the first time we go through this path when moduleId is 0. So.. how do I do that? (Maybe that warning about HMR was right after all?)

[aaronjensen]

My config is a bit different than yours. I just run webpack-dev-server --config webpack.hot.config.js

Here are the relevant parts of my config:

  entry: [
      'webpack/hot/only-dev-server',
      './js/application.js',
  ],
    output: {
      path: path.join(__dirname, 'public'),
      filename: path.join('assets', 'js', 'application.js'),
      chunkFilename: path.join('assets', 'js', '[id].js'),
      sourceMapFilename: path.join('assets', 'js', '[file].map'),
      publicPath: '/',
    },

  devServer: {
    contentBase: './public',
    historyApiFallback: true,
    host: '0.0.0.0',
    hot: true,
    port: 4001,
    publicPath: '/',
    noInfo: true,
    stats: { colors: true },
    watchOptions: {
      aggregateTimeout: 50,
    },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],

  },

[kentor]

Thanks @aaronjensen. I think I see why it's working for you but not for me. You are actually accessing the html page served by the dev-server (so same port as the assets) whereas I am only using the dev-server to serve assets and I'm using some other app (and port) to serve the html, so hot reloading would work in your case because the url of the manifest that webpack tries to grab will have the correct port.

[aaronjensen]

Hi @kentor, good, hope that helps you get sorted. FWIW, we actually are on different ports than the browser sees as well because of browser-sync, so I do this:

    <script>
      var devServer = document.createElement('script');
      devServer.setAttribute('src', 'http://' + window.location.host.replace('4000', '4001') + '/webpack-dev-server.js');
      document.body.appendChild(devServer);
    </script>

Note the .replace(...)

[kentor]

@aaronjensen Ah ok. I can load webpack-dev-server.js fine. I'm not sure if you're using react-hot-loader, but the thing that's broken for me is when I save a react component module then webpack doesn't use the correct port to get the manifest file. This is what I see when I save a react component file:

In your case, it would try port 4000 instead of 4001 to grab the manifest file, no?

[aaronjensen]

@kentor yes, you're right. And since browser-sync proxies to webpack-dev-server, this works for me. If your server isn't proxying, that won't work 😦 This whole thing is a bit more complicated than it seems it should be.

[kentor]

I'm using browserify-hmr now since that allows changing the websocket url at runtime so I'm going to close this. Thanks for the help anyway!