Today I have a situation where I need to test my developing website on all devices without putting online. I am developing a marketing place website and I am developing on my localhost using Wampserver.
As a developer, I have a ton of websites that I develop on my Wampserver. Each website runs in a different environment(Apache, MySQL, MariaDB, and PHP version) as well. What I try to do, is I want to allow all devices(Mac book, iPad, and iPhone) to access the developing website that I am developing on my Wampserver(localhost). So I can test the responsive website with the Safari browser. Note that, this method works for Andriod devices as well.
In my current environment, I install a self-signed certificate on my server. I do this because the website uses the AWS S3. In order to view the assets(images) from AWS S3, your website needs SSL.
Make sure the devices use the same network
I use a Wifi network at home. In order to allow the devices to access the wamp website from my main computer(Windows OS), all devices(Mac book, iPad, and iPhone) must use the same wifi network as my main computer.
For example, your main computer uses a 5G Wifi network, you want to make sure your tablet, phone, and Mac book connect with a 5G wifi network as well. Simply check the connection setting on your device.
Edit Httpd-ssl.conf
We will change the lP address of the server from 127.0.0.1 to our main computer IP address that runs Wampserver.
Navigate to your apache folder, for example, “c:\wamp64\bin\apache\apache2.4.46\conf\extra“. In the extra folder, you will find httpd-ssl.conf.
Set your IP address (the one that runs Wampserver)
In the httpd-ssl.conf, look for the wamp website that you want to allow other devices to access. At the VirtualHost tag, replace * with your main computer IP address. Your main computer is the one that runs Wampserver.
My main computer IP address(IPv4 address) is 192.xxx.x.x. On Windows, you can open the command line terminal and type “ipconfig” command. It will show the IP address of your computer in the terminal.
Below is my example when I set the IP address at the Virtualhost tag of the wamp website I want.
<VirtualHost 192.xxx.x.x:443>Next, we will set the other devices’ permission.
Option 1: set as Require all granted
In the httpd-ssl.conf, look for the virtual host that you want to allow other devices to access. Then changes the Require local to Require all granted as below.
<VirtualHost 192.xxx.x.x:443>
ServerName yourvirtualhost.local
ServerAlias www.yourvirtualhost.local
DocumentRoot "e:/wamp64/www/yourprojectfolder"
SSLEngine on
SSLCertificateFile "${SRVROOT}/conf/key/certificate.crt"
SSLCertificateKeyFile "${SRVROOT}/conf/key/private.key"
<Directory "e:/wamp64/www/yourprojectfolder/">
SSLOptions +StdEnvVars
Options +Indexes +Includes +FollowSymLinks +MultiViews
Require all granted
AllowOverride All
</Directory>
BrowserMatch "MSIE [2-5]" \
nokeepalive ssl-unclean-shutdown \
downgrade-1.0 force-response-1.0
CustomLog "${SRVROOT}/logs/ssl_request.log" \
"%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"
</VirtualHost> With “Require all granted”, all devices on the same network, can access the wamp website you want. If you still set it as “Require local”, when other devices try to access your wamp website, it will get the Forbidden 403 error from Apache on the browser.
Option 2: set as Require ip xxx.xxx.x.x
You can specify only the IP address you want to access your wamp website. Let’s say I want only xxx.xxx.x.1(tablet) and xxx.xxx.x.5(phone) to access the wamp website. I will config as below.
Require local
Require ip XXX.XXX.X.1
Require ip XXX.XXX.X.5When other IP addresses that are not set as above are trying to access the wamp website, it will get the Forbidden 403 error from Apache.
Option 3: set as Require ip xxx.xxx.x
You can specify only the subnet as below. So all devices on the same network can access the wamp website.
Require local
Require ip XXX.XXX.XRestart the Wampserver
After httpd-ssl.conf is edited, restart the Wampserver to take the effect.
How to access the wamp website from other devices
Simply uses the main computer IP address. The IP address we set at “<VirtualHost 192.xxx.x.x:443>“. Below is how to access the wamp website from other devices (tablet, phone, mac book).
https://192.xxx.x.x
On the main computer, you will need to access the wamp website the same way as other devices are shown above.
Troubleshoot: localhost refused to connect
We need to set the Firewall to allow other devices to access the wamp website on your main computer(Windows OS). Otherwise, you will get the error that says “localhost refused to connect. try: Checking the connection ERR_CONNECTION_REFUSED“.
To do that, we will navigate to Windows Defender Firewall with Advanced Security.
Inbound rule
- Then click on Inbound Rules.
- Click New Rules in the Actions window.
- Then select Port
- Then choose TCP and choose Specific local ports.
- At Specific local ports, enter 80, 443
- 80 is an unsecured port for Apache
- 443 is an SSL port for Apache. I add 443 because my wamp site uses SSL.
- Next, choose “Allow the connection“
- Finally, give the relative name of your setting. Any name you want.
Outbound rule
Create the new rules and set everything the same as the Inbound rule above.
And that’s it. You now should visit the wamp website from your tablet, phone, and another computer in the same network.
Troubleshoot: This site can’t be reached. your-site.com took too long to respond.
I just have the access issue today when my Windows updated. It turns out my computer IP address is changed. To fix it simply change the IP address in “Httpd-ssl.conf” and restart Wampserver. Then you are good to go.
In case, you don’t use SSL
If you don’t use the SSL just like mine, you can follow the steps below.
- Change the “Require local” to “Require all granted” in httpd-vhosts.conf
- You can also choose the Require options as same as I mention above
- You still need to set the Inbound and Outbound rules for Windows
- You will use the main computer IP address instead of localhost or 127.0.0.1 when you try to access the wamp website. So it will be “http://192.xxx.x.x/yourproject”
- This method won’t work with the virtual host. For example, you can not access “http://onmygod.local”. But you can access it by “http://192.xxx.x.x/onmygodfolder” while onmygodfolder is a folder under www.
