webpack-dev-server icon indicating copy to clipboard operation
webpack-dev-server copied to clipboard

behavior of static and historyApiFallback

Open knagaitsev opened this issue 3 years ago • 5 comments

Expected Behavior

Static serving middleware for the dev server should only need to be applied to the express server once via this.app.use(...)

Actual Behavior

static middleware is applied to the express server multiple times in order to make historyApiFallback work as expected. This is explained here: https://github.com/webpack/webpack-dev-server/pull/2670#discussion_r464946541

A similar thing seems to have been added for the middleware feature as seen here, as it is added multiple times:

https://github.com/webpack/webpack-dev-server/blob/4ab1f21bc85cc1695255c739160ad00dc14375f1/lib/Server.js#L548-L559

Solution

We need to find a way to either apply all of this middleware once without having any breaking changes, or have intentional slight breaking changes while only applying the middleware once. We should also look into if applying the same middleware many times causes performance losses, or if it is an acceptable thing to do.

knagaitsev avatar Aug 20 '20 17:08 knagaitsev

Yes, if the proxy feature or the historyApiFallback feature is enabled, http-proxy-middleware will be applied to the express server multiple times.

csr632 avatar Feb 01 '21 06:02 csr632

historyApiFallback also break HEAD request in some cases, we need fix it, more information here https://github.com/webpack/webpack-dev-middleware/issues/749

alexander-akait avatar Sep 13 '21 23:09 alexander-akait

Partially fixed https://github.com/webpack/webpack-dev-server/pull/4501

alexander-akait avatar Jun 28 '22 16:06 alexander-akait

I ran into this issue earlier and spent a few hours trying to debug it. In my case it turned out that configuring the webpack-dev-server proxy option with context and router options, but not target causes webpack-dev-server to ignore the context option when configuring the proxy:

https://github.com/webpack/webpack-dev-server/blob/49efdf87341d4e40106baae60670a4aabf3285fb/lib/Server.js#L2174-L2189

My understanding is that if you're using router you don't need to specify target, but if I don't then webpack-dev-server configures the proxy to intercept every request, rather than just the requests that match the context.

In my case I'm only proxying a single endpoint, so I've configured context and target to the same value, and let the router reconfigure the target on each request. This appears to fix the conflict with historyApiFallback.

BRMatt avatar Sep 28 '22 11:09 BRMatt

I think we can improve/fix:

return createProxyMiddleware(proxyConfig); 

So we will always pass options even you don't have router, what do you think?

alexander-akait avatar Sep 28 '22 16:09 alexander-akait