Testing localhost on multiple devices

starbist

Silvestar Bistrović

Posted on April 16, 2023

Testing localhost on multiple devices

Developers usually use localhost when developing websites or web apps on local computers. Localhost is a hostname of a current device, and it has a loopback address of 127.0.0.1. So how can you test the localhost on different devices, like another computer, tablet, or smartphone? Let me show you a few ways how I do it.

Find an IP address to share

The easiest way to find your localhost’s “external” IP address is to run the command from a terminal. For example, on macOS, run the following command:



ifconfig | grep inet


Enter fullscreen mode Exit fullscreen mode

You should see something like this:

macOS Screenshot of an output of a ifconfig command showing external IP address of a localhost.

On Windows, run the following command:



ipconfig


Enter fullscreen mode Exit fullscreen mode

You should see something like this:

Windows 10 Screenshot of an output of a ifconfig command showing external IP address of a localhost.

Now that you have the address, you can test it on any other device but don’t forget to add the port that your website or web app is running.

You must be connected to the same network to view the local IP address on another device.

Use software for exposing localhost

Here are some alternative options using third-party apps if you cannot connect your other devices to the same network.

ngrok

The first software I heard of that could expose localhost to an external address was ngrok. ngrok documentation has an excellent guide on how you could use it to expose your localhost to public internet over a secure channel. After you connect ngrok to your account, run the command ngrok http 8080 and get the publically available forwarding URL.

Make sure to check the ngrok pricing. A free plan is available for every developer, but there are some restrictions on bandwidth and usage.

cloudflared

cloudflared is the most recent addition to my favorite npm packages. It is a Node.js version of the Cloudflare Tunnel client. Installation and usage are pretty straightforward, as you can see in Wes Bos’ tweet.

Screnshot of Wes Bos' tweet showing how to use cloudflared.

cloudflared is free for everyone at the time of writing.

Local by Flywheel

One other app that I occasionally use for WordPress is Local by Flywheel. This app comes with Live Links, which enables you to “test your site with provisioned site tunnels from your Local account.”

Screenshot of Local app showing Live Links feature.

The Local app works only with WordPress.

Netlify

On rare occasions, when I need to test on a “real” server, I go to Netlify and use drag’n’drop to put my site online. I have a live site that I can test in a matter of seconds.

Netlify doesn’t expose localhost, but I wanted to show you this exciting option.

Conclusion

Ensuring your website or web app works on every device is essential. Now you have different options for testing it on other devices locally.

💖 💪 🙅 🚩
starbist
Silvestar Bistrović

Posted on April 16, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related