I am having the same issue. Does anyone know what to do about it?
Vite Hot Reload and Laravel Homestead
I have a fresh Laravel 9 installation with Vite.
I use Laravel Homestead as a development environment (on top of a Windows 10 OS).
However, I cannot manage to make them work together: once I run npm run dev, it always reloads the page every time I save my blade files. No hot reload, no state preserved. The page is refreshed as if I did ctrl + R.
I've tried different solutions on the web for similar cases, which involved updating vite.config.js, but none of them worked.
This is my Homestead.yaml
---
ip: "192.168.10.10"
memory: 2048
cpus: 2
provider: virtualbox
ssl: true
authorize: C:\Users\Luca\.ssh\id_rsa.pub
keys:
- C:\Users\Luca\.ssh\id_rsa
folders:
- map: C:\Users\Luca\www\playground
to: /home/vagrant/playground
sites:
- map: playground.test
to: /home/vagrant/playground/public
php: "8.1"
databases:
- playground
features:
- mysql: true
- mariadb: false
- postgresql: false
- ohmyzsh: false
- webdriver: true
then my hosts file
192.168.10.10 playground.test
and my vite.config.js
import { defineConfig } from "vite"
import laravel from "laravel-vite-plugin"
export default defineConfig({
server: {
hmr: {
host: "192.168.10.10",
},
host: "192.168.10.10",
watch: {
usePolling: true,
},
},
plugins: [laravel(["resources/css/app.css", "resources/js/app.js"])],
})
P.S.: I guess it is not related to it, but I use Blade & Tailwind. No Vue / React etc.
I think that's not something related to Homestead. If you hit save on a blade file, it should be compiled again to PHP and then rendered on the server to make the HTML document the browser displays.
These steps need to happen on the server, so a full page refresh is the best you can have.
In order to benefit from HMR you should use a JS framework live Vue or React, which can be directly updated on the browser since the rendering can happen client-side.
Please or to participate in this conversation.