How to access the htdocs directory of XAMPP from a computer or mobile device in the same local area network (LAN)

Learn how to access the htdocs directory of your computer from a device connected in the same local area network.

While working on some projects that required to be tested on mobile devices (not emulated as i needed the camera), a common problem that a lot of developers have, came in. "We can't" access easily local sites from other devices, for example on mobile devices or even when you need to show your page to some workmate. I quoted the we can't because it's actually possible to do this in xampp, however not everybody knows how to do it.

In this short article, we will explain you how to access the htdocs directory of your xampp instance from another device in the same local area network.

Requirements

XAMPP needs to be already installed (Apache and MySQL services are not required to be installed as services).
Another device to check if its working (we'll use a mobile device connected to the same Wi-Fi network).

1. Allow Inbound Connections for Apache and MySQL on the Firewall

As first step, considering that you have XAMPP already installed and fully functional on your own computer (the host), you will need to allow inbound connections to the Apache (HTTPD) and MySQL (MYSQLD) rules on the firewall of your computer. In Windows you can easily do this accesing the firewall settings and searching for the Advanced Settings menu. On the Windows Defender Firewall With Advanced Security you should be able to find the Apache HTTP Server and mysqld rules. Select every option respectively, do right click on them and select Properties:

In this menu, the default section General should be visible and you will find the Action sub-group, in this area select the Allow the connection option:

And apply changes. After doing this with both processes (Apache HTTP Server and mysqld), the processes should have now a green checked icon, for example with Apache:

And with MySQL:

After allowing inbound connections, you should be ready now to test from other device.

2. Create Test Page inside the root directory of htdocs

For testing purposes, we will create a sample page located in the root directory of htdocs in xampp (C:\xampp\htdocs) namely mywebpage.html with the following content:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Hello World</title>
    </head>
    <body>
        <h2>You are viewing this HTML file from a device via LAN</h2>
    </body>
</html>

We should be able to see this page considering that the content of our HTDOCS directory is the following:

htdocs/
âââ cordova
âââ mywebpage.html
âââ projects
âââ sandbox

The content is irrelevant, this will help you to guide yourself in case you are not understanding it all. Be sure now to have the apache and MySQL services running in your XAMPP Control Panel:

3. Check host public IP and test from other device

As final step, we will need to know our own private IPv4 Address so we can access it from another device, you can easily obtain it with ipconfig on your command prompt:

ipconfig

This should generate an output similar to:

Use this IPv4 Address to access the htdocs directory from other devices connected to the local area network. For example, we should be able to see the test page created in the previous step with the following url http://youripv4address/mywebpage.html and see the following output, for example in a mobile device: