DEV Community

Cover image for πŸ“± Access Your Localhost Website on Mobile Without Hosting! πŸš€
Mayur Pawar
Mayur Pawar

Posted on

62 3 5 2 1

πŸ“± Access Your Localhost Website on Mobile Without Hosting! πŸš€

Have you ever imagined how can you access the webpage on your mobile which is present on localhost. So today we are going to discuss on how can we view the same webpage on your phone without actually hosting it.

πŸ›  Step 1: Open Visual Studio Code

Launch VS Code and make sure your project is ready to run.

Image description

πŸš€ Step 2: Start Your Local Server

Run your web project on localhost (e.g., npm start, live-server, etc.).


πŸ’» Step 3: Open the Terminal in VS Code

Navigate to Terminal in the top menu or use Ctrl + ` (backtick) to open it.

Image description

🌐 Step 4: Enable Port Forwarding

Click on the Port section in VS Code and select Forward Port.

Image description

πŸ”’ Step 5: Enter Your Port Number

Type in the port number your project is running on (e.g., 3000, 5500, etc.) and press Enter.

Image description

πŸ”— Step 6: Get Your Temporary Link

Once the port is forwarded, a temporary link will be generated. Copy this link! πŸ“‹

Image description
Image description

πŸ“² Step 7: Access It on Your Phone!

πŸ“Œ Open the link in your mobile browser, and voilΓ ! πŸŽ‰ The same webpage running on your PC will now be visible on your phone.

Image description

⚠️ Important Note:

This link will only work as long as your project is running on localhost on your PC. So, make sure VS Code stays open and the project is active. βœ…

That’s it! You’re now browsing your localhost project on mobile like a pro. 😎 Let me know in the comments if this worked for you! πŸš€βœ¨

πŸ”₯ Did you find this helpful? Don’t forget to ❀️ & πŸ“ leave a comment! πŸš€

Top comments (29)

Collapse
 
deepak0yadav profile image
Deepak yadav β€’

Great man...

Collapse
 
mayur_pawar_9b0a092ca0f41 profile image
Mayur Pawar β€’

Thanks bro

Collapse
 
raghav_dhingra profile image
Raghav Dhingra 60 β€’

Intresting

Collapse
 
mayur_pawar_9b0a092ca0f41 profile image
Mayur Pawar β€’

Thanks bro

Collapse
 
kr_yashraj_44e0f0fb162a profile image
Kr. Yash Raj β€’

Great

Collapse
 
mayur_pawar_9b0a092ca0f41 profile image
Mayur Pawar β€’ β€’ Edited

Thanks bro

Collapse
 
wynandpieters profile image
Wynand Pieters β€’

If you don't like or don't use VS Code, you can also look at Ngrok or CloudFlare Tunnels.

Or you can learn about Nginx and port-forwarding on your router and add a new skill to your arsenal.

Collapse
 
kvetoslavnovak profile image
kvetoslavnovak β€’

WOW, really handy.

Collapse
 
ansellmaximilian profile image
Ansell Maximilian β€’

Never knew this. Thanks!

Collapse
 
irondsd profile image
Konstantin Mednikov β€’

It's overly complicated. What I do is find out local ip address, and open it in the mobile browser by http://{computerLocalIp}:{port}. It will work if both devices are on the same network.

Collapse
 
duck18 profile image
duck β€’ β€’ Edited

but I have to log in to GitHub after entering the temporary link

Collapse
 
karanjain2527 profile image
KARAN JAIN β€’

Nice boi...

Collapse
 
nadeem_zia_257af7e986ffc6 profile image
nadeem zia β€’

Good explanation

Some comments may only be visible to logged-in visitors. Sign in to view all comments.