How to View Your Local Dev Server on Your Phone (VsCode Live Server, Next.js, React/Vite)

#webdev #vscode #vite #beginners

Hey Dev Community! 👋
Have you ever wanted to test your local web projects directly on your phone, but weren’t sure how? Whether you’re working with VsCode's Live Server, Next.js, or React/Vite, I’ve got you covered! This quick tutorial will show you step-by-step how to access your dev server on your mobile device. No extra tools required—just your WiFi connection and a browser!

I recently created a short video breaking this down, which you can check out below:

What You’ll Learn

How to set up your Live Server for mobile access.
How to view your Next.js apps on your phone.
How to configure React/Vite projects for the same purpose.

Step-by-Step Recap:

Here’s a quick summary of the steps covered in the video:

For Live Server (HTML/JS Projects):

Start your Live Server in VS Code.
Find your PC's IP address using ipconfig (Windows) or ifconfig | grep 'inet' (macOS).
Connect your phone to the same WiFi network and enter PC_IP_ADDRESS:5500 in your browser.

For Next.js Apps:

Run npm run dev in your project directory.
Copy the local IP address and open it in your phone's browser.

For React/Vite Apps:

Add the --host flag: npm run dev -- --host.
Access your app using the provided local IP address.

Troubleshooting Tips:

Make your you have the "dev": "vite" script in your package.json file (React/Vite)
Make sure your firewall settings aren’t blocking connections.
Ensure your devices are on the same WiFi network.

If this guide helped you, be sure to like the video and subscribe for more quick and practical coding tips. And let me know in the comments if there’s anything you’d like me to cover next!

Happy coding, and I’ll see you in the next one! 🚀