Testing Ionic Apps on iOS with Serve
The Safari browser has a tendency to render pages differently than Chrome. Troubleshooting such cases in Ionic apps and testing potential fixes can be time consuming, especially when developing on Windows. Building the app on the build server and having it deployed via TestFlight can make the feedback loop really long. I managed to make it shorter by opening the page served from my development machine in the mobile Safari browser.
The idea was to run the application using ionic serve:
ionic serve
Once the server starts, the command automatically opens the application URL (http://localhost:8100) in the browser. Of course, on the mobile device, the development machine's IP address will need to be used instead. The ipconfig command is a good way to determine it (if you have more than one network connection, you'll need to pick the one that's accessible from the network your mobile device is on):
> ipconfig
Windows IP Configuration
Ethernet adapter vEthernet (Realtek PCIe GBE Family Controller Virtual Switch):
Connection-specific DNS Suffix . : Home
Link-local IPv6 Address . . . . . : fe80::ac6e:98a2:902e:f70%8
IPv4 Address. . . . . . . . . . . : 192.168.64.102
Subnet Mask . . . . . . . . . . . : 255.255.255.0
Default Gateway . . . . . . . . . : 192.168.64.1
However, ionic serve doesn't listen to that address and trying to open http://192.168.64.102:8100 in the browser results in an error:
ERR_CONNECTION_REFUSED
Fortunately, this can be easily fixed by passing the IP address you want to use to the ionic serve command:
ionic serve --address 192.168.64.102
The command will still open the localhost URL which will now fail to load. But that's nothing to worry about since the application will now load if you use the IP address you passed to the command instead (http://192.168.64.102:8100).
Assuming that the mobile device you want to test is on the same network (i.e. it is connected via Wi-Fi), the application should now also open in its browser if you enter the same address.
If the connection times out, it's most likely a firewall issue. The best way ot fix it is to make the network on your computer private. Of course, you should only do it, if it's a trusted network.
