create react app On Your Network with WSL2 not working

Question

I am trying to use a mobile device to view the app served by create react app. When I open the IP:PORT recommended by CRA's "On Your Network", the page never loads on my mobile device.

I am working on Windows 10 laptop, using WSL2 with Ubuntu. My network is all wifi, no ethernet cables. My code is on the Ubuntu file system and I run npm start from the same location in a WSL terminal from VS Code with the WSL extension.

I am able to see the app using http://localhost:3000 with browsers on my Windows machine (Chrome, Edge).

I noticed cmd.exe ipconfig lists the IP address that corresponds to "On Your Network" as "Ethernet adapter vEthernet (WSL)". This IP address (172.17.144.244) is different than what ipconfig shows as "Wireless LAN adapter Wi-Fi" (192.168.1.23). I also tried 192.168.1.23:3000 on my mobile device, but it didn't work either.

Some other posts on SO recommend removing a firewall setting that blocks NodeJS applications. I scrolled through the many applications listed in the firewall settings and found nothing for NodeJS apps.

Answer 1

I found a tool that fixes this problem: https://github.com/icflorescu/expose-wsl

First you need to run the command in the wsl terminal

npx expose-wsl@latest

and it gives you an ip address of your pc 192.168.0.130 for example, with that ip you can access the project from devices on the same network.

When running npm start: . . . On Your Network: http://172.48.228.88:3000

enter on mobile device:

http://192.168.0.130:3000

and works.

Note: You have to allow the port through the Windows firewall. In my case the firewall should allow access to 'C:\Program Files\WindowsApps\MicrosoftCorporationII.WindowsSubsystemForLinux_1.0.3.0_x64__...\wslhost.exe'

Answer 2

Since WSL2 uses a virtual NIC what you need is enable port forwarding in the Firewall otherwise your server in WSL2 won't be seen by external PCs in your network.

I recommend reading the entire thread but in resume you can start using this script: https://github.com/microsoft/WSL/issues/4150#issuecomment-504209723