Level 1
Change your host to 0.0.0.0 from localhost.
Jul 18, 2022
8
Level 1
Cannot get hot reload to work with Laravel Sail, Vite and Vue 3
After many hours, I have been unable to get hot reload working with Vite on Laravel Sail. The following is my vite.config.ts file:
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import inertia from './resources/scripts/vite/inertia-layout'
export default defineConfig({
plugins: [
inertia(),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
laravel(['resources/scripts/main.ts']),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
})
}
},
},
],
resolve: {
alias: {
'@': '/resources',
},
},
server: {
hmr: {
host: 'localhost',
},
},
build: {
chunkSizeWarningLimit: 1600,
},
})
I've also tried with:
# ...
server: {
host: 'localhost',
},
# ...
And in my docker-compose.yml:
# For more information: https://laravel.com/docs/sail
# Can change default name with https://stackoverflow.com/questions/66171148/laravel-sail-how-to-change-local-dev-domain
version: '3'
services:
laravel.test:
build:
context: ./docker/8.1
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.0/app
working_dir: /var/www/html
extra_hosts:
- 'host.docker.internal:host-gateway'
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
- "9865:22"
# ...
And finally my scripts in package.json:
"scripts": {
"build": "vite build",
"dev": "vite",
"heroku-postbuild": "npm run build"
},
After running sail npm run dev, I get:
vite v2.9.14 dev server running at:
> Local: http://localhost:5173/
> Network: http://172.20.0.3:5173/
ready in 838ms.
Laravel v9.19.0
> APP_URL: http://laravel.test
However, after navigating to http://localhost:8081 (I have set my APP_PORT=8081), the browser does not reload when there are changes. I am following the Laravel/Vite/Inertia format here and sail npm run build seems to build the project as expected with no errors.
The error can be reproduced by running the following:
Running sail with:
sail up -d
Then running npm dev with:
sail npm run dev
System Info
System:
OS: Linux 5.10 Ubuntu 21.10 21.10 (Impish Indri)
CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
Memory: 23.25 GB / 25.02 GB
Container: Yes
Shell: 5.1.8 - /bin/bash
Binaries:
Node: 16.16.0 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.13.2 - /usr/bin/npm
npmPackages:
@vitejs/plugin-vue: ^2.3.3 => 2.3.3
vite: ^2.9.12 => 2.9.14
Using Laravel sail on Windows 10 with WSL 2...
As the project files reside on the WSL filesystem, I shouldn't need polling. Neverthless, I also tried { usePolling: true } to no avail.
Level 1
Thanks for that but it still doesn't seem to be working. What I found is that when I navigate to: http://localhost:8081/, the following scripts are being used (using @vite('main') in my app.blade.php file):
<script type="module" src="http://localhost:8081/build/assets/main.f1e59771.js"></script>
<link rel="stylesheet" href="http://localhost:8081/build/assets/main.ea91bdfc.css" />
According to some sources, I tried change the public/hot file from http://0.0.0.0:5173 to http://localhost:5173 after running sail npm run dev though that didn't work either.
Level 18
set this in your vite.config.js
server: {
hmr: {
host: 'localhost',
},
}
And add in your docker-compose.yml:
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
You may need to build sail again
Level 1
@beneyraheem as shown above, that is what I've already set and it still doesn't work. I also tried rebuilding sail and that didn't fix the problem either...
Level 1
It seems to be an issue with the @vite directive in blade. I set the following and it seems to work as expected:
@if(App::environment('production'))
@vite('main')
@else
<script type="module" src="http://localhost:5173/resources/scripts/main.ts"></script>
@endif
Obviously it would be nice though if the @vite directive worked...
1 like
Level 1
Rather than using if statement in blade, I managed to fix it. I forgot to edit the Vite config in config/vite.php. I changed the following to make it work:
'entrypoints' => [
'resources/scripts/main.ts',
],
'ignore_patterns' => [
'/\.d$/',
'/\.json$/',
],
// ...
'dev_url' => env('DEV_SERVER_URL', 'http://localhost:5173'), // obviously could change this in .env file
Now in blade it can just use @vite (with no parameters)
Level 2
Which Laravel version you're running? I'm stuck with the same problem, but I don't have vite.php file in config folder?
1 like
Level 1
@kuntau I was using the innocenzi/laravel-vite package (which is now superseded by the official Vite integration). After upgrading, the only thing I needed to change to get this working is the following in vite.config.ts:
// ...
laravel({
input: 'resources/scripts/main.ts'
}),
// ...
server: {
hmr: {
host: 'localhost',
},
},
... and the following in app.blade.php (needs the path of the file):
@vite('resources/scripts/main.ts')
Please or to participate in this conversation.