Usar Valet con Vite en Laravel

Una de las cosas que más me gustan del ecosistema Laravel + OSX es Valet, ya que hace muy sencillo manejar distintas versiones de PHP y ejecutar webs en subdominios en local.

Sin embargo, desde la inclusión de Vite en Laravel 9, la configuración para que esto funcione out-of-the-box no es tan sencilla cuando usas HTTPS en local.

Hay un buen artículo de Freek.dev en el que explica cómo hacer que ambos funcionen correctamente. Básicamente, hay que modificar el fichero vite.config.js de la siguiente manera:

import fs from 'fs';
import laravel from 'laravel-vite-plugin'
import { defineConfig, loadEnv } from 'vite'
import { homedir } from 'os'
import { resolve } from 'path'

export default defineConfig(({ command, mode }) => {
    // Load current .env-file
    const env = loadEnv(mode, process.cwd(), '')

    // Set the host based on APP_URL
    let host = new URL(env.APP_URL).host

    return {
        plugins: [
            laravel([
                'resources/css/app.css',
                'resources/js/app.js',
            ]),
        ],
        server: detectServerConfig(host),
    }
})

function detectServerConfig(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),
        },
    }
}

La clave de todo está en la función detectServerConfig. Lo que hace es comprobar si existe Valet en el sistema y si el subdominio configurado tiene HTTPS. Si es así, aplica la configuración de hmr, https y host. Si no es así, no aplica nada extra.

Este fichero es una de las plantillas que siempre aplico a mis proyectos para poder utilizar todo lo que aporta Valet de forma sencilla y rápida.