Setting Up For Testing on Mobile

In most cases, to test something on a mobile device, you simply need to open up your developer tools, click "Toggle Device Toolbar", and click one of the phone options from the dropdown to simulate a mobile screen. However, some bugs only happen when testing on a mobile device, such as the ones caused by mobile Safari. This will require testing on the actual tablet or phone to reproduce the issue, so this optional setup guide is to allow you to access your development site on a mobile device, connected to the same network.

For Linux/Mac

You should be able to go directly to the IP of your Linux machine (you can find this through ifconfig in the console). However, if this does not work, you will need to Google how to open port 80 on the firewall of your Linux distro. Unfortunately, we do not have a more detailed guide on how to do this available because it has been so long since we had a developer on Linux or Mac. If you complete this process for Linux/Mac, you should update the guides for the next developer here.

For Windows

Since most of our developers are set up on Windows, the process is fairly simple for how to make an opening in your firewall to allow a phone to access your apps. It is advisable that you would disable this firewall rule when it is not in use, as the full security ramifications of leaving the firewall rule enabled are not fully known to me.

Setup

  1. To begin, navigate to your Apache vhosts config, should be located near C:\xampp\apache\conf\extra\httpd-vhosts.conf.

  2. Locate the site that represents your FW apps, typically something like fw.localhost.com, fw-[olivetName].localhost.com, or apps.localhost.com.

  3. Ensure that the apps URL is the first entry using the relevant port number. In the example screenshot below, apps.localhost.com is valid because it is the first entry. fw.localhost.com would also be valid because it is the first entry listening on port 8080 Screen Shot Example of vhosts file

  4. Open Windows Defender Firewall and click "Advanced Settings".

  5. Click "Inbound Rules" then Action > New Rule

  6. Select "Port" and click next

  7. Select TCP, and "Specific local ports". In the "Specific local ports" field, enter the port number from the Apache config and click next (in the above example, would be 80 for apps.localhost.com or 8080 for fw.localhost.com)

  8. Click the "Allow the connection" radio button and click next

  9. Check all boxes for "When does this rule apply"

  10. Give it any name and description and click finish. I suggest "Apache Test Website".

  11. Right click your rule in the "Inbound Rules" list and click properties

  12. Click "Program and Services", under Programs click "This program" and click browse

  13. Find the httpd executable under apache. Should be located C:\xampp\apache\bin\httpd.exe

  14. Since I am not fully aware of the security side effects of this rule, I suggest disabling it when not in use. You can do this by right clicking it and pressing "Disable Rule". You can enable it at any time by right clicking it and clicking "Enable Rule".

Accessing the site on mobile

Now that it is setup, accessing it is pretty simple:

  1. Open a command prompt, type ipconfig, and locate your IPv4 address. An example address is 172.26.0.1. Note your IP address may change since the previous time you tested the site on mobile.

Screen Shot Example of ipconfig

  1. If you do not remember your sites port number, navigate to C:\xampp\apache\conf\extra\httpd-vhosts.conf and locate the port in the site config. In the example above, the port for fw.localhost.com is 8080, apps.localhost.com is 80.

  2. If you normally keep the Firewall rule disabled, locate it in "Windows Defender Firewall" > "Advanced Settings" > "Inbound Rules" and enable it. On the mobile device, navigate to the IP address colon port number. With the examples above, this would be http://172.26.0.1:8080 (fw.localhost.com above). Note that if your port is 80, you can leave off the port number and just navigate to the IP http://172.26.0.1 (apps.localhost.com above)

  3. Click on any of the folders to access the related app. The apps will act the same as they do on desktop, so they will use the same user logins and will update properly from gulp watch.