Access ionic dev server from phone

user_13259463 0
Viewed 40

I want to create a mobile browser app.

I am using ionic within wsl within windows 11.

Now when I do ionic serve --external I want to access the web app from my phone browser.

I am on a public train wifi, so maybe that's why I can't connect?

This is the output from ionic (extract):

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://172.21.17.144:8100

My phone is on the train network as well. I can access the external ip from my laptop (host), but not from the phone. The phone browser gives timeout message, when I try to connect to the external ip.

I also tried to connect via hotspot. I created a hotspot in windows 11. Connected to it from the android phone. Unfortunately I couldn't connect to my laptop via the hotspot network either (ip: 192.168.37.1). Also I didn't see network adapter that was hosting the hotspot in wsl via ip a.

Please, how would you connect to your dev server, that is running on your laptop, from your phone, without too much headache?

ionic-framework windows-subsystem-for-linux android
1 Answers

Please, how would you connect to your dev server, that is running on your laptop, from your phone, without too much headache?

There are several options. The first is definitely the easiest, if it works for you.

  • WSL1

    In general, networking is "easier" on WSL1, so if the tools you are using work there, it's okay to keep using a WSL1 instance for them. You can have a separate WSL2 instance if you'd like for tools that work better there.

    WSL1 runs as a syscall translation layer in Windows, and as such it shares the same network interface as Windows.

WSL2, on the other hand, is a virtualized environment, using a virtual NIC behind a virtual Hyper-V switch. The WSL2 network is NAT'd behind/inside the Windows network, which is why you can't see it from other devices on the network.

WSL2 does provide a feature known as "local forwarding" that allows the Windows host itself to access WSL2 through the localhost address. However, that doesn't extend to other devices on the network.

So if you do need to use WSL2, there are other solutions:

  • SSH Reverse Tunnel

    My personal preference at the moment, since it simplifies forwarding and firewall rules. See my "Option 2" in this Ask Ubuntu answer for instructions.

    There's some one-time setup that might take 10-15 minutes, but after that it's a one-liner to connect the ports before you run start the server.

  • Bridged network interface

    You mention that you are on Windows 11. As long as this is a Pro version or higher (not Home), you could use a new feature in the WSL Preview release to create a bridged Hyper-V switch. I have not tested it myself, but you can find details in this blog post.

  • Traditional port-forwarding method

    The method recommended in the Microsoft Docs is currently to use Windows port forwarding through the netsh interface portproxy command to route the traffic to WSL2. The problem is that the WSL2 address is dynamically assigned each time it restarts), so you have to determine or parse the correct address after each reboot.

user_118109330
Related