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.
π 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.
π Step 4: Enable Port Forwarding
Click on the Port section in VS Code and select Forward Port.
π’ Step 5: Enter Your Port Number
Type in the port number your project is running on (e.g., 3000, 5500, etc.) and press Enter.
π Step 6: Get Your Temporary Link
Once the port is forwarded, a temporary link will be generated. Copy this link! π
π² 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.
β οΈ 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)
Intresting
Thanks bro
Great man...
Thanks bro
Great
Thanks bro
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.
WOW, really handy.
Never knew this. Thanks!
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.
Nice boi...
Have you also realized that Port forwarding is very slow? It will never be better than Deploying/hosting your website.
But if we are making the web page responsive, that we can use that. We can deploy them but if we want to see the real time change, then this would be the best method. As we don't need to deploy it.
You could make it easier to copy by throwing the link into a qr code generator on your pc.
You can do that. But if we can just paste the link, that would be better. As this is temporary link.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.