How to Preview localhost Website on Mobile Phone
Tags: localhost, preview, mobile
Published: 2023-05-15 08:01:24

---
title: How to Preview localhost Website on Mobile Phone
published: true
date: 2022-10-02 00:00:00 UTC
tags: localhost, preview, mobile
canonical_url: https://pragmaticpineapple.com/how-to-preview-localhost-website-on-mobile-phone/
---

<figure>
<img src="https://pragmaticpineapple.com/static/6fa497caed2d20e612f7a5b27c9cf288/8a7c7/cover.jpg" alt="Scrolling a website on phone next to a computer" />
<figcaption>
Photo by <a href="https://unsplash.com/@glvrdru?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Maxim Ilyahov</a> on <a href="https://unsplash.com/s/photos/computer-phone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
</figcaption>
</figure>


Are you looking to preview your website on your mobile (or tablet) while developing it on your computer? Or vice-versa? Maybe you want to get a “real feel” of how the website works and looks directly on the device. Then, you’re in for a treat. Today, we’ll show how you can visit the website hosted on `localhost` directly from your mobile or tablet.

## Step 1: Connect your device to the same network

If you have multiple WiFi networks, ensure **your computer and device are on the same WiFi**. This step is essential.

## Step 2: Find your computer’s local IP address

Your computer has a public IP and a local IP address. We need a **local IP address** , IPv4, to be more precise. You must be asking - “How do I find my local IP address?“. Here’s how you can do it on different operating systems:

### Mac OS

1. Open System Preferences -> Network
2. Next to the Status, you should see the IP address. It should write out - “WiFi is connected to YOUR\_WIFI\_NAME and has the IP address YOUR\_LOCAL\_IP.” See how it looks in the screenshot below:

<figure>
<img alt="Mac OS network settings" src="https://pragmaticpineapple.com/static/968358c27fbe7b666add6a7b02fe5f63/6d370/mac-os-network-settings.png" />
<figcaption>
The local IP address is underlined in red.
</ficaption>
</figure>

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#linux)Linux

1. Run in your terminal `hostname -I`. Or, run `ifconfig | grep "inet " | grep -v 127.0.0.1`

### Windows

1. Select Start > Settings > Network & internet > Wi-Fi and then select the Wi-Fi network you’re connected to.
2. Under Properties, look for your IP address listed next to IPv4 address.

Great, now that we got our computer’s local IP address, we need to run our app.

## Step 3. Get the port number

If you’re running a Rails app, the port is usually 3000, and you can access your app in the `http://localhost:3000`.

> 💡 In my case, I had to bind the server to `0.0.0.0`. I run a Gatsby website, so for me, it was `gatsby develop --host 0.0.0.0`, which runs the server that listens on the 8000 port.

Whatever way you run your server, make sure to use the PORT from `http://localhost:PORT` - where the server listens for incoming requests.

## Step 4: Open your other device’s browser

On your phone or tablet, open your browser of choice and type in `http://YOUR_LOCAL_IP:PORT` - which in my case was `http://192.168.1.30:8000`.

If you’re running a server on `http://localhost:3000`, and your IP is `192.168.1.10`, then you need to visit `http://192.168.1.10:3000` on your mobile or tablet.

## That is it

You can now browse your website directly from your other device while you develop on the computer. How neat!

Now, you can test mobile and tablet views on real devices. That is if you need to do so.

Thanks for following along, and catch you in the next one.