How to test the local development server on mobile
Especially for the frontend devs, testing on real mobile devices the current implementation is important. Deploying to testing servers is a solution but is very time consuming when small tweakings are required. Being able to test on a mobile device right away the current development state from your machine, before even committing the changes, is very convenient. This can be achieved in a variety of ways depending on each specific environment and requirements. Here I’ll show you what I use for my case, which I’ll summarize as:
- vagrant box accessible via local domain name (eg: project.lokal NOT project.local as .local is reserved by MacOs and might bring issues.).
- MacOS (currently I have High Sierra 10.13.4).
- An android device which needs to access the site via the same local domain name (currently I have an Android 8).
My approach is to use a proxy server installed on my Mac machine and set my android device to use this proxy server. For this to work, both devices (Mac and phone) must be connected to the same local network (same Wi-Fi).
Here is how to set all up:
1. Download and copy SquidMan in your Applications folder from http://squidman.net/squidman/
Drag & drop into the Applications folder.
2. Start SquidMan and open Preferences from the SquidMan menu.
3. In the General tab, set the HTTP Port to 8080 or another port if this one is in use. I actually use 8888 as 8080 is used by WebPack server.
4. In the Clients tab, we have to set the IP of the client or the subnet to be served. That is a bit trickier as we need to know the phone IP or the local subnet. We’ll go for the subnet approach as this is the easiest one. For this, open System Preferences / Network and here is the IP of your Mac.
If the IP is 220.127.116.11, the subnet we want to serve is 18.104.22.168/24. Replace the last segment of the IP with 0/24. Now we set this in SquidMan, Clients tab.
Click Save and then click Start Squid.
Now that we have the dev machine set, we need to set our device also. This is for Android. On other devices the procedure is different.
5. On your Android device go to Settings / Wi-Fi. Long press the name of the network you are connected to and in the menu select Modify network.
6. Tap on Advanced options, select Manual for proxy, for Proxy host enter the IP of your Mac and for Proxy port enter 8080.
7. Tap save.
You are good to go. Open Chrome or whatever browser you use and navigate to the local domain you use for development.
If you want to test an iOS device, here is how to set the proxy on it:
- Go to Settings / Wi-Fi and then tap the arrow or (i) icon on the right of your current connection
- Http Proxy set to Manual and type in the details as for Android
Additionally, if you want to use a local server like the one provided by WebPack (eg: the VueJS development setup), you can set a domain for it in /etc/hosts like that:
<MacOs IP (see above)> reloader
Then, from your phone, you can visit http://reloader:<port>, where the port is the one set in WebPack (eg: http://reloader:8080). Make sure the proxy port and the WebPack port are not the same.