Skip to main content
Date :

View PC localhost on your mobile phone

Very Simple Method to see your localhost on your mobile phone. 

Serve over your wifi via local IP

This sounds complicated but its actually really easy.

IMPORTANT: Make sure that your dev computer and your mobile device are connected to the same wifi network.

Step 1: Serve to Localhost

On your dev machine, serve your application in whatever way you usually do that serves it over a localhost address.

Make sure to note what port number its being served on. In the image below, we’re noting 8080.

Once you are able to view your app locally on your computer via localhost, you can move to step 2.

Step 2: Find your Local IP Address

Open System Preferences > Network. Select “Wifi” in the left pane if it isn’t already selected.

Under “Status: Connected”, you should see “Wi-Fi is connected to <network name> and has the IP address <local IP address>.”

Take note of that IP address!

Note: It’s common for your Local IP Address to change automatically when your device or other devices connect/disconnect from the network. So you can’t really bookmark this address. Instead, you’ll have to find your address each time — for me, this is usually just when I get started each morning and it stays throughout the day.

Step 3: View on your phone

On your mobile device’s browser (any will work), navigate to http://<Local IP Address>:<port number>.

For example, if I was serving on localhost:8080 and my local IP address is 123.45.67.890, on my mobile device’s browser I would navigate to http://123.45.67.890:8080 . The http:// is important, don’t leave it off.

Success!

Comments

Post a Comment

Popular posts from this blog

Create a Header

Header Header My supercool header Create a Header Step 1) Add HTML: Example < div  class ="header" >    < h1 > Header < /h1 >    < p > My supercool header < /p > < /div Step 2) Add CSS: Style the header with a large padding, centered text, a specific background-color and a big sized text: Example .header  {   padding :  60px ;   text-align :  center ;   background :  #1abc9c ;   color :  white ;   font-size :  30px ; }
Post a Comment
Read more

Code for Digital clock

Click here to see Digital Clock <!DOCTYPE html> <html> <head>   <title>Digital Clock</title> //Add following CSS    <style>     body {       font-family: sans-serif;     }     .clock {       position: absolute;       top: 50%;       left: 50%;       transform: translate(-50%, -50%);       font-size: 60px;       color: black;     }   </style> </head>
Post a Comment
Read more