4

I am trying to set up non-standard webpack-dev-server proxy configuration.

Following reading: http://webpack.github.io/docs/webpack-dev-server.html#combining-with-an-existing-server

Basically my local web server web root is: http://website.dev and my local asset server is http://website.assets

I want to configure webpack-dev-server to proxy my existing site served from http://website.dev and proxy its' javascript assets which would be served from http://website.assets.

Here's what I've tried:

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            //publicPath: '',
            contentBase: 'http://website.dev',
            proxy: {
                'js/*': {
                    target: "http://website.assets/js"
                }
            }
        }
    };

and 

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            publicPath: 'http://website.assets/js/',
            contentBase: 'http://website.dev'
        }
    };

and 

var webpackConfig = {
        output: {
            path: '../dist/js',
            publicPath: 'http://website.assets/js/',
            filename: '[name].js'
        },
        devServer: {
            publicPath: 'http://website.assets/js/',
            proxy: {
                '*': "http://website.dev",
                'js/*': "http://website.assets/js/"
            }
        }
    };

I can't figure out how to get the configuration to play nice with my permutation. I'm not confident that my devServer configuration is correct. Please help :)

Elise Chant
  • 5,048
  • 3
  • 29
  • 36
  • I am running an Apache local web server and I am trying to achieve the same thing as you. Did you manage to get your webpack-dev-server configuration to work? If so, would you care to share it? Thanks. – Chris Nov 06 '16 at 22:07
  • yep, @c9s answer worked – Elise Chant Nov 11 '16 at 20:36

1 Answers1

3

There is a bug in the webpack dev server proxy 1.14.1 (which I think it's a bug)

The webpack-dev-server uses "node-http-proxy" to proxy the request, however it seems that the proxy server pre-resolved the virtual host names into IP address (or localhost)

You need to add some special config to your dev server config file:

var server = new webpackDevServer(compiler, {
  quiet: false,
  stats: { colors: true },
  proxy: {
    "/api": {
      "target": {
        "host": "action-js.dev",
        "protocol": 'http:',
        "port": 80
      },
      ignorePath: true,
      changeOrigin: true,
      secure: false
    }
  }
});
server.listen(8080);
c9s
  • 1,888
  • 19
  • 15