Default Laravel + Vite configuration throws WebSocket connection to failed:

Question

So Laravel decided to innovate once again and fix what was not broken, so Mix is gone and now default asset bundling goes with Vite.

I'm following the absolute default in their documentation to a bunch of front-end bugs and finally only several remained:

I use Laragon with SSL.

I haven't configured anything additional and my vite.config.js looks like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

When I run npm run dev and visit the Laragon domain I get the following in the console:

client.ts:78 WebSocket connection to 'wss://127.0.0.1:5173/' failed.
client.ts:48 [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 .

I guess I need to configure my actual domain somewhere? I tried doing that in a server object in the config, but it didn't help those errors.

PS: Now in my vue files I need to import including the .vue extension e.g. import Button from '@/Components/Button.vue' is there any way I can ommit the .vue like it was with Laravel Mix?

Pep

If you don't like vite, you can migrate to mix. github.com/laravel/vite-plugin/blob/main/… – Malayan

Already tried, unfortunatelly after you install Breeze, Vue, Inertia, there's too much tangling going on and reverting back to Mix is not as simple as in a vanilla Laravel app so this documentation seems kind of useless in that case. However, if Laravel is going to go forward with Vite (and probably switch to something else in next version) we'd have to get it up and running instead of reverting to mix. – Pep

github.com/vitejs/vite/pull/1926#issuecomment-774814283 – Malayan

@MartinAmu trying to do anything with the server config on vite breaks the app with console message net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH – Pep

laracasts.com/discuss/channels/vue/… – Malayan

did you manage to solve this? – Clite

Same issue, did you solve it? – Aficionado

@Pep Really, dump vite. It has tons of problems. It's just a new boat Laravel jumps on too early, don't care about it, give it a try in a year or so. Spend your time on mix, which has been running quite stable for the past 4 years. Mix 6 has most features vite offers too, vite is faster in building, but that's about it. I've spend literally 2 days getting vite to work on my setup (which isn't common but shouldn't be a problem) and vite's entire NAT just doesn't work, it just doesn't. – Coulombe

Answer 1

I don't know if it's still relevant, but looking in the source code of laravel-vite-plugin I found a way to solve this problem in a very simple way, without even changing the vite.config.js file.

Put these two variables in the .env file and set them with full path to .key and .crt files on your system:

VITE_DEV_SERVER_KEY='C:/laragon/etc/ssl/laragon.key'
VITE_DEV_SERVER_CERT='C:/laragon/etc/ssl/laragon.crt'

Do not change anything on vite.config.js file. Here is my (fresh install of laravel + jetstream w/ inertia and --ssr):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

And that's it. Run npm run dev and Vite will "magically" start a development server with https on.

 VITE v4.0.4  ready in 1248 ms

  ➜  Local:   https://laravel.test:5173/
  ➜  Network: https://192.168.1.2:5173/
  ➜  press h to show help

  LARAVEL v9.48.0  plugin v0.7.3

  ➜  APP_URL: https://laravel.test/

Even though the configuration present in the official documentation also works, this way is much simpler, and the host, key and cert variables are not defined in the file, but they are dynamic reflecting the dev environment.

Hope this helps someone.

Here is the source where I found this, and you can also inspect in node_modules\laravel-vite-plugin\dist\index.js of your project.

Volcano

Great stuff Aaron. Much appreciated!! – Amnesia

This should be in the docs. – Papaverine

Answer 2

I haven't use laragon before, but if you have a custom domain, eg, like http://cutom-domain.test, you need to tell vite to use the certificate like so;

• In your vite.config.js, add a server key with the following configuration

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

import fs from 'fs';
import { homedir } from 'os';
import { resolve } from 'path';

// Ignore the protocol on the host, ie do not put "http"
const host = 'cutom-domain.test';

const viteServerConfig = host => {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)

    if (!fs.existsSync(keyPath)) {
        return {}
    }

    if (!fs.existsSync(certificatePath)) {
        return {}
    }

    return {
        hmr: {host},
        host,
        https: { 
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    }
}

export default defineConfig({
    server: viteServerConfig(host),
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Credit to this blogpost that explains more - Making Vite and Valet play nice together

Pesce

You, sir, are a genius. It works! Been at it all day, thank you! – Publus

haha, thanks @Publus but am not a genius – Pesce