Adding a response header to Dev server seems excessively convoluted, am I missing something?

[zeth]

To use Web Assembly with a local dev server (or in fact, any server), you have to add specific response headers or the web browser takes away all your toys (SharedArrayBuffer in particular).

In Webpack Dev Server, you can add something like this to the config file:

"headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]

And then the job is done. "Serve" works in a similar way but allows you to have fancy regexes.

However, I was already deep in trying out Lit, which gives you Modern Web Dev Server. The documentation doesn't explain how to add custom response headers. I had to get on with my life and just hacked this into the code of Modern Web Dev Server.

ctx.set('Cross-Origin-Opener-Policy', "same-origin");
ctx.set('Cross-Origin-Embedder-Policy', "require-corp");

It worked enough to get me back on the road. What is the right way to do this? I followed the layers of the onion down to "Koa". Do I have to somehow use that to write middleware, then publish it as a npm package, then add that as a dependency of my project? Is there an easier way?

Thanks for reading.

[nalply]

I needed to do some url rewriting. Here's as an example what I did directly in web-dev-server.config.js:

// remap /**/*.ts and /**/*.js to /ts/**/*.ts and let esbuild transform
// don't remap some special urls
async function remap(ctx, next) {
  const dbg = debug("d-s:remap")
  
  const url = ctx.url
  dbg("url", url)
  
  const special = url.startsWith("/__")
  if ((url.endsWith(".ts") || url.endsWith(".js")) && !special) {
    ctx.url = "/ts" + url.substring(0, url.length - 3) + ".ts"
    dbg("-->", ctx.url)
  }
  
  
  await next(ctx)
}

then added middleware: [ remap ], to the object being default exported.

To ease development, I used the debug module, it seems that it is already used by dev-server, no need to do npm i -D debug but YMMV, just do import debug from "debug".

I agree this could be explained a little bit better especially with more examples. By the way, I suspect there's an even more simple way by using plugins, see: https://modern-web.dev/guides/dev-server/writing-plugins/, but I went the middleware route.

[anuragking1995]

Hi @zeth I am trying this in web test runner configuration

plugins: [ { name: 'Plugin', async serve(context) { context.set('Cross-Origin-Opener-Policy', "same-origin"); context.set('Cross-Origin-Embedder-Policy', "require-corp"); return context; }, }, ],

but getting error Error: A serve result must contain a body. Use the transform hook to change only the mime type.  How did u set up ?

[nalply]

I used middleware, not sure whether it was the best thing, but it worked. See my previous post.

[zeth]

Just in case it is not obvious, in the file web-dev-server.config.js, I added:

async function add_headers(ctx, next) {
  ctx.set('Cross-Origin-Opener-Policy', "same-origin");
  ctx.set('Cross-Origin-Embedder-Policy', "require-corp");  
  await next(ctx);
}

Then list the function in the middlewares (truncated example):

export default {
    middlewares: [add_headers],
}