We often need to test many features in our site for several devices like, phones, tabs etc. In SDLC process, when we need to maintain the proper deployment process, many times we need to test a new feature or fix in out local environments. Most of us use a local setup (maybe XAMP, WAMP, LAMP etc) with virtual hosts for maintaining several projects. Therefore, it become difficult to test on mobile phones or tabs there is no easy option to set new host entry for those devices. However, we can solve this problem by adding single line of code in our virtual host settings.
Here, I am using WAMP. For WAMP:
First: You need to have a virtual host for the test site/project. (If you don’t have a virtual host then you should be able to access the local site by hitting the ip address of your PC on the browser of the device on which you need to test).
Second: Open the “httpd-vhosts.conf” in the “C:\wamp64\bin\apache\apache2.4.17\conf\extra” location. (location can vary depending on the apache and wamp version).
Third: Here, in the “httpd-vhosts.conf” file add “ServerAlias myproject.local.*.xip.io” line between the virtual host settings like bellow:
<VirtualHost *> ServerName "myproject.local" DocumentRoot "/Users/jeremy/Sites/myproject" ServerAlias myproject.local.*.xip.io </VirtualHost>
Now, Save the file and restart all WAMP services.
Forth: Now, you should have the ability to browse the local site from any devices under the same network, but you need to use the following URL pattern to access:
http://myproject.local.[local ip address].xip.io/ ie. http://bangladroid.local.192.168.0.101.xip.io/
The ServerAlias directive allows for alternate names that Apache should map to the virtual host. The xip.io domain is a free wildcard DNS service from 37signals, which essentially resolves to your local ip address, and sends it back in the response. Now just fire up your various mobile devices and browse to the server alias above, substituting * with your local ip address.
What makes this so streamlined is that it allows for a consistent naming pattern that is easy to remember, and it removes unnecessary complication. As a bonus, it really comes in handy when a request comes in from a project manager to troubleshoot an issue on a recent project that you still have running on your local machine.