Vite with Laravel Valet

To run a Laravel 11 application with Vite on a local Laravel Valet server you need an update to your vite.conf.js to load the site properly under your domain.test . Especially if you want to run your site post valet secure site . You need to add the following to your Vite configuration file

server: {
        host: 'site.test',
        port: 5173,
        https: {
            key: fs.readFileSync(path.resolve(process.env.HOME, '.config/Valet/Certificates/site.test.key')),
            cert: fs.readFileSync(path.resolve(process.env.HOME, '.config/Valet/Certificates/site.test.crt')),
        },
    },

You need to of course replace the name site by the Valet name you gave your site. You will also need to import two packages: path and fn

import path from 'path';
import fs from 'fs';

So in the end you will have a vite.conf.js like this or at least similar too it, especially when you use Vue as well

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: 'site.test',
        port: 5173,
        https: {
            key: fs.readFileSync(path.resolve(process.env.HOME, '.config/Valet/Certificates/site.test.key')),
            cert: fs.readFileSync(path.resolve(process.env.HOME, '.config/Valet/Certificates/site.test.crt')),
        },
    },
});
Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.