Level 102
Maybe we can help a bit better if you explain your set up? Valet? https://freek.dev/2276-making-vite-and-valet-play-nice-together
8 likes
Jul 23, 2022
12
Level 8
Laravel Vite HMR not working with custom domain
HMR is not working for the custom domain.
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
console errors:
19:23:57.038
GEThttps://example-app.test/login
[HTTP/1.1 200 OK 181ms]
19:23:57.216
GEThttp://127.0.0.1:5173/resources/css/app.css
[HTTP/1.1 304 Not Modified 83ms]
19:23:57.216
GEThttp://127.0.0.1:5173/@vite/client
[HTTP/1.1 304 Not Modified 17ms]
19:23:57.217
GEThttp://127.0.0.1:5173/resources/js/app.js
[HTTP/1.1 304 Not Modified 14ms]
19:23:57.240
GEThttp://127.0.0.1:5173/node_modules/.vite/deps/alpinejs.js?v=55ce4224
[HTTP/1.1 200 OK 0ms]
19:23:57.240
GEThttp://127.0.0.1:5173/resources/js/bootstrap.js
[HTTP/1.1 304 Not Modified 4ms]
19:23:57.242
GEThttp://127.0.0.1:5173/node_modules/vite/dist/client/env.mjs
[HTTP/1.1 304 Not Modified 2ms]
19:23:57.250
GEThttp://127.0.0.1:5173/node_modules/.vite/deps/lodash.js?v=55ce4224
[HTTP/1.1 200 OK 0ms]
19:23:57.251
GEThttp://127.0.0.1:5173/node_modules/.vite/deps/axios.js?v=55ce4224
[HTTP/1.1 200 OK 0ms]
19:23:57.252
GEThttp://127.0.0.1:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=55ce4224
[HTTP/1.1 200 OK 0ms]
19:23:57.301 [vite] connecting... client.ts:19:8
19:23:57.302
GETwss://127.0.0.1:5173/
19:23:57.307
GEThttps://example-app.test/favicon.ico
[HTTP/1.1 200 OK 0ms]
19:23:57.320 Firefox can’t establish a connection to the server at wss://127.0.0.1:5173/. client.ts:78:17
19:23:57.623
GETwss://127.0.0.1:5173/
19:23:57.625 Firefox can’t establish a connection to the server at wss://127.0.0.1:5173/. client.ts:78:17
19:23:57.625
[vite] failed to connect to websocket.
your current setup:
(browser) 127.0.0.1:5173/ <--[HTTP]--> 127.0.0.1:5173/ (server)
(browser) 127.0.0.1:5173/ <--[WebSocket (failing)]--> 127.0.0.1:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr . client.ts:48:16
Level 8
Thanks @sinnbeck
I am using MAMP with apache as a server. The same config works if I change the host from https://example-app.test/login to http://example-app.test/login
1 like
Level 102
@abdulkhan so the same issue as with valet it sounds like :) check that post
Level 8
Level 102
@abdulkhan happy to help :)
1 like
Level 2
Oh my goodness... this is finally working for me too, thanks to the link @sinnbeck shared. I was trying that very config yesterday, setting my key and cert, and setting the hmr and server config shown in Freek Van der Herten's post. But it was not working. However, the dev command in package.json I had set to vite --https in the hopes that would help with the https connection.
I finally removed that and it is working. The browser console goes from [vite] connecting... to [vite] connected rather quickly. I do not have to set server.hmr, but I do have to set server.host as well as the key and cert on server.https. And even though I am using docker-compose, I have to run yarn dev from my Windows host machine. But that is probably okay because the build files work fine, as I hope they will on the remote site.
I should note that I added my self-signed certificate to the Windows certmgr, specifically the Trusted Root Certification Authorities, and in the docker container I added the cert to /usr/local/share/ca-certificates/ and ran update-certificates, so that may have helped too.
Level 1
@abdulkhan Thanks for rising this question/issue... 🤲🏽
Level 4
Late to the party, but the following solution worked for me ( I am using Laragon on Windows 10):
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import fs from 'fs';
const path = require('path')
const host = 'mydomain.test';
export default defineConfig({
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
},
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
host,
hmr: { host },
https: {
key: fs.readFileSync('E:/laragon/etc/ssl/laragon.key'),
cert: fs.readFileSync('E:/laragon/etc/ssl/laragon.crt'),
},
},
});
6 likes
Please or to participate in this conversation.