Dev server ping fails with secured Valet site

• Laravel Vite Plugin Version: 0.2.3
• Laravel Version: 9.x-dev 4d46bda
• Node Version: 16.15.0
• NPM Version: 8.5.5
• Chrome Version: 102.0.5005.115
• Firefox Version: 101.0.1
• Laravel Valet Version: 3.1.7
• macOS Version: 12.3.1 (M1)

Description:

When serving a local development site, e.g. valet-vite.test, using Valet, after the site is secured with HTTPS using valet secure the connection to wss://valet-vite.test:3000 fails, and all the pings to https://valet-vite.test/__vite_ping 404.

The errors look like this (screenshot is Firefox, errors are the same in Chrome).

Steps To Reproduce:

• composer create-project laravel/laravel:9.x-dev valet-vite && cd valet-vite
• valet link valet-vite && valet secure
• add @vite('resources/js/app.js') to resources/views/welcome.blade.php
• set APP_URL to https://valet-vite.test
• npm install && npm run dev

[innocenzi]

Hey, so I just tried and at least the following server configuration is needed for https to work and the websocket to connect:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
    server: {
      https: true,
      hmr: {
        host: 'localhost',
      }
    }
});

The host is necessary because otherwise the websocket will try to connect using location.hostname.

@jessarcher I think the hmr host should always be set, and https should be auto-determined depending on APP_URL, like vite-plugin-laravel does.

I haven’t looked into why ws://browser-hostname works and wss://browser-hostname doesn’t, but setting the host to the dev server’s host works in both cases.

[eminos]

This is probably not Valet related. I have the same issue serving the local dev site with Lando (Docker).