Unable to turn on debug mode in webpack-dev-server

[folmert]

I need to see how webpack-dev-server proxy is trying to redirect calls to API. At the moment when running yarn dev after displaying Listening at http://localhost:8000 console is silent.

I'm changing in build/dev-server.js:

const devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
})

to:

const devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    // quiet: true,
    logLevel: 'debug',
});

that's an option I found in webpack-dev-middleware README. But webpack-dev-server seems to ignore it.

[LinusBorg]

Well, the proxying isn't done by that middleware anyway:

https://github.com/vuejs-templates/pwa/blob/development/template/build/dev-server.js#L51-L57

[folmert]

The line you've linked refers to proxyTable - I'm not using that (I left it empty: https://github.com/vuejs-templates/pwa/blob/development/template/config/index.js#L32).

I'm using proxy option in devServer section of webpack config, which I appended here: https://github.com/vuejs-templates/pwa/blob/development/template/build/webpack.dev.conf.js#L18

So is there no native way to debug dev server? It cannot be that complicated :(

[LinusBorg]

I'm using proxy option in devServer section of webpack config, which I appended here:

So you try to use this option of webpack-dev-server:

https://webpack.js.org/configuration/dev-server/#devserver-proxy

Well, you will have a hard time with that, because this template doesn't use webpack-dev-server yet.

/build/dev-server.js contains the custom implementation of a development server.

In other words: You try to config a proxy feature of webpack-dev-server`` but your project doesn't even use it, and setting debug options for webpack-dev-middleware won't do anything about that.

Additionally, my initial answer applies: Proxying is not done by the webpack-dev-middleware (I already linked you to the middleware that's responsible for proxying in my first reply). So adding a debug flag to it will not let you debug proxy traffic even if you define proxyTable correctly.

Solution:

1. use the /config/index.js proxyTable option, which we provided for you.
2. Set the loglevel in the proxy middleware instead of the dev-middelware (https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options)

[folmert]

Thanks for an insightful answer! I had a feeling that this file is not used.

I've moved the proxy rule from devServer to proxyTable as instructed here: https://vuejs-templates.github.io/webpack/proxy.html and now I get the logs as expected:

[HPM] Rewriting path from "/api/admin/v1/users" to "/admin/v1/users"

The proxy itself doesn't work yet, but with these logs it will be easier to figure out why.

[LinusBorg]

Great! Could you then please close the issue?