WebPack - Proxy

> (World Wide) Web - (W3|WWW) > Web - Building and Shipping > Web - WebPack

1 - About

The proxy configuration of the dev server is useful for backend integration.

3 - Configuration

Because Webpack passes all the proxy configuration to http-proxy-middleware, all configurations can be found at http-proxy-middleware

http-proxy-middleware is written on top of node-http-proxy.

Advertising

4 - Example

With a dev web server that serves page on http://localhost:3000/, to create this proxy rule:

http://localhost:3000/api/foo/bar -> http://localhost:8080/api/foo/bar

you will configure package.json as

package.json
{
  devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      host: 'localhost', 
      port: 3000, 
      proxy: {
        '^/api/*': {
          target: 'http://localhost:8080/api/',
          secure: false,
          changeOrigin: true
        }
      }
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin({
        multiStep: true
      })
    ]
}

5 - Documentation / Reference