Search code examples
localhostwindows-subsystem-for-linuxvscode-remoteliveserver

Problem with Live Server on WSL: I can't connect to the server from my phone

When I'm using my Windows Subsystem for Linux (WSL) environment from VS Code I am unable to connect to the server from my phone despite being connected to the same wifi network and entering the ip address and port.

When I'm working from my normal windows environment (without being on the WSL) the extension works perfectly and I can open my project from my phone with no problems; connecting to the server by entering the ip address and port. However, when I'm on the WSL it doesn't work.

These are the steps I do to open my project from my phone:

  1. In my WSL environment with my project open in VS Code, I use the Live Server extension and click "Go Live".
  2. After the server boots on the default port 5500, I use the terminal from my WSL environment to find out what my ip address is using the ip addr command.
  3. I enter that ip address and the port in the browser and check that it is indeed the correct ip address.
  4. And finally I try to connect from my phone: I enter the same ip address and the same port in my phone's browser while I'm connected to wifi.

When I am in my normal windows environment (not in WSL) I still follow the above 4 steps and everything works perfectly and I can connect to my project from my phone without problems, however when I am from my WSL environment despite following the same four steps and entering the same ip address and the same port, the project does not load for me; as if the server was down.

Solution

  • Sorry for taking so long to reply. Thanks to the help of the platzi community I managed to solve my little problem and I forgot to update the question here indicating how I had solved it.

    I don't know if @Mateo's solution works, but in my case what I did to solve the problem was to follow the steps indicated in this post https://medium.com/codemonday/access-wsl-localhost-from-lan-for-mobile-testing-8635697f008

    Just in case, I'll explicitly write here the steps I followed to solve the problem (they're the same on the blog, but I'll write them here in a more "explicit" way):

    1. Following the instructions of the blog, I added a "new rule/exception" in the windows firewall, indicating a tcp connection for any type of network for port 5500.
    2. I opened the cmd as administrator and put the command wsl hostname -I to know the ip of my wsl (to use it in the next step).
    3. Then I put the following command: netsh interface portproxy add v4tov4 listenport=5500 listenaddress=0.0.0.0 connectport=5500 connectaddress=MY-WSL-IP
    4. I opened my project in vs code in the wsl environment.
    5. Using the live server extension, I clicked "go live" and started the server on port 5500.
    6. From my phone being connected to the same wifi network as my pc, I entered the ip address of my pc (not the wsl ip, the ip of my pc) and port 5500.

    And voila, it worked.