How to emulate bypass with router?

[thom-nic]

I'm using this as part of webpack dev server. My old 'bypass' code looked like this:

          context: [publicPath],
          target: DEV_SERVER_PROXY_URL,
          bypass: (req, _res) => {
            if ((req.headers.accept||'').indexOf('html') !== -1) {
               console.log(`[BUNDLE] ${DEV_SERVER_PROXY_URL}${req.url}`); 
               return `/index-${process.env.APP_BRANDING}.html`;
            }
            console.log(`[PROXY] ${DEV_SERVER_PROXY_URL}${req.url}`); 
            return null;
          },

Meaning:

• if it's a browser page load (by looking at the accept header) give back the dev server's webpack bundle
• otherwise, proxy to the target (return null)

I can't figure out how to handle this using the router option. This is what I'm attempting...

          router: (req) => {
            if ((req.headers.accept||'').indexOf('html') !== -1) {
              console.log(`[BUNDLE] ${DEV_SERVER_PROXY_URL}${req.url}`); 
              return `/index-${process.env.APP_BRANDING}.html`;
            }
            console.log(`[PROXY] ${DEV_SERVER_PROXY_URL}${req.url}`); 
            return DEV_SERVER_PROXY_URL;
          },

I see the [BUNDLE] log statement but the browser never loads the bundle from the dev server. So I'm not sure how I should indicate "don't proxy, instead serve this asset."

[chimurai]

You can try to provide use the context config with a function to determine which requests to proxy or not.

module.exports = {
  //...
  devServer: {
    devMiddleware: {
      index: false, // specify to enable root proxying
    },
    proxy: [
      {
        context: (pathname, req) => true,
        target: 'http://localhost:1234',
      },
    ],
  },
};

// source: https://webpack.js.org/configuration/dev-server/

https://github.com/chimurai/http-proxy-middleware/blob/2.x/recipes/context-matching.md#custom-filtering

Note:
Believe webpack-dev-server still uses v2.
In HPM v3 context has been renamed to pathFilter.