1. Introduction
In this tutorial, we’ll learn some common ways to provide access to a local website (on localhost) to remote devices.
First, let’s understand why we need to get remote access to the website on localhost. Then, we’ll discuss technical solutions that make a website available remotely.
2. Problem
During the development of a website project, we often need to visualize how the result is turning out and test some features. A simple way to do this is by simply accessing the site through the web browser on our local machine. We usually access it by typing http://localhost into the browser’s address bar.
However, in many cases, we want to test the website on other devices. Also, we often need to allow other people to access the website hosted on our local machine. Below we’ll look at some of the main ways to provide this access.
3. Possible Solutions
There are multiple solutions for accessing a website on localhost from a remote device. Each of them has its advantages and security considerations. So, let’s examine some of them.
3.1. Access the Host IP Address
First, we need to remember that localhost is the name set by default for the loopback interface. Therefore, usually, localhost is a mapping to the address 127.0.0.1 in IPv4 (or ::1, in IPv6).
This is why we type http://localhost in the browser when accessing a website hosted on our local machine. Even if we type http://127.0.0.1 or http://[::1] we would’ve the same result. Also, any other IP address of our local machine allows access to the hosted website.
Thus, any remote device that’s on the same network as our local machine has direct access to our website on localhost. This kind of access is done by using some IP address of our local machine that’s valid on the network. For example, if the IP address of the local machine is 192.168.1.10, we just go to http://192.168.1.10 on the remote device:
If the site runs on a port other than the default (80 or 443), we can simply add :
Optionally, we can also map a hostname (or a domain) to that IP address. We can do this by modifying the hosts file on each remote device that will access our local machine. The table below shows the path of the file to be modified in the main operating systems:
Operating System
Hosts File Path
MacOS
/private/etc/hosts
Linux
/etc/hosts
Windows 11
\Windows\system32\\drivers\etc\hosts
For a more sophisticated mapping, we can also configure a DNS server to act inside the network. In this case, once we have the server configured, we only need to set the DNS settings on the remote devices (instead of editing the hosts file).
Briefly, access directly the host IP address or hostname is the easiest option. However, it’s limited because only local devices can access the website.
3.2. Port Forwarding
In case the remote device is on a different network than the website host, the previous approach won’t work. An example of this is when the remote device needs to access the website on our local machine via the Internet. One option for such cases is port forwarding.
This solution requires configuring the router of the network where our machine hosting the website is located. In many cases, the router is the device that connects to the Internet Service Provider (ISP) – a modem, for example.
Basically, we redirect traffic incoming to a specific port of the router to an IP address and port of the machine where the website is hosted:
In this approach, the router should ideally have a static public IP address (provided by the ISP). Otherwise, the remote device user will need to find out what the new IP address of the router is every time they go to the website.
A simple way to work around this is to use a dynamic DNS service. This type of service allows us to use a domain name instead of an IP address. Fortunately, we can easily find several such services for free on the Internet.
In short, once implemented, this solution is straightforward to use. However, we need specific resources and prior knowledge to configure everything correctly.
Also, we need to remember that the device hosting the website is exposed to the public network. Therefore, it is important to consider adding security mechanisms, such as a firewall, allowing access only from authorized networks.
3.3. VPN
VPN is a secure connection that allows us to access resources from a private network through a public network, such as the Internet. Thus, we can use a VPN to provide secure external access to a website hosted on localhost.
In this approach, we connect both the remote device and the website host to the same VPN using appropriate credentials. With this, we’re able to access the website on a remote device using the IP address of the website host machine as if it were on the same network.
To use this feature, we need to set up our own VPN server. We can set both the machine that’s hosting the website or the router as a VPN server.
The figure below illustrates this kind of access when the VPN is set on the website host itself. In this case, the VPN allows the remote device to access the website directly via the host’s IP address:
This is the most secure solution to access a localhost website from a remote device. However, its deployment requires specific knowledge at the step of setting up the VPN server and its connection to the client.
3.4. Tunneling
Another secure option we’ve is to use tunneling. In this technique, traffic is transmitted over a public network (such as the Internet) being encapsulated in a specific protocol.
We can use various protocols with this technique. A widely used protocol for this purpose is SSH.
The command below demonstrates how we can create an SSH tunnel from the remote device. In this example, we consider that the website host has a user named remote-user, IP address 192.168.1.10, and the service is listening on port 80. Also, we use the parameters -q for quiet mode, -C for compressing all data, and -N not to allow the execution of remote commands:
ssh [email protected] -D 80 -q -C -N
In brief, this solution is quick to set up and simple to use. But, we must be aware of which protocol is the most appropriate for our purpose.
4. Conclusion
In this article, we learned possible solutions to access a localhost site from a remote device. Each technique presents its own advantages and challenges.
If both devices are on the same network, we can access the website via the host’s IP address. Otherwise, we can use other access methods such as port forwarding, VPN, or tunneling.
Before implementing any solution, it’s important to consider the security requirements and the complexity involved in the setup. With the right approach, we can test the local site on different devices and environments, ensuring it functions properly before making it available to the general public.