ionic serve with wifi hotspot to test on mobile

Question

I'm trying to test our app in the mobile browser.

• I started a wifi hotspot
• Ran ionic serve on our project root
• Connected to wifi on mobile device
• On mobile browser went to http://localhost:8100

but I get a page not found. Shouldn't the ionic app load on browse if I connect to the wifi hotspot of the pc running the app server?

Answer 1

The best way to do it:

1. Make Personal Hotspot from your mobile Device to your Computer
2. run ionic serve
3. Read the the output this command throws. There you can see an External IP-Adress
4. Open the Browser on your smartphone and use the Exernal IP-Adress + 8100 (Port)

For example: http://192.168.32.12:8100

Answer 2

localhost is your local address. If you want to access to the ionic app served by your PC from your mobile device browser, you should use the ip address of your PC instead of localhost, since localhost is the address of your mobile device.

So just run an ifconfig (unix) or ipconfig (windows) on your terminal and access to the app with this address from your mobile device : http://IP_OF_YOUR_PC:8100

This may not work depending on your firewall rules.

Answer 3

All you need to do is make sure your laptop and mobile are on the same Wifi Connection

Just Run ionic serve

Network: http://192.168.1.***:8100/

Type that network address in your mobile browser

It works for all create-react-app & vue-cli

Hot reload will also work

If you don't have WiFi use a mobile hotspot

Answer 4

ionic serve like in the accepted answer did not work for me. But

ionic serve --host=COMMON_NETWORK_IP and connecting to

COMMON_NETWORK_IP:8100 on the phone, did.

Look up your COMMON_NETWORK_IP via ifconfig (unix) or ipconfig (windows). If you are on WiFi and use a mac, you can also use a GUI: