react-aspnet-boilerplate icon indicating copy to clipboard operation
react-aspnet-boilerplate copied to clipboard

Hot Module Replacement

Open albertromkes opened this issue 8 years ago • 7 comments

Is it possible to use the Hot Module Replacement plugin? I've played around with it in the dev.webpack.config file (and start it with 'webpack-dev-server --config dev.webpack.config') but I can't get it to work.

I also updated the configureStore method like this:

export default function configureStore(initialState, history, client) {
  const enhancer = compose(
    applyMiddleware(thunk),
    applyMiddleware(routerMiddleware(history)),
    applyMiddleware(createMiddleware(client)),
    devTools
  )(createStore);

  const finalEnhancer = enhancer(reducer, initialState);
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducer', () => {
      const nextRootReducer = require('./reducer');
      finalEnhancer.replaceReducer(nextRootReducer);
    });
  }
  // return enhancer(reducer, initialState);
  return finalEnhancer;
}

Any clues?

albertromkes avatar Apr 20 '16 20:04 albertromkes

This is something I have been meaning to look into. It should be possible.

Html.js needs to be update to point at the separate instance of the webpack dev server. The application would be hosted on http://localhost:80/, while the scripts load from http://localhost:81:/ (webpack dev server).

The server generated scripts will not support hot-reloading, since it doesn't really apply. However, there is a similar mechanism. run gulp watch, and as you change your files, the server.generated.js will get updated. The application internally monitors this file, and refreshes if it senses that it changed.

Once you get client.generated.js served up from webpack dev server, you should be golden from there. You will probally have to update some code (as you have found) because I initially didn't plan on supporting it. I'm open for some PRs though ;)

pauldotknopf avatar Apr 20 '16 20:04 pauldotknopf

I was trying to use webpack-dev-server with a .net application and most of it works by starting 2 servers (the .net server to serve the content/data-endpoints and webpack-dev-server to serve the bundle with hot loading).

Using the following repo has hot loading, redux and and the redux dev tool:

https://github.com/gaearon/redux-devtools.git

Then I use webpack-dev-server proxy settings to have any missing content proxy to my .net application. This would work fine but the proxy does not seem to support ntlm (the .net application uses ntlm) and I am unable to mock/set a domain user in my dev environment (IIS Express/.net app).

Maybe you have solved this issue in a different way and I would curious to know how: http://stackoverflow.com/questions/37928251/authenticate-net-web-application-as-specific-user

amsterdamharu avatar Jun 21 '16 08:06 amsterdamharu

@amsterdamharu, this is the next issue/feature that I will be tackling. I will keep you updated. Probably won't get to it until this weekend.

pauldotknopf avatar Jun 21 '16 13:06 pauldotknopf

I am also having a similar issue where I have webpack-dev-server on one port and asp.net core running on the other, but whenever the hot module replacement api kicks in it searches for the update on the wrong port.

kosinw avatar Jul 01 '16 23:07 kosinw

Any updates on this? Thank you :)

georgiosd avatar Jun 14 '17 10:06 georgiosd

No, sorry. I have been swamped at my current position in lower level embedded Linux stuff. Not sure when I will have time to get back to this, ATM.

pauldotknopf avatar Jun 14 '17 15:06 pauldotknopf

@pauldotknopf I can relate, no probs.

Would you be open to giving us a list of steps to implement this, in detail, and give some guidance with problems? I'd be open to sending over a PR if I can crack the nut.

georgiosd avatar Jun 14 '17 15:06 georgiosd