49

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?

Improve this question

1 Answer 1

Reset to default
64

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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?
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.
Thank you for the detailed answer! Once you have that in place, what do you do in production?
@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?
@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.