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
Top comments (30)
Neat little trick 😉 Also, ngrok 👍
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.
Also created a discussion about alternatives a while ago 😉
Nice 😄, I have used
ngrokto debug awebhook. But for Security point of view its not good. But i think this is the only option to debug awebhook, isn't ?A lot of people have mentioned ngrok I've never used it but ill look into it :)
If you like the look of ngrok, I created a VSCode extension for it that you might enjoy using too!
I feel like this is going to help someone via Google in the future 😄
Hopefully :)
Great stuff. Although I don't really use live-server anymore. I'm now with ngrok and browsersync. 😄
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!
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.
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.
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!
Yes that's another way of finding your ip adress 😊👍
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.
Hi Brenda, it's a great article! Congratulations!
Thank you :)
I use Expose by BeyondCode for PHP applications. :)
It's a nice thing to know but I use python flask for my dev, so will it work there.
I don't use python flask so I am not sure sorry. Maybe a quick Google search can help out :)
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.
Yes they need to be on the same wifi connection :)