[SOLVED] Using constant/variable as webpack dev server proxy URL pattern

Using constant/variable as webpack dev server proxy URL pattern

In our development server setup we use webpack-dev-server proxy setting to connect ot the APIs via middleware server. Time to time we have to change the middleware server settings and without changing the information in multiple places we would like to keep them in a single place.

Therefore we tried the following,

const MIDDLEWARE_SERVER = 'https://midlleware.server';
const MIDDLEWARE_RESOURCE = '/xyz';
const MIDDLEWARE_API_ENDPOINT = MIDDLEWARE_SERVER + MIDDLEWARE_RESOURCE + '/api';

devserver: {
   proxy: {
       MIDDLEWARE_RESOURCE : {
          target: MIDDLEWARE_API_ENDPOINT;
          pathRewrite: { MIDDLEWARE_RESOURCE: '' },
   }
}

This doesn't work resulting with a 404 error because the URL pattern has not recognised (we checked by catching a onProxyReq event).

But if we replace the MIDDLEWARE_RESOURCE with '/xyz' in the proxy section it works.

it that a limitation in providing 'proxy' patterns?

Thanks

Solution

I was able to get it work by using [MIDDLEWARE_RESOURCE] notation. Like below

const MIDDLEWARE_SERVER = 'https://midlleware.server';
const MIDDLEWARE_RESOURCE = '/xyz';
const MIDDLEWARE_API_ENDPOINT = MIDDLEWARE_SERVER + MIDDLEWARE_RESOURCE + '/api';

devserver: {
   proxy: {
       [MIDDLEWARE_RESOURCE] : {
           target: MIDDLEWARE_API_ENDPOINT;
           pathRewrite: { MIDDLEWARE_RESOURCE: '' },
   }
}