Vite Not Working - needs server.hmr.hosts in vite.config.js

[cornernote]

Thanks for this awesome repo! This has saved me loads of time setting up, and is better than Sail because you don't need anything except docker on the host. This should be the documented docker process for Laravel.

Description

I was having some trouble where it would not load the vite.

Steps to Reproduce

First we start the server:

docker-compose run --rm --service-ports npm run dev

output:

  VITE v5.1.5  ready in 1886 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.18.0.4:5173/
  ➜  press h + enter to show help

  LARAVEL v10.47.0  plugin v1.0.2

  ➜  APP_URL: http://localhost

Visit http://localhost:5173/ and get a page:

This is the Vite development server that provides Hot Module Replacement for your Laravel application.

Ok, now let's load the app at http://localhost, the vite assets cannot load:

http://0.0.0.0:5173/@vite/client
http://0.0.0.0:5173/resources/js/app.js
http://0.0.0.0:5173/resources/js/Pages/Welcome.vue

Solution

We need to add server.hmr.host=localhost, as per the Laravel 10 Vite Docs: https://laravel.com/docs/10.x/vite#configuring-hmr-in-sail-on-wsl2

vite.config.js

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,
                },
            },
        }),
    ],
    // add server.hmr.host
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
});

[cornernote]

see PR #219

[benjaminzwahlen]

Spot on, thank you this PR works for me.