When developing web apps and websites locally, I sometimes want to test how they behave on my iPhone or iPad without having to deploy them to a server. For years, it wasn't obvious to me that there was a trivial way to do it. I'll describe how I do it on Windows, but I am pretty sure that it works the same with macOS or Linux. It will also work with Android devices, you'll just need to find alternative apps, or settings.
What is our objective?
Use your iPhone or iPad to open the website that is running locally on your laptop - that is, the website you see on your laptop when you run localhost or example.test.
Prerequisite
All of your devices must be connected to the same Wi-Fi (local network). I am no networking expert, and there are probably lots of caveats, but if you simply use your home or office Wi-Fi things should work.
The easiest way
The easiest way to do it is to figure out the IP address of your laptop within the local network. You can find out your IP address by running ipconfig in PowerShell, and finding something like Wireless LAN adapter Wi-Fi - if it's different on your machine, you'll probably figure it out, there aren't many options on the list. I was initially pretty confused about all these different IPv4 and IPv6 addresses, but we're looking here for one specific value. We can ignore the rest. What you need, is the value of "IPv4 Address":
Now type in the equivalent of 192.168.0.XX in the web browser on your iPhone/iPad, and you should see the local website from your laptop.
It should work regardless of how you're running the website on your laptop - Docker, Laragon etc. As long as it opens on your laptop, you should be able to open it on your phone at this point. If you can't, you need to do some debugging.
The problem with the easiest way
It would be nicer to be able to access your website or web app using a custom domain name, just like you do it on your computer when you edit the hosts file. iPhone doesn't have a native way to let you edit the hosts file, but we can still do it, with a relatively easy hack.
How to modify modify hosts file on iPhone?
One free app I know that allows us to edit hosts file on iPhone is DNSCloak. You will also need a basic text editor. I'm using Koder.
Once you have these apps installed, open Koder app, and create a new file called hosts.txt (the name doesn't matter, but for some reason you need to specify the file extension). The rules should be in a similar format, but in reverse order compared with one on Windows. For example, if I want the domain example.test point to 192.168.0.1, I need to add the following line to hosts.txt:
192.168.0.1 example.text
Then, open your DNSCloak app. You should open settings by tapping on the hamburger menu in the top left corner:
In the "Advanced options" section you need to "Enable cloaking", and then "Pick the rules file...".
Choose the file you created in Koder. On my phone it's in the Koder > Local directory:
DNSCloak doesn't give you any visual feedback that the file was successfully selected.
We're now left with one last step, choosing the DNS server. I am not 100% sure why it needs to be done - maybe it has to do with iPhone not being open for modifying advanced networking settings directly on the device. Pick any server. I chose the one that was geographically closest to me. This will activate the DNS server, and you'll see that you're now using a "VPN".
Somewhere in the process, you may be asked to "add a new VPN profile" (that's normal).
With DNS server activated, open the browser on your phone, and try to access your website with the domain you specified. Hope it works, and I hope that this guide was helpful to at least a few people :)