How to view localhost on your mobile phone

Nowadays, it's more important than ever to ensure that websites and web applications look and feel great both on a desktop and on a mobile device. While many tools have been created over the years to help aid in mobile-responsiveness, such as Responsively and Chrome's built-in Inspect tool, sometimes it would make things a lot easier and smoother to just see your progress, live, from your phone, without having to deploy a work-in-progress.

Fortunately, there is an easy way to view the same localhost you see in your browser, on your smartphone.

Prerequisite: Your phone and your machine must be connected to the same wifi signal for this to work.

Step One: run your local project on localhost

On your machine, get your app up and running in whatever way your particular project calls for, to get it projected to localhost in your browser. Make sure you have that localhost port open in a tab.

Step Two: Get your local IP address

Open up your terminal, and type in ipconfig. This will spit out a bunch of text, but you want to look for the line that says IPv4 address.

Once you've located that address (it should look like 111.111.1.111, but with different numbers), enter it in your phone's mobile browser (Chrome, Safari, whatever) address bar, followed by the port you previously opened on your machine (localhost:3000 or 8000 or whatever it may be). So the final result will look something like this:

123.456.7.890:3000

As long as your localhost port is running and you entered the numbers accurately, your phone should now display the mobile view of your project. It should reload in sync with your desktop as you make changes and save.

Congratulations! You now have a live view of what your project will look like on your particular mobile device, without having to use additional tools, install special software, or deploy a half-made app. While this method doesn't come with any special development tools, it does help ensure that some of the inconsistencies caused by viewing on "mobile" through other means can be eliminated.