Proxy target supports local file path

[599316527]

I write some local mockup files to debug APIs when server-side is not ready.
It will be nice to write file path in target to proxy local file.

proxyMiddleware('/login/verify', {
    target: 'file:///home/someone/mockup',
    pathRewrite: {
      '^/login/verify': 'login-verify.json'
    }
})

[chimurai]

imho, this would create unnecessary bloat in the proxy middleware for a specific use-case.

Think it is better to start a separate server to serve your static .json files, configure the proxy target and point it to this server.

This way you can customise your setup to your needs.

[arloduff]

Actually, I would also like this feature for my own project. Being able to serve local files for certain routes in a development environment is important for most Javascript projects.

[adamduncan]

This issue's been closed for a while, but I was in need of a similar requirement in a create-react-app (proxy docs). Hope this helps someone.

To workaround, it was a case of storing mock JSON files in the site's public root directory (e.g. public/data/mocks/test.json – which get served from http://localhost:3000/data/mocks/... when running the application locally).

Then we configure rewrite on paths with a bogus /api prefix (which won't exist as routes in our application), and proxy to the original public files, removing that prefix and appending the file extension:

// setupProxy.js
const proxy = require('http-proxy-middleware');

const rewriteFn = function(path) {
  return path.split('/api')[1] + '.json';
};

module.exports = function(app) {
  app.use(
    proxy('/api/data/mocks', {
      target: 'http://localhost:3000', // same target app runs on
      pathRewrite: rewriteFn
    })
  );
};

With this setup, we should be able to access the mock data at both the original URL via filename (http://localhost:3000/data/mocks/test.json) and the mock API endpoint (http://localhost:3000/api/data/mocks/test).

Related: #333