I just create a new Laravel 9
project and I'm using lando
.
I have followed instructions from this : https://sinnbeck.dev/posts/getting-vite-and-laravel-to-work-with-lando
Currently, the site is working, I can update php, css or js code.
But, there is no livereloading and I've got an error in my console about a missing sourcemapping for the css at http://localhost:3009/resources/css/app.css.map
There is a link to the project : https://github.com/CrunchyArtie/warene-next
There is my vite.config.js
file:
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
https: false,
host: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
},
});
and my .lando.yml
file :
name: warene
recipe: laravel
config:
webroot: ./public
php: '8.1'
xdebug: true
services:
node:
type: node:16
scanner: false
ports:
- 3009:3009
build:
- npm install
tooling:
dev:
service: node
cmd: npm run dev
build:
service: node
cmd: npm run build
EDIT :
With this vite.config.js
the livereloading works :
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
https: false,
host: true,
strictPort: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
watch: {
usePolling: true,
}
},
});
css.devSourcemap: true
a sourcemap file is generated and used.server.watch.usePolling: true
vite will detect file changed inside lando environment.This is my is my vite.config.js
file:
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
css: {
devSourcemap: true,
},
server: {
https: false,
host: true,
strictPort: true,
port: 3009,
hmr: {host: 'localhost', protocol: 'ws'},
watch: {
usePolling: true,
}
},
});