How to expose 'host' for external device display?

[saurabhsri108]

Previously, when you run "npm run dev" it showed something like:

Local: http://localhost:3000/
Network: http://192...__:3000/

Now, there is no Network address but:

Network: use --host to expose

How do you get it to work? And why remove such a feature?

[patak-dev]

The default host now listens to 127.0.0.1 so you only get localhost exposure. It was changed because it is a security concern to expose your file system to external addresses by default.
To get the same behaviour as in v2.2, you can use:

vite --host

Or set server.host to true in your config.
https://vitejs.dev/config/#server-host

[tusqasi]

Wasted whole day banging my head against a wall while trying to figure out what's wrong with my nginx reverse proxy configuration. Being new to vite and coming from webpack this behavior is not intuitive and not well documented and should be addressed in getting started guide.

Yes I also banged my head for days before finding this out.

This should be in the documentation, or the cli logs when it shows ➜ Network: use --host to expose

BTW
npm run dev --host doesn't work.

npm run dev -- --host works.

Is it obvious to put the -- and I haven't done enough js stuff yet or it is not documented?

[Mtillmann]

This should be in the documentation, or the cli logs when it shows ➜ Network: use --host to expose

The message is correct if you use a vite binary directly. Usually it you run it through the npm binary which eats the --host option. I also think the message should be more clear

[SilasRodrigues19]

Thanks @tusqasi, it worked here using Astro

[Sigmakib2]

This worked for me! I am using a Linux laptop as my preview device. So Vite host is helping me a lot with this.

[andrewnash-icondirect]

I made this change.

"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "host": "vite --host" },

Now, npm run host works for me!

[Mtillmann]

I'd like to add here that you can use:

npm run dev -- --host

to run it on a one-off occasion without having to modify your config or command definition in package.json

[Velkan33]

Perfect

[BakerLees]

Thnaks, but why we need to write it like this "npm run dev -- --host " instead of "npm run dev --host"?

npm run dev --host would pass the --host option to the npm command. -- terminates the npm command and passes the --host option to the vite command that's called by the npm script definition

It helps me a lot, thank you so much.

[Kayeddy]

An easier way, by using npx instead of npm would be: npx vite --host

[GillyRabutTsurwa]

This works great. Thank you.

[noszczykmichal]

Seems that the only way to make it work now is to use npx vite --host. The old one npm run dev -- --host doesn't work any longer.

[m0dch3n]

I'm running multiple vite servers on 1 machine, where I want to bind vite to different local IPs, but always on the same port.

Do avoid external access, I'm using 127.0.0.2...127.0.0.x

Please have look on the Stackblitz example with 127.0.0.2

And also have look on the Stackblitz example with 127.0.0.1

By setting it 127.0.0.2, Vite binds automatically to all the network devices, so I'm unable to bind it only locally... With 127.0.0.1 it binds correctly

EDIT: It's correctly binding, but it's printing like if the server is bound to every network adapter...

[edwinencomienda]

Hi i want to ask can i access this in a different device?

when i tried to do npm run dev --host i can access the app in different device but it can't load correctly

[yhoungdev]

use yarn dev --host

and this will expose your IP for other displays.
but note this will only expose when you are on a network

[ferares]

use yarn dev --host

and this will expose your IP for other displays. but note this will only expose when you are on a network

Yeah, like I said, doing that produces asset links that reference localhost still (http://[::]:5173/resources/) so they don't work on external devices on the same network

[cristian-araujo]

use yarn dev --host
and this will expose your IP for other displays. but note this will only expose when you are on a network

Yeah, like I said, doing that produces asset links that reference localhost still (http://[::]:5173/resources/) so they don't work on external devices on the same network

did you get a solution for it? I have my nginx website running into a virtual machine with virtualbox and the links are generated like that, so I need to vite get expose to external devices with 0.0.0.0 and change it's url assets to my custom local domain ex: http://domain.local

[ferares]

use yarn dev --host
and this will expose your IP for other displays. but note this will only expose when you are on a network

Yeah, like I said, doing that produces asset links that reference localhost still (http://[::]:5173/resources/) so they don't work on external devices on the same network

did you get a solution for it? I have my nginx website running into a virtual machine with virtualbox and the links are generated like that, so I need to vite get expose to external devices with 0.0.0.0 and change it's url assets to my custom local domain ex: http://domain.local

I have not found a dynamic solution to this. The only thing that works for me is providing the local IP of my computer to the command: vite --host 192.168.0.100

[BenedictLang]

Giving my local address and using a hotspot for my mobil devices to go in was doing it for me

[ErickGiffoni]

Previously, when you run "npm run dev" it showed something like:

Local: http://localhost:3000/
Network: http://192.**.**.__:3000/

Now, there is no Network address but:

Network: use --host to expose

How do you get it to work? And why remove such a feature?

Is there any way I can "replicate" the session for a host ?

I want whoever that externally access the server to have the same "view", the same session as the localhost

[Mtillmann]

I guess it'd be easier to simply screen share at that point

[rustyxlol]

Heya, late to this but perhaps what you're looking for is tunnels. Ngrok and CloudFlare tunnels will help you achieve that. Had no idea about this until I saw Fireship's Video

[edwinencomienda]

cool

…

On Mon, Nov 28, 2022 at 8:15 AM VelkanAlpha ***@***.***> wrote: *Perfect* — Reply to this email directly, view it on GitHub <#3396 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGK5N5GCCRUDGRSJFXS5FEDWKP2QVANCNFSM44Z4BU6Q> . You are receiving this because you commented.Message ID: ***@***.***>

[Noibisjunior]

Wow,thanks MtillMann for your valid answer.I just solved firebase-auth-unauthorized-domain-domain-is-not-authorized error message on the developer console

[Noibisjunior]

npm run dev -- --host solved my problem. Thanks everyone

[stefann01]

I Have issues when running with --host because it sais "not secure" and some browser features are turned off. I need to access it from my mobile. Does anyone know how to solve that?

[Mtillmann]

Try ngrok, that should be the easiest way

[Jessuhh]

I'm late to the party but on a chromium based browser you can go to chrome://flags/#unsafely-treat-insecure-origin-as-secure and add the address and port there. Restart your browser and it will treat it as secure

[surajsharma]

getting ERR_CONNECTION_TIMED_OUT

[DzunN86]

I got error something like this when it accessed in mobile while in the same network
Warning: An error event has already been emitted on the socket. Please use the destroy method on the socket while handling a 'clientError' event.

[jcamiloguz]

Hi! In your mobile verify if you are using http:// not https://

[kumarvivek06071999]

It seems like the behavior of the "npm run dev" command has changed. To expose the network address, you now need to use the "--host" flag. For example, you can run "npm run dev -- --host 0.0.0.0" to expose the network address. The change might have been made for security reasons or to streamline the development process. You can refer to the project's documentation or release notes for more details on why this feature was modified.

[WadieBenabdouh]

Thank you guys for this thread, it's very helpful

[Avaray]

I struggled with this issue today. I wanted to connect from my phone, but it didn't work. I checked the Vite configuration and the firewall configuration in the system. Then I checked on my girlfriend's computer and her phone, and it worked there. It turned out that I accidentally turned off Wi-Fi on my phone, haha.

I think the information to check your connection might be useful for someone too. Leave like ❤️ if you experienced same thing 😅

[Himanshu-Singh-Chauhan]

I did add --host, and exposed the port in windows firewall settings, and even restarted windows, but still not able to access it. It says - this site can't be reached.

I get this in vite output and none works
➜ Local: http://localhost:5173/
➜ Network: http://169.254.10.204:5173/
➜ Network: http://192.168.150.100:5173/
➜ Network: http://192.168.137.1:5173/

Any suggestions.

[kumarvivek06071999]

-- host

[TaggartMaher]

did you ever figure this out? I have same issue.
I have added firewall rules inbound 5173. I tried on other computers and it works, just not mine.

I can't forward any port to LAN. I disabled firewall. I tried hostname and ipv4. Vite says
VITE v5.1.3 ready in 190 ms

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

but does not connect on network address.

[LEstradioto]

Windows must bridge the access to use WSL2 and enable host

To bridge and expose IP to LAN:
CMD as admin and netsh interface portproxy add v4tov4 listenaddress=192.168.1.108 listenport=5173 connectaddress=172.22.56.208 connectport=5173

listenaddress is the Windows LAN IP gotten from ipconfig
connectaddress is the Vite/WSL2 LAN IP

this answer was helpful https://superuser.com/a/1609881

[moehaje]

Could also easily insert:

server: { host: '0.0.0.0', },

to your vite.config.js and you 'll have always both options "Local" and "Network" automatically each time you run dev!

[RoachLin]

It works for me to additionally close the Windows Defender.

[ritikkr]

The best way to config your vite.config.js

export default defineConfig({
 // ... other code
  server: {
    host: true
  },
 
})

[ismaeleamsi83]

Thank you

[kupuma-ru21]

I use Remix
In my case this works

remix vite:dev --host 0.0.0.0

[Amel294]

---

I was having trouble accessing my Vite server from my mobile device, even though both my PC and mobile were connected to the same Wi-Fi network. The server was running on port 5173, but I couldn’t connect to it from my phone. I tried a few things like:

• Adding port 5173 to the firewall’s allowed list
• Disabling the firewall
• Checking for other network restrictions

The Issue with the Initial Script

Initially, my package.json had the following script:

"scripts": {
  "dev": "vite --host 0.0.0.0"
}

This was supposed to make the server accessible on the network, but it didn't work for me. Despite this, the server would only be accessible locally on my PC, and I couldn't access it from my mobile device.

The Solution

After trying various methods, I decided to modify the script and change the port. I updated it to:

"scripts": {
  "dev": "vite --port 3000 --host 0.0.0.0"
}

Result

After running npm run dev, I was able to access the Vite server from my mobile device at:

http://<local-ip>:3000/

It seems the original port 5173 was either blocked or restricted in some way. Changing both the port and the host to 0.0.0.0 worked and allowed access from any device on the same network!

---