Pozitiveman's avatar

Access Website on Network with Vite Laraver Vue

I'm trying to access website on local network, but probably missing some configurations.

I use XAMPP, Laravel 10.19, Vite 4.4, Vue 3.3 and when I try to expose it with

npm run dev -- --host

I get back

VITE v4.4.9  ready in 571 ms

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.13:5173/
➜  press h to show help

LARAVEL v10.19.0  plugin v0.8.0

➜  APP_URL: http://localhost

And I'm able to access website on my machine with: localhost, 192.168.1.13 and localhost:5173, 192.168.1.13:5173 gives me Laravel - Vite default page "This is the Vite development server that provides Hot Module Replacement......"

BUT when I try to access on my local network, I can only access localhost:5173, 192.168.1.13:5173 with default page , but no luck with localhost, 192.168.1.13.

My Vite config:

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost'
        },
    },
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
            reactivityTransform: true
        }),
    ],
});

ENV file

APP_DOMAIN=localhost
APP_URL=http://${APP_DOMAIN}
SANCTUM_STATEFUL_DOMAINS=${APP_DOMAIN}
0 likes
2 replies
Pozitiveman's avatar

Below what worked for me:

No need to add anything to vite.config, although you might.

add your IP to ENV

APP_DOMAIN=192.168.1.XX

Add host to artisan when serving, also I prefer port 80

php artisan serve --host 192.168.1.XX  --port 80

And start npm dev

npm run dev -- --host 192.168.1.13
FOliveira's avatar

check or declare which port the laravel application is running on, do not try to access via vite port

Please or to participate in this conversation.