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.

user_6682245 · Answer

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

user_4055693 · Answer

I had the same issue. So instead of trying to restart the Windows, try to open the Powershell terminal, shut down the WSL, and then start it again. it solves to me.

Command to shut down: wsl --shutdown
Command to start: to start: wsl

Source: https://github.com/microsoft/WSL/issues/4885#issuecomment-803881561

user_1568059 · Answer

You can run your app in Docker instead and use Docker for Windows, enabled for WSL2. It somehow manages dynamic dynamically forward the ports, without having you to change anything in Windows.

user_19157432 · Answer

I was also having the problem with hot reloading in WSL2 . I tried almost every solution present on github , stackoverflow and where not , from CHOKIDAR_USEPOLLING=true to setting FAST_REFRESH= false in .env file to changing network setting using netsh.... but none of them worked for me and after 2 days of searching solutions and trying to fix it .. finally reverted to wsl 1.

Just run this command on Powershell for now. wsl --set-version Ubuntu-20.04 1

create react app On Your Network with WSL2 not working

4 Answers