How to access a website through a Local Area Network that localhost change to a domain name

Question

I have a problem with accessing the website that I created on XAMPP server from another device on the network.

I already changed the HOSTS file:

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost

127.0.0.1 example.com

and the C:\xampp\apache\conf\extra\httpd-vhosts.conf

<VirtualHost *:80>
    ServerName example.com
    DocumentRoot "C:\xampp\htdocs\Example"
</VirtualHost>

I can access the domain name that I created in my browser but when I search for it from another device it will show DNS Server error something like that. Is there another way to access the website without having to change the device's HOSTS file?

Answer 1

Note that 127.0.0.1 is special. It always refers to the "localhost", ie. the computer/device you are currently making the request from. You need to use the private IP address of the computer on your LAN.

@dan touched on the required method in comments:

You'll need to create an A record in your domain's DNS table and point that to your router's public IP address, then forward port 80 to the private IP (e.g., 192.168.0.2) of your local computer running Apache. You'll also need to disable any firewall rules for port 80 on that computer. Easier than all the above however is just to use the private IP address as the URL in your other devices, but you'll still need to disable the firewall for the computer running Apache.

However, if you only need to be able to access your site from other devices on the same LAN then you can simply set the public A record in the DNS to the private IP address (eg. 192.168.0.2) of your local computer running your web server. Since you are only dealing with devices already on your LAN you probably don't have any firewall settings to update (depending on the size and complexity of your LAN) - only devices on the LAN will be able to access the internal/private IP address.

(If you use the private IP address directly - as dan suggests - then you'll only be able to enable one development site at a time on your server.)

It would be easier to implement this as a subdomain of your maindomain, rather than take over the entire domain. This would then enable your local development server to be available (only from your LAN) at the same time as the live public website. eg. Your main public website is available at www.example.com and your local development server is available at local.example.com (which is simply configured as an A record to the private IP address of your web server on your LAN).

Using name-based virtual hosts on your development server, you would then define the subdomain as the ServerName:

<VirtualHost *:80>
    ServerName local.example.com
    DocumentRoot "C:\xampp\htdocs\Example"
</VirtualHost>

Using this method allows any devices on your LAN to access your site, without having to edit individual HOSTS files (or override DNS) on those devices. Note that on some mobile devices, you'll need to disable the "data saver" option, as this requires the website to be public (the "data saver" servers will simply fail to make the required requests).