How to open a Vite dev server on your phone

Why your phone can't reach Vite by default

Vite's dev server listens on localhost only, so nothing else on your network can connect. That's why the startup output says:

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Option 1: The --host flag

Pass --host for a single run. With npm you need the extra -- so the flag reaches Vite:

With other tools: npx vite --host, yarn dev --host or pnpm dev --host. Vite now prints a real network address:

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.14:5173/

Option 2: Make it permanent in vite.config

If you always test on a phone, set it in your config so you don't have to remember the flag:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    host: true, // same as '0.0.0.0': listen on all addresses
  },
})

Or change the script in package.json to "dev": "vite --host".

Open it on your phone

Connect your phone to the same Wi-Fi and type the Network URL into its browser. Hot module replacement works on the phone too: save a file and the change appears on both screens.

If Vite prints several Network lines, use the one on your Wi-Fi (usually 192.168.x.x). The others belong to virtual adapters like WSL, Docker or a VPN.

Frameworks built on Vite

The same flag works for most Vite-based setups: SvelteKit (npm run dev -- --host), Astro (astro dev --host), Vue, React, Solid and Preact templates, and Nuxt (nuxi dev --host).

Vite not loading on your phone? Fixes

Your firewall is blocking it

This is the most common cause. The first time Node.js accepts a network connection, Windows asks whether to allow it. If you dismissed that prompt, the connection is silently blocked. To fix it, open Windows Security → Firewall & network protection → Allow an app through firewall, find Node.js, and tick Private. Also check that your Wi-Fi is set to a Private network, not Public.

On macOS, if the firewall is on, go to System Settings → Network → Firewall → Options and allow incoming connections for Node.js.

Your phone and computer aren't really on the same network

Guest networks, public Wi-Fi and many office networks use client isolation, which stops devices from talking to each other. Some routers also separate their 2.4 GHz and 5 GHz networks. If you can't change the network, turn on your phone's hotspot and connect your computer to it. That works every time. A VPN on your computer can also block local traffic, so pause it while testing.

You're running Vite inside WSL 2

By default WSL 2 runs behind its own virtual network, so the Network URL Vite prints is the WSL VM's address, which your phone can't reach. The simplest fix on Windows 11 is mirrored networking. Add this to %UserProfile%\.wslconfig, then run wsl --shutdown:

[wsl2]
networkingMode=mirrored

Then use your Windows machine's Wi-Fi IP on the phone.

"Blocked request. This host is not allowed."

Vite blocks unknown hostnames, such as a tunnel domain or a custom .local name. Plain IP addresses are allowed. If you use a hostname, add it to server.allowedHosts in your Vite config.

Wi-Fi won't cooperate? Use USB (Android)

With USB debugging enabled and Android platform-tools installed, forward the port over the cable:

Now http://localhost:5173 on the phone reaches your computer. In DevMirror, enter 127.0.0.1 and port 5173. No Wi-Fi involved.