public static void UseWebpackDevMiddleware(this IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options = null)
{
// Validate options
if (options == null)
{
options = new WebpackDevMiddlewareOptions();
}
if (options.ReactHotModuleReplacement && !options.HotModuleReplacement)
{
throw new ArgumentException("To enable ReactHotModuleReplacement, you must also enable HotModuleReplacement.");
}
// Unlike other consumers of NodeServices, WebpackDevMiddleware dosen't share Node instances, nor does it
// use your DI configuration. It's important for WebpackDevMiddleware to have its own private Node instance
// because it must *not* restart when files change (if it did, you'd lose all the benefits of Webpack
// middleware). And since this is a dev-time-only feature, it doesn't matter if the default transport isn't
// as fast as some theoretical future alternative.
var appEnv = (IApplicationEnvironment)appBuilder.ApplicationServices.GetService(typeof(IApplicationEnvironment));
var nodeServices = Configuration.CreateNodeServices(new NodeServicesOptions {
HostingModel = NodeHostingModel.Http,
ProjectPath = appEnv.ApplicationBasePath,
WatchFileExtensions = new string[] {} // Don't watch anything
});
// Get a filename matching the middleware Node script
var script = EmbeddedResourceReader.Read(typeof(WebpackDevMiddleware), "/Content/Node/webpack-dev-middleware.js");
var nodeScript = new StringAsTempFile(script); // Will be cleaned up on process exit
// Tell Node to start the server hosting webpack-dev-middleware
var devServerOptions = new {
webpackConfigPath = Path.Combine(appEnv.ApplicationBasePath, options.ConfigFile ?? DefaultConfigFile),
suppliedOptions = options
};
var devServerInfo = nodeServices.InvokeExport <WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer", JsonConvert.SerializeObject(devServerOptions)).Result;
// Proxy the corresponding requests through ASP.NET and into the Node listener
var proxyOptions = new ConditionalProxyMiddlewareOptions(WebpackDevMiddlewareScheme, WebpackDevMiddlewareHostname, devServerInfo.Port.ToString());
appBuilder.UseMiddleware <ConditionalProxyMiddleware>(devServerInfo.PublicPath, proxyOptions);
// While it would be nice to proxy the /__webpack_hmr requests too, these return an EventStream,
// and the Microsoft.Aspnet.Proxy code doesn't handle that entirely - it throws an exception after
// a while. So, just serve a 302 for those.
appBuilder.Map(WebpackHotMiddlewareEndpoint, builder => {
builder.Use(next => async ctx => {
ctx.Response.Redirect($"{ WebpackDevMiddlewareScheme }://{ WebpackDevMiddlewareHostname }:{ devServerInfo.Port.ToString() }{ WebpackHotMiddlewareEndpoint }");
await Task.Yield();
});
});
}
private static void UseProxyToLocalWebpackDevMiddleware(this IApplicationBuilder appBuilder, string publicPath, int proxyToPort, TimeSpan requestTimeout)
{
// Note that this is hardcoded to make requests to "localhost" regardless of the hostname of the
// server as far as the client is concerned. This is because ConditionalProxyMiddlewareOptions is
// the one making the internal HTTP requests, and it's going to be to some port on this machine
// because aspnet-webpack hosts the dev server there. We can't use the hostname that the client
// sees, because that could be anything (e.g., some upstream load balancer) and we might not be
// able to make outbound requests to it from here.
// Also note that the webpack HMR service always uses HTTP, even if your app server uses HTTPS,
// because the HMR service has no need for HTTPS (the client doesn't see it directly - all traffic
// to it is proxied), and the HMR service couldn't use HTTPS anyway (in general it wouldn't have
// the necessary certificate).
var proxyOptions = new ConditionalProxyMiddlewareOptions(
"http", "localhost", proxyToPort.ToString(), requestTimeout);
appBuilder.UseMiddleware <ConditionalProxyMiddleware>(publicPath, proxyOptions);
}
