Vite and virtual machine

[real fjord]

what can I do if my laravel project is in virtual box and my browser can't connect to vite network? the url generated by vite is <link rel="stylesheet" href="http://[::]:5173/resources/css/app.css" /> and it doesn't work

the video shows how the css is loaded after I change the hot file to 127.0.0.1.
If I use --host to set 127.0.0.1, vite changes the path generated but it doesn't work is very weird

[split sparrow]

Are you using Homestead?

There has been some on-off talk about Vite w/ Homestead in #homestead - you can use the search feature of Discord to see if any of the chats has been related to your issue

[real fjord]

no, i'm using Debian with nginx on the virtual machine

Linux server 4.19.0-22-amd64 #1 SMP Debian 4.19.260-1 (2022-09-29) x86_64

I uploaded the video again in mp4 so it's visible on discord without need to download

[real fjord]

i can't believe it so hard to make it works

[crisp saffron]

You have to make sure your VM has the correct ports open. Most likely the VM OS has blocked http traffic on 5173

[real fjord]

if the port were closed, when I changed the hot file to 127.0.0.1 it shouldn't work right? so I suppose it's opened.
I have the port forwarding in the virtualbox

it only work when I change the hot file manually and change [::] to 127.0.0.1

but if I set --host 127.0.0.1 it doesn't work anymore

in the last part of the video I show the wrong message, the correct one I want to show is

the main css being loaded when I change hot file to 127.0.0.1 manually but internal images on that css doesn't render properly

so change manually the hot file is not a solution

[real fjord]

is it a laravel problem or a vite problem?

[real fjord]

no one has the same problem with a virtual machine?

[chrome lagoon]

is your browser running on host or inside the virtual machine?

try visiting this IP

[real fjord]

i'm using host browser not virtual machine.
it doesn't work because i'm forwarding my localhost to virtualmachine so the url should be 127.0.0.1:5173 and the virtualmachine is forwading to 10.0.2.15:5173
but for some reason when I set 127.0.0.1 as host it doesn't work anymore.
it only work once when I change manually hot file from [::] to 127.0.0.1 how the video shows

it's my virtualmachine network adapters

I think it's not a problem with the virtual machine because how the video shows it works if I change manually the hot file, my host pc is accessing through the port forwarding

so the question is.

why vite is not accessible when I set the host as 127.0.0.1

vite --host 127.0.0.1

vite --host

[real fjord]

this is not accesible.

[real fjord]

this is not accesible

[real fjord]

this is accessible only if change the hot file http://[::]:5173 to http://127.0.0.1:5173

[chrome lagoon]

It is because vite uses a different port for HMR.

Here is more info about it
https://github.com/vitejs/vite/issues/4116#issuecomment-1140086315

But when I ran into a similar problem with vite/docker, the simplest solution was to visit the vite server Local IP (10.0.0.x:xxxx) instead of localhost.

[real fjord]

//vite.config.js
server: {
  host: true,
},

hot file

http://[::]:5173

the problem is how vite is generating this url http://[::]:5173

my host browser doesn't recognize [::] host

it's going me crazy

i can't upgrade my applications to laravel 9 with this problem