Added OnPrepareResponse to the WebpackDevMiddleware #10

Closed
opened 2025-08-09 17:14:39 +00:00 by fergalmoran · 0 comments
Owner

Originally created by @PhotoAtomic on 10/18/2018

WebpackDevMiddleware doesn't allow to add heades to the generated response while using HMR. In certain scenario (using workbox for PWA) it is necessary to add headers to the returned swerviceworker file to broad the scope of the service worker and keep the solution clean.
While this is possible in production mode using the StaticFileMiddleware, this is not possible in development because of the "proxied" way the WebpackDevMiddleware works.
To keep consistency with the static file middleware which provide a OnPrepareResponse extension point i've implemented a similar mechanism for the webpack dev middleware which could be usefull also in other scenario, not only for my particular workbox integration needs.

In my scenario it can be used this way:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, OnPrepareResponse = (c)=> { c.Response.HttpContext.Response.Headers["Service-Worker-Allowed"] = "/"; } });

if no OnPrepareResponse option is provided, everything work as usual

Implementation Question:
i've implemented in the simplest way but i've noticed that the class WebpackDevMiddlewareOptions is at one point serialized in devServerOptions (Webpack\WebpackDevMiddleware.cs+92) and passed to the createWebpackDevServer trough the node script using the node service.

Because this OnPrepareResponse action cannot be useful in the node's script context i've added the attribute [JsonIgnore] but i have the doubt that passing additional configuration option in the WebpackDevMiddlewareOptions is not the intended way to use it, even if it s very handy to have it in this way. Please let me know if this WebpackDevMiddlewareOptions class must remain pure with only the argument that have to be passed to node, or if it ok to have all the config option here and maybe using JsonIgnore or copy only the relevant part when passing it as argument to node.

Thanks,
Mosè

*Originally created by @PhotoAtomic on 10/18/2018* WebpackDevMiddleware doesn't allow to add heades to the generated response while using HMR. In certain scenario (using workbox for PWA) it is necessary to add headers to the returned swerviceworker file to broad the scope of the service worker and keep the solution clean. While this is possible in production mode using the StaticFileMiddleware, this is not possible in development because of the "proxied" way the WebpackDevMiddleware works. To keep consistency with the static file middleware which provide a OnPrepareResponse extension point i've implemented a similar mechanism for the webpack dev middleware which could be usefull also in other scenario, not only for my particular workbox integration needs. In my scenario it can be used this way: `app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true, OnPrepareResponse = (c)=> { c.Response.HttpContext.Response.Headers["Service-Worker-Allowed"] = "/"; } });` if no OnPrepareResponse option is provided, everything work as usual Implementation Question: i've implemented in the simplest way but i've noticed that the class WebpackDevMiddlewareOptions is at one point serialized in devServerOptions (Webpack\WebpackDevMiddleware.cs+92) and passed to the createWebpackDevServer trough the node script using the node service. Because this OnPrepareResponse action cannot be useful in the node's script context i've added the attribute [JsonIgnore] but i have the doubt that passing additional configuration option in the WebpackDevMiddlewareOptions is not the intended way to use it, even if it s very handy to have it in this way. Please let me know if this WebpackDevMiddlewareOptions class must remain pure with only the argument that have to be passed to node, or if it ok to have all the config option here and maybe using JsonIgnore or copy only the relevant part when passing it as argument to node. Thanks, Mosè
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/JavaScriptServices#10
No description provided.