laravelbreezehomesteadhot-reload

Laravel Breeze (vue) and Homestead - npm run dev and HMR not working


I followed the instructions from the documentation:

  1. Homestead: https://laravel.com/docs/9.x/homestead#installation-and-setup
  2. Breeze with Vue and inertia: https://laravel.com/docs/9.x/starter-kits#breeze-and-inertia

When I run npm run build everything works fine. I can visit my new app over http://homestead.test/. When I try to use the dev server with hot reload npm run dev, the debug console in my browser (host) tells:

GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED

I already tried to change my package.json file to from "dev": "vite", to "dev": "vite --host homestead.test", but this only results in the errors

GET http://homestead.test:5173/@vite/client net::ERR_CONNECTION_REFUSED
GET http://homestead.test:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED

In app.blade.php the scripts are imported with @

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

@routes seems to be a part of the Laravel Ziggy package. No error from this side.

But the @vite('resources/js/app.js') and @inertiaHead are throwing errors. These directives link to a wrong destination.

How to solve this?


Solution

  • I've found the solution. Add the server part in your vite.config.js. And add the app.css to the inputs

    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import vue from '@vitejs/plugin-vue';
    
    export default defineConfig({
        server: {
            hmr: {
              host: "192.168.56.56",
            },
            host: "192.168.56.56",
            watch: {
              usePolling: true,
            },
        },
        plugins: [
            laravel({
                input: ['resources/js/app.js', 'resources/css/app.css'], 
                refresh: true,
            }),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },
                },
            }),
        ],
    });