Accessing development server from other device in same network

[hariangr]

I develop a mobile web from a Mac, I want to access the site using my Android device running in the same network

Usually I can access it normally when I host on 0.0.0.0 or using tunnel like ngrok back when I use normal Laravel

Now I want to try Inertiajs, it seems I need to access two running backend in development*, the Node server and the Laravel server. But when I access the Laravel address from my mobile phone, react-refresh throw this error

How do I let react-refresh know the IP Address of my development server?

[hariangr]

I forgot to mention, when the Node server not running and I already build using npm run build, I can access the site normally. I assume this because Laravel use the generated HTML instead of accessing through Node server (This is problematic of course since I need to do npm run dev for every change I want to see on mobile)

[moham96]

edit package.json dev script from:

"dev": "vite"

to

"dev": "vite --host 192.168.5.80"

replace "192.168.5.80" with the ip of your dev device

[am05mhz]

this solution works, but it limits the accessible address specifically to the ip, in which you can access it from other device with the ip, but you also need to access to the same ip even from local machine, and cannot use localhost as the address

setting it to 0.0.0.0 wont work, as it makes the browser try to load any resources from 0.0.0.0, not the machine's ip

the answer below by @Lexazan is better

[Lexazan]

You may also need to add the following to the vite.config.ts (.js):

export default defineConfig({
//...
    server: {
        host: '0.0.0.0',       // Accept connections from LAN
        port: 5173,           
        strictPort: true,
        hmr: {
            host: '192.168.0.123', // Your machine's local IP address
        }
    },
// ...
});