DEV Community

loading...
Cover image for How to View Your Live Localhost From Your Laptop on Your Mobile Device

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

brendamichellle profile image Brenda Michelle ・2 min read

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

Discussion (23)

pic
Editor guide
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 Author

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
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 Author

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
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 Author

Yes that's another way of finding your ip adress πŸ˜ŠπŸ‘

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 Author

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

Collapse
paulkd profile image
Paul Dunderdale

I use Expose by BeyondCode for PHP applications. :)

Collapse
mazarzycki profile image
Marek Zarzycki

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

Collapse
brendamichellle profile image
Collapse
shrihankp profile image
Shrihan Kumar Padhy

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 Author

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

Collapse
ivandotv profile image
Ivan V.

The easiest way with no setup is xip.io/

Collapse
brendamichellle profile image
Brenda Michelle Author

Thanks for the recommendation

Collapse
jwp profile image
John Peters

Excellent advise, Thank You!