create react app On Your Network with WSL2 not working - windows

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

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

Answer 2

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

Answer 3

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 4

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.

Answer 5

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

Answer 6

Consider Nginx for Windows.
I prefer this solution because I'm more familiar configuring web servers and reverse proxies than Windows networking and Powershell.
After unzipping the distribution, for example at C:\somepath\nginx-1.22.1, I add the following reverse proxy configuration to C:\somepath\nginx-1.22.1\conf\nginx.conf
...
http {
...
server {
listen 11500;
server_name wsl2_server;
charset utf-8;
location / {
proxy_pass http://localhost:11500/;
}
}
...
As you can see, I have a web server running on port 11500 in WSL2. When my mobile device requests "lan_ip_of_laptop:11500/", it then forwards to localhost:11500 and WSL2 server completes the request.