I have an issue working with Laravel 10 and Vite on remote server. I use VS Code and SFTP Extension to sync my project between local and remote server. It works great. My Vite DEV server is also running on remote machine. I edit blade templates from my VS Code, and it successfully transfered via SFTP protocol to remote server. Vite DEV server uses HMR to watch this changes. But, when autoreload occured, sometimes, I see a blank page on my screen instead of rendered template.
My vite config:
import { build, defineConfig, splitVendorChunkPlugin } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";
export default defineConfig({
server: {
hmr: {
host: 'MY_IP',
}
},
build: {
sourcemap: 'hidden',
emptyOutDir: true,
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.').at(1);
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = 'images';
} else if (/woff|woff2|otf|eot|ttf/.test(extType)) {
extType = "fonts";
}
return `assets/${extType}/[name]-[hash][extname]`;
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
},
},
},
plugins: [
splitVendorChunkPlugin(),
inject({
$: 'jquery',
jQuery: 'jquery',
}),
laravel({
input: ['resources/scss/styles.scss', 'resources/js/app.js'],
refresh: true,
}),
]
});
Vite DEV server is launched with command vite --debug --host.
Logs from DEV server on blade template saving:
11:09:20 AM [vite] page reload resources/views/trader_add/index.blade.php (x6)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +91ms
11:09:20 AM [vite] page reload resources/views/trader_add/index.blade.php (x7)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms
vite:cache [304] /@vite/client +10s
vite:time 0.63ms /@vite/client +10s
vite:cache [304] /resources/scss/styles.scss?direct +22ms
vite:time 0.42ms /resources/scss/styles.scss +22ms
vite:cache [304] /resources/js/app.js +1ms
vite:time 0.27ms /resources/js/app.js +1ms
vite:time 0.21ms /resources/images/logo.png +2ms
vite:time 0.14ms /resources/images/notification.svg +0ms
vite:time 0.15ms /resources/images/notifications_ok.svg +1ms
vite:cache [304] /node_modules/vite/dist/client/env.mjs +5ms
vite:time 0.23ms /node_modules/vite/dist/client/env.mjs +3ms
vite:time 0.21ms /resources/images/notifications_info.svg +16ms
vite:time 0.15ms /resources/images/notifications_error.svg +3ms
vite:time 0.24ms /resources/images/burger.svg +4ms
vite:time 0.16ms /resources/images/icon-nav_buy.svg +0ms
vite:time 0.17ms /resources/images/icon-nav_export.svg +2ms
vite:time 0.27ms /resources/images/icon-nav_stats.svg +15ms
vite:time 0.14ms /resources/images/icon-nav_api.svg +2ms
vite:time 0.19ms /resources/images/stats_green.svg +3ms
vite:time 0.19ms /resources/images/stats_red.svg +5ms
vite:time 0.22ms /resources/images/stats_blue.svg +2ms
vite:time 0.17ms /resources/images/stats_yellow.svg +1ms
vite:time 0.18ms /resources/images/arrow_black.svg +11ms
vite:time 0.16ms /resources/images/ok.svg +4ms
vite:time 0.15ms /resources/images/del.svg +2ms
vite:time 0.17ms /resources/images/file-csv.svg +5ms
vite:time 0.28ms /resources/images/filter.svg +6ms
vite:time 0.16ms /resources/images/arrow.svg +1ms
vite:cache [304] /resources/js/scripts.js +133ms
vite:time 0.58ms /resources/js/scripts.js +50ms
vite:time 0.27ms /resources/images/icon-nav_buy-active.svg +58ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +7s
11:09:28 AM [vite] page reload resources/views/trader_add/index.blade.php (x8)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +55ms
11:09:28 AM [vite] page reload resources/views/trader_add/index.blade.php (x9)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +0ms
vite:cache [304] /@vite/client +9s
vite:time 0.47ms /@vite/client +9s
vite:cache [304] /resources/scss/styles.scss?direct +1ms
vite:time 0.38ms /resources/scss/styles.scss +1ms
vite:time 0.19ms /resources/images/logo.png +1ms
vite:time 0.15ms /resources/images/notification.svg +1ms
vite:time 0.20ms /resources/images/notifications_ok.svg +0ms
vite:cache [304] /resources/js/app.js +22ms
vite:time 0.59ms /resources/js/app.js +21ms
vite:time 0.30ms /resources/images/notifications_info.svg +13ms
vite:time 0.15ms /resources/images/notifications_error.svg +1ms
vite:time 0.14ms /resources/images/burger.svg +1ms
vite:time 0.15ms /resources/images/icon-nav_buy.svg +0ms
vite:cache [304] /node_modules/vite/dist/client/env.mjs +24ms
vite:time 0.42ms /node_modules/vite/dist/client/env.mjs +8ms
vite:time 0.48ms /resources/images/filter.svg +25ms
vite:time 0.16ms /resources/images/stats_yellow.svg +1ms
vite:time 0.21ms /resources/images/arrow.svg +4ms
vite:time 0.21ms /resources/images/stats_blue.svg +3ms
vite:time 0.22ms /resources/images/icon-nav_stats.svg +0ms
vite:time 0.21ms /resources/images/stats_green.svg +1ms
vite:time 0.34ms /resources/images/icon-nav_api.svg +16ms
vite:time 0.25ms /resources/images/file-csv.svg +1ms
vite:time 0.21ms /resources/images/stats_red.svg +2ms
vite:time 0.41ms /resources/images/icon-nav_export.svg +7ms
vite:time 0.17ms /resources/images/arrow_black.svg +0ms
vite:time 0.14ms /resources/images/ok.svg +2ms
vite:time 0.24ms /resources/images/del.svg +16ms
vite:cache [304] /resources/js/scripts.js +133ms
vite:time 0.48ms /resources/js/scripts.js +55ms
vite:time 0.23ms /resources/images/icon-nav_buy-active.svg +72ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +11s
11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x10)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +1ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +265ms
11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x11)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms
vite:hmr [file change] resources/views/trader_add/index.blade.php +88ms
11:09:39 AM [vite] page reload resources/views/trader_add/index.blade.php (x12)
vite:hmr [no modules matched] resources/views/trader_add/index.blade.php +2ms
As you can see, at the and of log, my edited page is reloading multiple times by Vite DEV server. I think that it is the main reason for problem. How can I fix it? Thanks!
Because the vite assets are not loaded because the website script and css links to localhost instead of an accessible host on the network. I had the same issue and was able to resolve it with the instructions here, answer by Neo: https://stackoverflow.com/a/76666874/22132679