How to test local websites on mobile devices

oftentimes When developing websites you'll want to see how it looks on a mobile device or tablet browser developer tools have come a long way allowing us to see how our websites will look on various devices and screen sizes as helpful as these tools can be sometimes they miss things or you just simply want to see exactly how it'll look on a specific device to get around this I want to show you how I'm able to test local code for my computer on various devices so in vs code I have this modern form I created a video on a while back if you are interested in learning how to build this there will be a link Down Below in the description without the use of any Frameworks to view this page we can use an extension called live server if you're watching this video I'm going to assume you're already aware of this extension this launches a page on a local server native to the network you're connected on if you attempt to take this URL and paste it into a browser on your phone tablet or other device it's not going to work in order for this to work work you're first going to need to obtain your local IP address to obtain your local IP address if you're on a MacBook you can run this command in the terminal to obtain your local IP if you're on Windows within a command prompt you can run this command and then you're going to want to look for the ipv4 address now the next step is very important you're going to want to ensure that your device is on the same network as a computer running the local website otherwise this won't work on my mobile device which is connected to Wi-Fi on the same network as my MacBook I'm going to replace the value before the port with my local IP address and then if we hit enter we should be able to see the website and if I make any changes to this on my computer we're also going to see those changes live on the mobile device for the most part this works without any problems however on Windows I have experienced issues where it refuses to connect to fix this what you're going to want to do is navigate to the search bar and type in Windows Defender firewall you're going to select the demand settings then inbound rules and then create a new rule we're going to select Port then we'll leave it as TCP and then enter the port your application is currently running on in this case it would be 5501 leave it as allow the connection and you can leave the profile options all checked lastly you just want to give it a name and hopefully that should resolve your issue now for any front-end framework users I'll show you a few ways to easily display the network information for your application directly in the terminal without having to do any of the steps above on this channel I mainly stick to view so that's what I'm going to be showing you in however I am sure that these methods will probably work for react and even angular when starting your local development server you can add the flag host to the end with view this will display the network information for the locally running application directly in the terminal if you're using nux this should also work as well to avoid having to add this flag each time you start your development server you can actually just include it within the dev script inside of your package.json lastly for review specifically you can add a server option within the vconfig and Define the property host and set this to true alright hopefully you found this helpful if you did be sure to leave a like as it really helps out the channel and consider subscribing for more content like this thank you for watching I'll see you in the next one take care

Channel: John Komarnicki

Views: 39,286

Keywords: test local code, how to test local code, local code on mobile devices

Id: KI29qb0xcsM

Length: 3min 29sec (209 seconds)

Published: Thu Dec 29 2022