Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do enable root proxying in webpack dev server?

Tags:

webpack

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?

like image 781
Nick Manning Avatar asked May 13 '18 22:05

Nick Manning


People also ask

What is proxy in webpack?

webpack-dev-server can proxy some requests to others servers. This might be useful for developing API client when you want to send requests to same domain. Proxy is configured via proxy parameter.

What is Contentbase in webpack?

Exists only in webpack-dev-server. It's only needed if you want to serve static files. For example, you want a folder of mp4 vacation movies to be available for the app, but you don't want to run them through the bundle, because that would be silly.

How do I change the port on a webpack?

So, somewhere in your webpack-config-js, add something like the following and it should change the port that the dev-server is running on : devServer: { port: 3000 }, Then when you run the webpack-dev-server via npm start (or whatever command you have specified to run webpack-dev-server in your package.


2 Answers

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'
    }
},
like image 191
Yuriy Perevoznikov Avatar answered Oct 11 '22 01:10

Yuriy Perevoznikov


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.

like image 36
Guyondowy Avatar answered Oct 11 '22 03:10

Guyondowy