Valet not working with Vite

[Headpetrol]

Hi guys,

Today I installed a fresh version of Laravel version 9.21.4. The new Laravel versions use Vite as a bundling package and I am having issues with auto-refreshing. It simply doesn't work despite that I have added this to my vite.config.js:

{ name: 'blade', handleHotUpdate({ file, server }) { if (file.endsWith('.blade.php')) { server.ws.send({ type: 'full-reload', path: '*', }); } }, }

My cmder console detects every change I made to my blade.php file, but the browser doesn't reload/refresh. If I refresh the browser manually I see the changes. The funny thing is that I found a youtube video that added the same code and it worked for them. Is this an issue with this package or is something else wrong in my setup.

[wyxos]

@Headpetrol Did you get a solution for this?

[Headpetrol]

@Headpetrol Did you get a solution for this?

No, I am still trying to get a solution. I have tried some other options with no solutions. If I solve it I will publish it here.

[wyxos]

@Headpetrol thank you, can you confirm what is your current setup? I've am trying to do the above right on Windows 11 + homestead. Been trying to run Vite inside homestead rather than on Windows, no success so far. Not sure if your approach/context is similar but hoping this will hint me what should be done. I asked on stackoverflow: https://stackoverflow.com/questions/73177553/setup-laravel-9-vite-on-windows-11

[Headpetrol]

After a long search and a lot of unsuccessful testing I finally found the solution. This is what works for me:

import fs from "fs";
import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";
import { homedir } from "os";
import { resolve } from "path";

let host = "your-project.test";

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true
        }),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*'
                    });
                }
            }
        }
    ],
    server: detectServerConfig(host)
});
function detectServerConfig(host) {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`);
    let certificatePath = resolve(
        homedir(),
        `.config/valet/Certificates/${host}.crt`
    );
    if (!fs.existsSync(keyPath)) {
        return {};
    }
    if (!fs.existsSync(certificatePath)) {
        return {};
    }
    return {
        port: 3000,
        hmr: { host, port: 3001, protocol: 'wss' },
        host,
        https: {
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath)
        }
    };
}