Deploy a Vite app to your local IP address

Here's how to deploy your Vite app to your local network so you can access it from other devices connected to the same WiFi. Say, your iPhone or iPad.

TL;DR

npx vite --host {local-ip-address}

If you're on macOS, you can simply run the following.

npx vite --host $(ipconfig getifaddr en0)

Overview

A fresh Vite project will likely have a dev key in your package.json's scripts property mapping that Yarn or NPM command to Vite, e.g., "dev": "vite" so you can type yarn dev or npm run dev and have Vite run your application in development mode.

yarn dev
#  VITE v4.2.1  ready in 165 ms
#
#  ➜  Local:   http://localhost:5173/
#  ➜  Network: use --host to expose
#  ➜  press h to show help

That's the same as running npx vite or ./node_modules/.bin/vite.

Figuring out your local IP address

Before we can deploy to our IP address, we need to know what it is.

You can use ipconfing on Windows and ifconfig on macOS.

Henry Black shared a trick to get your Mac's local IP address with ifconfig.

ipconfig getifaddr en0
# 192.168.1.34

Deploying to your local IP address

All you need to do is pass your IP address as Vite's --host argument.

npx vite --host $(ipconfig getifaddr en0)
#  VITE v4.2.1  ready in 166 ms
#
#  ➜  Local:   http://192.168.1.34:5173/
#  ➜  Network: http://192.168.1.34:5173/
#  ➜  press h to show help

Now I can access my Vite app from other devices in the same network, which comes in handy if you want to test your app on other computers, phones, or tablets.

Remember, npx vite is interchangeable with yarn dev, npm run dev, or ./node_modules/.bin/vite`.

For more information, read Vite's Server Options.

If you found this useful, let me know at @nonoesp!