behavior of static and historyApiFallback

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: #2670 (comment)

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

webpack-dev-server/lib/Server.js

Lines 548 to 559 in 4ab1f21

    
           runnableFeatures.push('setup', 'before', 'headers', 'middleware'); 
        
           if (this.options.proxy) { 
        
             runnableFeatures.push('proxy', 'middleware'); 
        
           } 
        
           if (this.options.contentBase !== false) { 
        
             runnableFeatures.push('contentBaseFiles'); 
        
           } 
        
           if (this.options.historyApiFallback) { 
        
             runnableFeatures.push('historyApiFallback', 'middleware');

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.

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

historyApiFallback also break HEAD request in some cases, we need fix it, more information here webpack/webpack-dev-middleware#749

chore: bump connect-history-api-fallback from 1.6.0 to 2.0.0 (webpack…

Partially fixed #4501

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:

webpack-dev-server/lib/Server.js

Lines 2174 to 2189 in 49efdf8

    
           const getProxyMiddleware = (proxyConfig) => { 
        
             // It is possible to use the `bypass` method without a `target` or `router`. 
        
             // However, the proxy middleware has no use in this case, and will fail to instantiate. 
        
             if (proxyConfig.target) { 
        
               const context = proxyConfig.context || proxyConfig.path; 
        
               return createProxyMiddleware( 
        
                 /** @type {string} */ (context), 
        
                 proxyConfig 
        
               ); 
        
             } 
        
             if (proxyConfig.router) { 
        
               return createProxyMiddleware(proxyConfig); 
        
             } 
        
           };

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.

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?

Refactor webpack-dev-server middleware application logic

Navigation Menu

Repository navigation

behavior of static and historyApiFallback #2716

Expected Behavior

Actual Behavior

Solution

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

	runnableFeatures.push('setup', 'before', 'headers', 'middleware');

	if (this.options.proxy) {
	runnableFeatures.push('proxy', 'middleware');
	}

	if (this.options.contentBase !== false) {
	runnableFeatures.push('contentBaseFiles');
	}

	if (this.options.historyApiFallback) {
	runnableFeatures.push('historyApiFallback', 'middleware');

	const getProxyMiddleware = (proxyConfig) => {
	// It is possible to use the `bypass` method without a `target` or `router`.
	// However, the proxy middleware has no use in this case, and will fail to instantiate.
	if (proxyConfig.target) {
	const context = proxyConfig.context \|\| proxyConfig.path;

	return createProxyMiddleware(
	/** @type {string} */ (context),
	proxyConfig
	);
	}

	if (proxyConfig.router) {
	return createProxyMiddleware(proxyConfig);
	}
	};

behavior of static and historyApiFallback #2716

Description

Expected Behavior

Actual Behavior

Solution

Activity

csr632 commented on Feb 1, 2021

alexander-akait commented on Sep 13, 2021

alexander-akait commented on Jun 28, 2022

BRMatt commented on Sep 28, 2022

alexander-akait commented on Sep 28, 2022

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions