UseStaticFiles conflicting with UseWebpackDevMiddleware

[andyfurniss4]

Describe the bug

I have set up Webpack for my project to compile TypeScript and Sass and do my bundling for me. I am using UseWebpackDevMiddleware from Microsoft.AspNetCore.SpaServices to enable Hot Module Replacement when developing locally. I am also using Webpack for G-Zip pre-compression. To serve my compressed files I am providing a method to the OnPrepareResponse property of StaticFileOptions and passing this into the UseStaticFiles middleware where I will intercept calls to files and serve the G-zipped versions manually.

I am encountering problems using these two pieces of middleware together. It seems that using them together means that certain files are not intercepteed by the Static Files middleware (i.e. my big JavaScript bundle that I desperately want to replace with the compressed version). If I add a breakpoint in to my custom OnPrepareResponse action, it will not be hit for my Webpack-compiled files. It is only hit for a couple of images and my favicon. This prevents me from doing what I need to do with regards to serving compressed files.

When I remove UseWebpackDevMiddleware from my Configure method, all works as expected and my JavaScript files are intercepted.

To Reproduce

Using .NET Core 2.1

File structure:

TypeScript files from js folder and Sass files from css folder are compiled into dist/main.js and dist/bundles.css.

Relevant code from Startup.cs

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	if (env.IsDevelopment())
	{
		//app.UseBrowserLink();
		app.UseDeveloperExceptionPage();
		app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
		{
		   HotModuleReplacement = true
		});
	}
	else
	{
		app.UseHsts();
		app.UseHttpsRedirection();
		app.UseExceptionHandler("/Error");
	}

	app.UseSession();
	app.UseAuthentication();
	app.UseStaticFiles(StaticFileOptions);

	app.UseMvcWithDefaultRoute();
}

private StaticFileOptions StaticFileOptions
{
	get
	{
		return new StaticFileOptions
		{
			OnPrepareResponse = OnPrepareResponse
		};
	}
}

private void OnPrepareResponse(StaticFileResponseContext context)
{
	var mimeTypeProvider = new FileExtensionContentTypeProvider();
	var headers = context.Context.Response.Headers;
	var contentType = headers["Content-Type"];

	if (contentType != "application/x-gzip" && !context.File.Name.EndsWith(".gz"))
	{
		return;
	}

	var fileNameToTry = context.File.Name.Substring(0, context.File.Name.Length - 3);

	if (mimeTypeProvider.TryGetContentType(fileNameToTry, out var mimeType))
	{
		headers.Add("Content-Encoding", "gzip");
		headers["Content-Type"] = mimeType;
	}
}

Expected behavior

HMR to work using UseWebpackDevMiddleware as well as static files in dist folder to be intercepted to allow me to do what I need to do regarding compression and headers etc.

Screenshots

N/A

Additional context

N/A

[Tratcher]

@SteveSandersonMS

[mkArtakMSFT]

Thanks for contacting us, @andyfurniss4.
@ryanbrandenburg can you please look into this? Thanks!

[dpr-dev]

@ryanbrandenburg this happens because we are processing all files from /dist using webpack middleware.

should we ignore the public path ? (the second call of UseProxyToLocal...)

// Proxy the corresponding requests through ASP.NET and into the Node listener
// Anything under /<publicpath> (e.g., /dist) is proxied as a normal HTTP request with a typical timeout (100s is the default from HttpClient),
// plus /__webpack_hmr is proxied with infinite timeout, because it's an EventSource (long-lived request).
foreach (var publicPath in devServerInfo.PublicPaths)
{
        appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath + hmrEndpoint, devServerInfo.Port, Timeout.InfiniteTimeSpan);
        appBuilder.UseProxyToLocalWebpackDevMiddleware(publicPath, devServerInfo.Port, TimeSpan.FromSeconds(100));
}

[dpr-dev]

we can try to remove the proxy for all static files in /dist folder (and other publicPaths without hmlEndpoint), but if we change the output folder (in the webpack configuration), we will not be able to find assests from the dev server

[mkArtakMSFT]

@javiercn thoughts here?