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?

Solution

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

Comments

[Brick Yang]

Thx! So can I say the best practice of using react-hot-loader is to use the middlewares you mentioned? What if considering the production env? I don't think I need live-reloadering in that, right? So should I delete the middlewares codes?

[trekforever]

react-hot-loader is getting depreciated, so I would look into github.com/gaearon/react-transform-hmr (it's by the same author). Yes, you don't need live-reloading for production, so in your server.js I would just conditionally check the env. If it's development, use the middleware. else, just skip that.

[Madara's Ghost]

Thank you for the detailed answer! Once you have that in place, what do you do in production?

[Chris]

@BrickYang I am running Rails v3 and Rails v4 apps on Phusion Passenger (in production environemnet). If I were to build a Rails 5.1 application in my dev box (Ubuntu) and use Webpack, why can't "localhost" serve out assets? Why is a webpack-dev-server needed?

[Brick Yang]

@Chris I am not familiar with Rails but I do use webpack-dev-server now. You don't really build any file to disk in dev env, so there is no such file can be served in localhost. The webpack-dev-server generate and serve the files in memory. Before deploy the app, you need to run webpack once to build real files to disk for pro env.