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! 🚀

Top comments (6)

Araz • Dec 7 '24

i would love to read something about how i can make it work easier when using WSL... sadly since starting any app in WSL will run it inside a network inside WSL and then just pass it to windows, devices in the network can not see it. any ideas about that?
i have read some of the main workarounds on the internet, but i am still searching for the best and simplest solution.

Chris Ebube Roland • Dec 8 '24

I'm not really experienced with Linux or WSL, but one simple workaround could be running the app directly on Windows instead of inside WSL. For example, you can install Node.js on your Windows machine and run your Next.js or React app from your host environment. Then, you can access it using your Windows IP and port as usual.

If you'd prefer to stick with WSL, you might need to configure port forwarding or expose the WSL network to make it accessible to other devices. I've heard some workarounds like using netsh for port proxying, but I haven’t tried them myself. Let me know if this helps.