How to view localhost on mobile

How to view localhost on mobile

`npm run dev` on your iPhone!

Just swap localhost for your machine's local IP address

Update: for vite bundled apps, read my follow up: Expose Vite's local address

Update: for create-react-app you can easily copy it from the terminal where you are running the server

output from the terminal prompt showing the local ip address

While building sites, your content should always be easily accessible regardless of the user's device size, speed or type. It is much easier to build in the responsive design from the beginning, rather than the trap we often fall into where we develop on blazingly fast desktop machines hooked up to ethernet, and then wonder why the site barely functions on an older mobile phone via crappy 3G connection.

Thankfully, it's pretty painless to view your local development from one machine (like your laptop) on another machine (like your iPhone). Follow the steps below (for Mac but they'd be similar on any OS) to start seeing your dev site on a true mobile device!

  1. Find your computer's local IP address:

  2. Open “Network settings”

    wifi.png

  3. Highlight and copy the IP address (using right click -> copy, NOT cmd-C)

    ip.png

  4. Start your local dev server, launch browser and view the site in progress. For create-react-app it would be localhost:3000

  5. Replace localhost with the computer's IP address, but keep the port (the :3000), and confirm the same site loads. My app’s new url would be 192.168.1.192:3000

  6. Done! Copy-paste that new address and send it to any iPhone, Android, tablet, smartTV, whatever! As long as the device is on the same network as your computer running the dev server, it should work.