Hello everyone, Thanks for reading.
What we will learn here.
- Working mechanism of
localhost/127.0.0.1 - Preview your local web server output directly in your mobile devices.
- And many more on the way.
Points to remember
- This method runs completely on local environment so it does not work over internet and does not consume internet data.
- Both host and preview device must be connected to the same network, i.e. same common router.
- If devices are configured to block the access of localhost ports over the network, then this method might not work.
That's being said, let's dive right in.
Responsive web design has been a crucial aspect of frontend development. So while developing, not only you want to design it for larger screens but also on the smaller screens as well .
Lets say you developed a frontend, and now want preview how its looking, right ? Its simple to preview on your desktop and laptops but what about on smaller devices ?
One way of achieving it is by inspecting your preview browser with ctrl + shift + i and then toggling device toolbar with ctrl + shift + m and choosing the appropriate device you want to preview in from the top bar.
But if you want to view what it looks like in an actual mobile device, then we are achieving that today.
First, what is localhost and how does it works ?
In computer networking, localhost is a hostname that refers to the current computer used to access it. It is used to access the network services that are running on the host via the loopback network interface. Using the loopback interface bypasses any local network interface hardware. source
In other words, it actually points to your own devices and can access the services running locally on your own devices like Web Server, FTP Servers, Mail Servers, etc.
A simple example would be doing " Open with Live Server " in VsCode with Live Server extension in a .html file then , it will serve a html file in the default browser with address like 127.0.0.1:5500 .
Note: localhost resolves to
127.0.0.1which is also called as loopback IP address. So both of them corresponds to same thing.
There is another interesting thing about localhost, most of us might not know about. All of our devices got a IP address from the router when they gets connected successfully. It might differs depending upon the routers and the IP class your network router uses.
But the point is, you can actually access the localhost services of a device from other devices on the network through the IP address provided to the host device by the router. So we can say host IP address is nearly alternative to the localhost of that device.
Let me make this clear with a figure.
Here if our local development host device has the IP address of 192.168.0.10 for example, then we can access the localhost services of host device from other client devices connected on the same network by just using the IP address of host device : 192.168.0.10.
Note: If any of the localhost address has port number with it then you have to append it as well.
localhost:8000=>192.168.0.10:8000
127.0.0.1:5500=>192.168.0.10:5500
How to find your IP address ?
Now you might wanna ask, where can I find the IP address of my device. Its pretty simple.
- For windows users
Open the Windows command prompt and enter
ipconfig
It would looks like this.
Mine is under Ethernet Adapter Ethernet because I am connected through ethernet. But if you are connected through WiFi then look under Wireless LAN Adapter for an IPV4 Address and there you got it.
- For mac users
Open the terminal and then for wired connections, enter
ipconfig getifaddr en0
and for WiFi connection , enter
ipconfig getifaddr en1
- For linux users
Open the terminal and then , enter
ifconfig -a
Also most of the routers uses DHCP protocol to assign IP address to your device. That means, when you reconnect your device to router again, the IP might be different. If you want consistent IP address then try setting up a static IP for your device.
So next time when you are serving your frontend preview in localhost, it is also available to other devices on the same network . Now what you need to do is, type host address along with port in the browser on your mobile device and you will have your preview right there.
Also there's a bonus. If your preview supports live reloading then it also works on mobile preview as well. You can have html file preview, NodeJS preview, Laravel Preview, and others.
Implementation Example
For the demonstration purpose, I have prepared simple responsive webpage using bootstrap framework and images from unsplash.
Here my laptop has an IP address: 192.168.0.10
And after serving the html, my web server is running at 127.0.0.1:5500
So if I go to my mobile device and go to 192.168.0.10:5500 , I get
And also my server also supports live reload, so every time I save my changes in the code, it will automatically refresh the page.
That's it.
If you encounter any problems, then please comment them down. I will try to resolve it.
Happy Coding.