Testing local site on mobile

DevKinsta Application Support
3

Thanks for the reply @michael

I had another look and actually realized that it’s already possible with the current version of DevKinsta/Docker, no changes to Docker config required, at least not in my case (Windows 10 Pro and Hyper-V). I’ll share what I’m doing now for reference below. However, I’ll still contribute to the feature request you mentioned as well.

  1. I noticed that the site opens using the local network IP of the machine that DevKinsta is running on. On that machine the site loads just fine using: http://mylocalnetworkipaddress/
  2. When trying that same IP from another device in the local network the website would not load. However, that is just because it tries to load resources (in the html source) using the domain configured in Wordpress as the site domain, which would be something like: mylocaldomain.local
  3. If the other device you want to open the website from is a Windows PC or laptop, the solution is simple: just add an entry in the Windows “hosts file” which points mylocaldomain.local to the local IP address of the machine which runs DevKinsta , see for example https://www.howtogeek.com/howto/27350/beginner-geek-how-to-edit-your-hosts-file/
    After that you can open the site using the local domain, no need to open the site using the IP address.
  4. If you want to open the site from mobile, in my case an iPhone, it’s more difficult as there is no such thing as a hosts file you can edit on IOS, at least not that I’m aware of.
    4a. One possible way to fix this would be to change the domain of the site in the Wordpress settings to the local IP address of the machine which runs DevKinsta. I believe that should work as then there is no domain name anymore that can’t be resolved. However, I haven’t tested this solution as I went with 4b below.
    4b. Use a solution that replaces, in the final HTML output, the local domain with the development machine’s IP address. This allows for the site to be opened using the dev machine’s IP. See WordPress filter to modify final html output - Stack Overflow for some possible solutions. I happen to use WP Rocket, so for me the below code in functions.php works. The only conflict I found so far is that Imagify doesn’t insert tags anymore after this but that is a limitation I can live with for testing purposes. Of course, other issues may result with other plugins. 
if ( $_SERVER['HTTP_HOST'] == 'devmachineip' ) {
	add_filter('rocket_buffer', function($output) {
		return str_replace('mylocaldomain.local', 'devmachineip', $output); 
	});
}

I suppose there are better, and perhaps less complicated, ways to get around the issue that the local domain doesn’t resolve on IOS but I didn’t look further as the above is good enough for me. If anyone has a better/easier solution though, feel free to share it!

Also, I should add that the above solution doesn’t control which of the local sites is loaded when accessing by entering the dev machine’s IP directly into the browser. I have 2 local sites and the one that I’ve added last is the one that comes up, which happens to be the one I need:) I assume this is controlled via nginx and it may require a change there if you need a different site to come up in case you have more than one.

1 Like