Laravel Vite Assets Fail on Custom Domain? Set server.host

When running npm run dev with the default Laravel Vite config, @vite points asset paths to http://localhost. If your dev environment uses a custom domain, assets will fail to load.

Setting server.host

Add server.host and server.hmr.host to vite.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const host = 'xxx.test';

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

Using HTTPS with Valet

If you use Valet and need HTTPS, run valet secure in the project directory first, then use the valetTls option:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

const host = 'xxx.test';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            valetTls: host,
        }),
    ],
});