WebPack - Proxy

About

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

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.

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

{
  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
      })
    ]
}

Documentation / Reference





Discover More
What are possible backend integrations method? API , Multi Zone,

Frontend frameworks that manage the rendering of a page need to fill them with data that comes from an external API generally a Rest API. Possibilities Support different host Support same host Description...



Share this page:
Follow us:
Task Runner