How do enable root proxying in webpack dev server?

Question

I have a server running on localhost:5474 and I have a webpack dev server. I would like the webpack dev server to proxy to localhost:5474.

I got proxying working fine if I provide an extra part of the URL, but I don't want to do this.

Following the directions here, it says

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value:

devServer: {
 index: '', // specify to enable root proxying
 host: '...',
 contentBase: '...',
 proxy: {
 context: () => true,
 target: 'http://localhost:1234'
 }
}

I'm not really sure what the dots mean. Does that mean I put dots in there or does that mean I should provide my own values for host and contentBase?

This is my webpack config so far:

const path = require("path");
const webpack = require("webpack");
module.exports = {
 entry: ["./src/js/app.js"],
 output: {
 path: path.resolve(__dirname, "dist"),
 filename: "js/app.js"
 },
 devServer: {
 port:3037,
 open: true,
 hot: true,
 index: '', //needed to enable root proxying
 proxy: {
 //root proxying (doesn't work yet)
 context: () => true,
 target: 'http://localhost:5474',
 //proxying with a URL value (works)
 /*
 "/api": {
 target: "http://localhost:5474",
 pathRewrite: {"^/api" : ""}
 }*/
 },
 },
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
 }
 }
 ]
 },
 plugins: [
 new webpack.HotModuleReplacementPlugin()
 ],
 mode:'development'
};

But when I run the command it opens http://localhost:3037/ and shows the listing directory.

How can I proxy localhost:3037 to localhost:5474 using webpack-dev-server?

• ANewGuyInTown: did you get this working by any chance? I too want to proxy everything else beside the *.js to the backend server
• Nick Manning: Don't think so...I think I ended up realizing I like having the /proxy/ in the URL. Haven't visited it in a while though...was from a project I abandoned.

Answer 1

Try to use something like this. Pay attention at publicPath: '/public/' it's where your bundle.js live to be able reloaded on the fly.

devServer: {
 index: '', //needed to enable root proxying
 port: 10001,
 publicPath: '/public/',
 proxy: {
 context: () => true,
 '/': 'http://localhost:10000'
 }
},

Answer 2

It is possible in the most recent version of webpack. As the documentation says at https://webpack.js.org/configuration/dev-server/

Note that requests to root won't be proxied by default. To enable root proxying, the devServer.index option should be specified as a falsy value

The page gives an example of the empty string which works in my setups.