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

Publish Date: Dec 8 '20

151 30

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

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.

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

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.

On my laptop

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

Comments 30 total

MadzaDec 8, 2020
Neat little trick 😉 Also, ngrok 👍
- Zaheer BalochDec 8, 2020
  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.
  - MadzaDec 8, 2020
    Also created a discussion about alternatives a while ago 😉
- Shaiju TDec 9, 2020
  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 ?
- Brenda MichelleDec 10, 2020
  A lot of people have mentioned ngrok I've never used it but ill look into it :)
  - Phil NashDec 13, 2020
    If you like the look of ngrok, I created a VSCode extension for it that you might enjoy using too!
Ben HalpernDec 8, 2020
I feel like this is going to help someone via Google in the future 😄
- Brenda MichelleDec 10, 2020
  Hopefully :)
Juan F Gonzalez Dec 9, 2020
Great stuff. Although I don't really use live-server anymore. I'm now with ngrok and browsersync. 😄
- Brenda MichelleDec 10, 2020
  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!
  - Juan F Gonzalez Dec 10, 2020
    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.
MarekDec 9, 2020
Hi Brenda, it's a great article! Congratulations!
- Brenda MichelleDec 10, 2020
  Thank you :)
Bassell Dari IddisahDec 12, 2020
It's a nice thing to know but I use python flask for my dev, so will it work there.
- Brenda MichelleDec 14, 2020
  I don't use python flask so I am not sure sorry. Maybe a quick Google search can help out :)
Paul DunderdaleDec 12, 2020
I use Expose by BeyondCode for PHP applications. :)
Ivan V.Dec 12, 2020
The easiest way with no setup is xip.io/
- Brenda MichelleDec 14, 2020
  Thanks for the recommendation
ShrihanDec 14, 2020
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.
- Brenda MichelleDec 14, 2020
  Yes they need to be on the same wifi connection :)
barryhobrienDec 16, 2020
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!
- Brenda MichelleDec 17, 2020
  Yes that's another way of finding your ip adress 😊👍
JWPJan 4, 2021
Excellent advise, Thank You!
Khalid BenjellounMar 18, 2022
Great
Pat-1973Jun 13, 2022
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.
Pat-1973Jun 13, 2022
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.
- Abhishek MoreDec 28, 2022
  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
Abhishek MoreDec 28, 2022
I made a cool little CLI to generate a QR code that points to a running live server, so all you have to do is scan it with your phone. Check it out at liqr.vercel.app!
sibi404May 17, 2023
It showing Cannot GET /index.html
Praveen MishraJul 14, 2023
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.

Add comment

Brenda Michelle @brendamichellle