Do I need webpack-dev-server if I am using a node server like express

Question

I am following some tutorials to build an isomorphic app with express and react. I am confusing with the webpack-dev-server.

The webpack tutorial says about the webpack-dev-server:

This binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically).

It automatically updates the browser page when a bundle is recompiled (socket.io). Open http://localhost:8080/webpack-dev-server/bundle in your browser.

Since I have express server, do I really need webpack-dev-server? Or what's the advantages and disadvantages of using it? And if I want to use react-hot-loader, is the webpack-dev-server necessary?

Answer 1

Since I have express server, do I really need webpack-dev-server?

Yes and no. You can use a hybrid approach, which essentially setup the webpack-dev-server as a proxy. You have your express server that serves everything except for assets. If it's an asset, the request gets forwarded/proxied to the webpack-dev-server. See the answer here for more details: How to allow for webpack-dev-server to allow entry points from react-router

Alternatively, you can use webpack-dev-middleware and webpack-hot-middleware instead if you don't want to deal with all the messy proxying logic and having 2 servers running. See the example here: https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js

what's the advantages and disadvantages of using it?

Live-reloading and hot module replacement. Very useful feature for development in my opinion

And if I want to use react-hot-loader, is the webpack-dev-server necessary?

Nope, it works on top of Webpack's hot module replacement interface. You can create your own 'hot server' if you want. The webpack-dev-server client just listen to socket.io for hot updates and calls postMessage (https://github.com/webpack/webpack-dev-server/blob/8e8f540b2f7b35f7b6c3ce616a7fd2215aaa6eea/client/index.js#L64-L67) which is then picked up by the server https://github.com/webpack/webpack/blob/bac9b48bfb0f7dd9732f2faafb43ebb22ee2a2a7/hot/only-dev-server.js#L59-L67.

Or what I recommend is that you can just use the webpack-dev-middleware and webpack-hot-middleware that I mentioned above instead. This way, you don't have to worrying about proxy logic and you can easily integrate hot reloading into your existing express server without the need for webpack-dev-server