Accessing localhost (xampp) from another computer over LAN network - how to?

Profile picture for bcosynot
bcosynot

I have just set up a wi-fi network at home. I have all my files on my desktop computer (192.168.1.56) and want to access localhost over there from another computer (192.168.1.2).

On my desktop I can access localhost through the normal http://localhost. Apache is running on port 80 as usual.

What do I have to do to achieve this? There is documentation on the net but they either don't work or are too fragmented and confusing to understand.

I think I have to make changes to my apache's httpd.conf file and the hosts file. Any ideas as to what changes to make?

Access localhost from Remote Device

Prerequisite: Your website is currently on <code>http://<i>localhost</i>:<b>8081</b>/</code> with a tool like live-server

a) Publish on Same Network

Within the same network, you can access your machine with your current ip address or hostname. You can find the ip address running ipconfig | grep IPv4 or the hostname by sending a ping -a to that ip.

<pre><code>http://<i>192.128.1.18</i>:<b>80</b>/ http://<i>hostname</i>:<b>80</b>/</code></pre>

Note: For best results, use port 80, connect on a private network, and check your firewall settings.

b) Publish on Any Network (easier)

  1. Opt 1 - You can use ngrok to provide port forwarding over ngrok's public facing ports

    Download ngrok and run the following command:

    <pre><code>$ ./ngrok http <b>8081</b> </code></pre> <img src="https://i.stack.imgur.com/rkYfE.png" width="450" />

  2. Opt 2 - You can use localhost.run to create a ssh tunnel with the following command:

    <pre><code>ssh -R 80:localhost:<b>8081</b> <i>kylemit</i>@ssh.localhost.run </code></pre> <img src="https://i.stack.imgur.com/lAQ9N.png" width="450" />

Access Remote Device from Local Dev Tools

To connect your browser dev tools with a connected device, follow the instructions at Get Started with Remote Debugging Android Devices

  1. On your phone, enable Developer Options & USB Debugging

  2. Plug your phone into your computer via USB and set the protocol (not File / Media Transfer)

  3. Open Dev Tools > More Tools > Remote Debugging (try here if Device Not Detected)

    <img src="https://i.stack.imgur.com/pJTw5.png" width="450" />

  4. Find your site and Click Inspect which will open up a new inspector window

<img src="https://i.stack.imgur.com/EtrqL.png" width="450" />

Further Reading: