DEV Community

Cover image for How to View Your Live Localhost From Your Laptop on Your Mobile Device
Brenda Michelle
Brenda Michelle

Posted on

How to View Your Live Localhost From Your Laptop on Your Mobile Device

Make sure your project is responsive by viewing it live on your mobile device.


Before you get started with this tutorial you should have VSCode installed as well as the live server extension. There are tutorials online just ask google or check out @sasha.codes Instagram post with a mini-tutorial on how to install and use it.

1. First, start your live server through VSCode

Alt Text

2. Then look up your IP address.

If you are on a mac. You can go to your 'system preferences' and then 'network' and there you will find your IP address.

Alt Text

Alt Text

Alt Text

If you are on a Windows go to your taskbar open the wi-fi network you are connected to and there you should find the IP address (If this doesn't work try a google search since every computer is a bit different your IP address might be located somewhere else)

3. Make sure your laptop and mobile device are connected to the same wifi and that your mobile data is turned off.

4. Input URL into your phone's browser

http://YOUR IP ADDRESS:YOUR PORT NUMBER/YOUR FILE NAME

for example, mine would be:
http://196.168.0.166:5500/index.html

Alt Text

5. Enjoy

You should be all set. Every time you make a change to the HTML file and save it you should be able to see the live version on your laptop and mobile device. If it does not show try reloading the page.

Alt Text
On my laptop

Alt Text
On my mobile device

If you are even a bit intrigued and are interested in learning to code lets connect! I would love to help in any way I can.

Photo by Taylor Vick on Unsplash

Top comments (30)

Collapse
 
madza profile image
Madza

Neat little trick 😉 Also, ngrok 👍

Collapse
 
zaheerbaloch profile image
Zaheer Baloch

Came here to say ngrok. I am at times atonished to see how many people dont know about ngrok.

Note though that in most baking environments WIFI or ngrok may not be allowed so you want to be able to still use the same desktop for testing and get used to it.

Collapse
 
madza profile image
Madza

Also created a discussion about alternatives a while ago 😉

Collapse
 
shaijut profile image
Shaiju T

Nice 😄, I have used ngrok to debug a webhook. But for Security point of view its not good. But i think this is the only option to debug a webhook , isn't ?

Collapse
 
brendamichellle profile image
Brenda Michelle

A lot of people have mentioned ngrok I've never used it but ill look into it :)

Collapse
 
philnash profile image
Phil Nash

If you like the look of ngrok, I created a VSCode extension for it that you might enjoy using too!

Collapse
 
ben profile image
Ben Halpern

I feel like this is going to help someone via Google in the future 😄

Collapse
 
brendamichellle profile image
Brenda Michelle

Hopefully :)

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Great stuff. Although I don't really use live-server anymore. I'm now with ngrok and browsersync. 😄

Collapse
 
brendamichellle profile image
Brenda Michelle

I've heard of them :) When I was looking I wanted something quick that I did not have to sign up for etc. With this, I only have to type out a link :) But I might sign up for one of these eventually. Thanks!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

With the ones I mentioned you don't have to sign up for anything 😄
But I get what you're saying, live-server is a really useful tool when one wants an easy way to spin up a server.

Collapse
 
pat1973 profile image
Pat-1973 • Edited

Brenda,

Strange situation overhere.
Everything works but how is it possible that the font that is loaded on my computer / web project is displayed correctly but not on my tablet and phone.

And yep :-) I'm new in web development.

Collapse
 
barryhobrien profile image
barryhobrien

Since you start with command line on mac or linux, type ifconfig to get your ip
On windows cmd line, the command is ipconfig
Thanks for your tips!

Collapse
 
brendamichellle profile image
Brenda Michelle

Yes that's another way of finding your ip adress 😊👍

Collapse
 
mishrapraveen profile image
Praveen Mishra

Excellent article on viewing your live localhost from your laptop on your mobile device! If you're eager to explore this topic further, I highly recommend checking out LambdaTest's comprehensive guide on local page testing. It provides valuable insights and step-by-step instructions on how to effortlessly view your localhost on your mobile device.

Collapse
 
mazarzycki profile image
Marek Zarzycki

Hi Brenda, it's a great article! Congratulations!

Collapse
 
brendamichellle profile image
Brenda Michelle

Thank you :)

Collapse
 
paulkd profile image
Paul Dunderdale

I use Expose by BeyondCode for PHP applications. :)

Collapse
 
bassell profile image
Bassell Dari Iddisah

It's a nice thing to know but I use python flask for my dev, so will it work there.

Collapse
 
brendamichellle profile image
Brenda Michelle

I don't use python flask so I am not sure sorry. Maybe a quick Google search can help out :)

Collapse
 
shrihankp profile image
Shrihan

Cool little trick. Should also mention that the devices need to be connected using the same network, so that the IP addresses match and allow you to use this.

Collapse
 
brendamichellle profile image
Brenda Michelle

Yes they need to be on the same wifi connection :)

Collapse
 
sibi404 profile image
sibi404

It showing Cannot GET /index.html

Collapse
 
pat1973 profile image
Pat-1973

Brenda,

(or) Anybody.

Everything works but how is it possible that the font that is loaded on my computer / web project is displayed correctly but not on my tablet and phone.

Collapse
 
abhishek_more profile image
Abhishek More

Hey Pat,

This could be because you have not imported the font properly in the code. The desired font may be already installed locally on the computer, which is why it only works there.

Best,
Abhishek

Collapse
 
kmbenjel profile image
Khalid Benjelloun

Great

Collapse
 
jwp profile image
John Peters

Excellent advise, Thank You!

Collapse
 
ivandotv profile image
Ivan V.

The easiest way with no setup is xip.io/

Collapse
 
brendamichellle profile image
Brenda Michelle

Thanks for the recommendation