Wsl: Cannot access Linux applications launched with webpack-dev-server

[jplew]

Hi, I'm using Ubuntu in WSL 2 and am attempting to do the following: https://docs.microsoft.com/en-us/windows/wsl/wsl2-ux-changes#accessing-linux-applications-from-windows

In your screenshot example you are connecting to a NodeJS server using the virtual machine's IP address. I managed to get this working using both create-react-app (npm start with https://github.com/facebook/create-react-app) and Next.js (npm run dev with https://github.com/zeit/next.js/).

However, I run into problems when launching a Node server using webpack-dev-server (cd /examples/cli/default && node ../../../bin/webpack-dev-server.js with https://github.com/webpack/webpack-dev-server) or the Angular CLI (ng serve
with https://github.com/angular/angular-cli).

In each of these latter cases, when I visit <my vm ip>:4200 in Google Chrome I get this error:

This site can’t be reached
172.17.97.25 refused to connect.

I know the Angular CLI uses webpack-dev-server under the hood so I believe the problems are related.

I know you are working hard to avoid using the Linux distro's IP address, just thought I would report anyway.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: d8787d64-a0f4-613d-6d9c-1a27bb2f6735
• Version Independent ID: 520a7c39-72fa-28c1-e54d-6d845087c309
• Content: UX Changes between WSL 1 and WSL 2
• Content Source: WSL/wsl2-ux-changes.md
• Product: windows-subsystem-for-linux
• GitHub Login: @mscraigloewen
• Microsoft Alias: mscraigloewen

[craigloewen-msft]

My bet is that the webpack-dev-server needs to be configured to accept connections that aren't from just the localhost.

Please check out this issue for a similar solution!

[jplew]

thanks @mscraigloewen for the insight, I'll experiment with that and report back

[jplew]

You're correct, it was a simple fix after all.

For Angular I was able to go: ng serve --host 0.0.0.0, then access my site at my distro IP address: http://172.17.97.25:4200/

For webpack-dev-server I had to add the host property to my webpack.config.js:

module.exports = setup({
  ...
  devServer: {
    host: '0.0.0.0',
  }
});

Reference: https://webpack.js.org/configuration/dev-server/#devserverhost

[temega]

You're correct, it was a simple fix after all.

For Angular I was able to go: ng serve --host 0.0.0.0, then access my site at my distro IP address: http://172.17.97.25:4200/

For webpack-dev-server I had to add the host property to my webpack.config.js:

module.exports = setup({
  ...
  devServer: {
    host: '0.0.0.0',
  }
});

Reference: https://webpack.js.org/configuration/dev-server/#devserverhost

Can confirm that it also worked for me.

[b-hayes]

I have this same problem with WSL1 above fix does not work.