How To Access Localhost On Another Device

So there you are, tapping away on your computer and running the next Facebook locally. You're in the final stages of development and you're about to do some testing on a few devices. However, then you realize: "How do I access my localhost on another device?". 🤔 Well, you're at the right spot, buddy (or budette...?). In this article I'll show you how this can be done not only through your local WIFI network, but through the internet as well! And the answer to the latter isn't staging...

What is localhost?

Some of you may know it already, others may not. It's something we use quite often as developers, but never really try to understand in depth. 😥 But don't get me wrong... I don't want to bore you with the details. There's a Wikipedia page for that. I simply want to give you a rough idea of what's going on in that beautiful computer of yours.

So starting off, did you know that localhost is a domain name just like chunkbytes? And just like any other domain name, it's a human readable version of its IP address, aka the location (i.e. the server) of your website. With that said, the IP address of localhost tends to be 127.0.0.1.

Whenever you look up a domain in your browser, it makes a call to a server over the internet, but this isn't the case with localhost. Oh no, my friend! 😛 Instead, the call gets looped back to the computer itself. So essentially, localhost is pointing to your own computer.

Fun fact time: Any IP that starts with 127 automatically loops back to your own device.

Through a local network

So where were we? Oh yeah, accessing localhost on another device. The solution is quite simple, really... If localhost represents, what I like to call, the "internal" IP address for your PC to access itself, then we simply need the "external" IP for other devices. 💁‍♂️

And how do we find this out? Alright boys and girls, whip out your terminals and run the following command:

• Windows: ipconfig
• Linux/Mac: ifconfig

Below are two examples of the terminal output with the IP address that we're after: 192.168.2.50.

/* Windows */

Wireless LAN adapter Wi-Fi:

   Connection-specific DNS Suffix  . : home
   IPv6 Address. . . . . . . . . . . : 2a02:8388:8881:c200...
   Temporary IPv6 Address. . . . . . : 2a02:8388:8881:c200...
   Link-local IPv6 Address . . . . . : fe80::1dc5:f047...
   IPv4 Address. . . . . . . . . . . : 192.168.2.50
   [...]

Unfortunately, I couldn't try this out on a Mac. 🍎 Nonetheless, look out for the keyword WiFi and the IP shouldn't be too far away.

/* Linux */

wifi0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
    inet 192.168.0.45  netmask 244.244.244.0 ...
    inet6 2a02:8388:8881:c200... 
    inet6 2a02:8388:8881:c200...
    [...]

So back the to the main question: "How do I access localhost on another device?". Knowing that the IP in this example is 192.168.2.50 and assuming you're running your project on port 3000, you can then access your project on another device 📱 with 192.168.2.50:3000 in your browser. That's it!

Through the internet

What if I told you... you can also share your localhost through the internet? Not joking! 😁 There are several tools, paid and free, that allow you to accomplish this marvelous feat of technology. The most well-known tool is ngrok, which is also the one we'll be using in this tutorial.

And how does it work? Again, without boring you with the technical details: tools like ngrok basically expose your localhost to the internet, which can then be accessed via a subdomain of ngrok.com. Even though ngrok has paid plans, their free version should be plenty for most developer needs.

Sign up

Sorry lads (and ladettes...?), but even using their free version will require you to create an account with them. But hey, at least you don't need to give them your credit card details, am I right? 😆

Download ngrok

Next, download the actual program that allows this magic goodness to happen and extract it from the zip file.

Setting it up

With the ngrok program extracted, navigate your terminal's directory to the same location. Then run the following command with your authentication token as the last parameter. This will basically save your authentication key to ngrok's yml configuration file.

./ngrok authtoken 1kK5xphsYvZGLpWsK2JVAB...

Share your localhost

Almost there! Now, with your terminal in the same directory as before, run the final command below. The last parameter is the port you want to expose to the internet. In our example, it's 3000.

./ngrok http 3000

This will launch ngrok and display some information in your terminal. One of them will be the link under which you can access your localhost. Look out for this line: 👇

Forwarding      http://5fb075d.ngrok.io -> http://localhost:3000

And there you go, you can now access your local app through the internet with the help of ngrok! 🎉🥳