How to view your Localhost Website in a Phone?

rustineDave : 2018-12-30 21:11:28

So, you're here because you want to know how to View your localhost served website in your mobile phones and other PC's. It could be because you want to test the responsiveness of your project or simply try to look at it in a different pixel density. Whatever it is, rejoice! You've just found what you're looking for. In this BlogPost, I will be teaching you (step by step) the whole procedure in giving your other gadgets the access to your localhost served website! Let's get started.

Prerequisites / Requirements

1.) Wifi or Phone with Tethering Portable Hotspot Capabilities. (IT'S OK EVEN IF THE GADGETS DON'T HAVE INTERNET ACCESS)

2.) Project hosted in XAMPP

1.) Serve your Project

Im assuming that you already have the project stored in your htdocs directory. Now, open XAMPP Control Panel and turn it on. Test your website in your browser and see if it works.


2.) Set up a LAN (Local Area Network)

This could be either a WiFi or a Phone with Tethering portable Hotspot Enabled. If you have a WiFi, just turn it on and connect the PC (where the project is hosted) and the other gadget you want to view the website to.

If you have a phone, then turn on your Portable WiFi Hotspot in the settings and connect the PC (where the project is hosted). If you don't know how to enable WiFi hotspot, you might want to read this guide first.

3.) Know your IPv4 Address

Before proceeding to the next paragraph, make sure you connected both devices (THE ONE THAT IS HOSTING THE PROJECT and THE DEVICE YOU WANT TO VIEW THE PROJECT TO).

Open command prompt and type in : ipconfig

You should see lots of information about your IP and some network stuffs. Now locate Wireless LAN adapter Wi-Fi in the list and under that you can see your IPv4 address. That will be the equivalent URL of typing localhost in your browser. You'll see what I mean in the next part.


4.) Visit the Project in your phone! (or other connected devices)

Everything is now set up! Open the browser in your phone and simply type in the IPv4 address you've got just recently. It will show you the list of all the projects inside the htdocs folder. Cool right? Click the project you want to view and lo and behold! You can test it in any connected device you want!

Did it work? Yes? Congratulations! If, for somehow, it didn't you can try the following solutions to help you out :

1.) Comment Below and ask.

2.) Look for communities/facebook groups that you think might help you

3.) Redo the whole process once more! You might have just missed a single part.