Menu
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?
344
As is usually the case in software engineering, the answer is “it depends.” If you're building a basic Express app that runs on Node. js, you don't need Webpack at all.
js. Webpack runs on Node. js, a JavaScript runtime that can be used in computers and servers outside a browser environment.
When you run webpack dev server what webpack dev server does is, instead of creating a bundled file ( e.g. bundle. js ) in dist folder, it creates a bundled file in memory. It then serves that information to express , and then express creates a web socket connection to render that on the browser on a certain port no.
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
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
