How to configure a webpack proxy for multiple URLs efficiently?

Question

I'm using webpack dev server to build a single page application. There are many routes like /api, /alpha, /bravo ... /zulu, and they all need to be proxied.

I wrote webpack.config.js file to proxy all URLs.

proxy: {
  "/api": "http://localhost:3000",
  "/alpha": {
    target: "http://localhost:8080",
    pathRewrite: { "^/alpha": "" }
  },
  "/bravo": {
    target: "http://localhost:8080",
    pathRewrite: { "^/bravo": "" }
  },
  "/charlie": {
    target: "http://localhost:8080",
    pathRewrite: { "^/charlie": "" }
  },
  ...
  "/zulu": {
    target: "http://localhost:8080",
    pathRewrite: { "^/zulu": "" }
  },
}

It works well, but I had to write too many codes. I wonder is there any way to reduce it? I thought webpack supports a regular expression for this problem, but I couldn't get a solution from the official docs :(

Devin Olsen · Accepted Answer · 2019-08-16 07:36:24Z

8

Webpack dev server's proxy settings are a spin off of the https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options.

Documentation says you can use a function on the rewrite prop to do some complex regex work. This, coupled with the ability to define multiple proxy entries and context entries, I would suggest something along the lines of:

proxy: [{
  "/api": "http://localhost:3000",
},{
  context: ['/alpha', '/bravo', '/charlie', '/zulu'],
  target: 'http://localhost:8080',
  rewrite: function (path, req) { return path.replace(/\/(.*?)/g, '') }
}]

This reduces your growing list down to a single array.

Hope this helps!

answered Aug 16, 2019 at 7:36

Devin Olsen

8621 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to configure a webpack proxy for multiple URLs efficiently?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related