Proxy Settings using Metro Bundler for Web

[kpangbur]

I am looking at Expo Router and it uses metro bundler for web distribution instead of webpack. Webpack has a way to proxy certain paths to a remote dns for development purposes. For example:

config.devServer.proxy = {
      '/api': {
        target: 'myapiserver.com',
        secure: false,
        changeOrigin: true,
        logLevel: 'info',
      },
    };

Does metro have a way to proxy specific api calls to a remote server? I looked over this doc and tried rewriteRequestUrl but it did not help.

Configuring Metro | Metro

[kpangbur]

Answering my own question using metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
const { createProxyMiddleware } = require('http-proxy-middleware');

config.server = {
    enhanceMiddleware: (metroMiddleware, server) => {
        const apiProxy = createProxyMiddleware('/api', {
            target: 'https://myapiserver.com',
            changeOrigin: true,
        });

        return (req, res, next) => {
                return apiProxy(req, res, () => metroMiddleware(req, res, next));
        };
    },
}

module.exports = config;