Using Vite in combination with Valet's secured sites

vite.config.js

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

let host = 'sendstack.test';
let homeDir = homedir();

let serverConfig = {};

if (homeDir) {
    serverConfig = {
        https: {
            key: fs.readFileSync(resolve(homeDir, `.config/valet/Certificates/${host}.key`)),
            cert: fs.readFileSync(resolve(homeDir, `.config/valet/Certificates/${host}.crt`)),
        },
        hmr: {
            host: 'sendstack.test',
        },
        host: 'sendstack.test',
    };
}

export default defineConfig({
    plugins: [laravel([
      'resources/js/app.js'
      ])],

    server: serverConfig,
});

To use APP_URL from .env-file as host to prevent setting up the host in multiple files you can use vites loadEnv-method

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

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
  let homeDir = homedir()
  let serverConfig = {}

  if (homeDir) {
    serverConfig = {
      https: {
        key: fs.readFileSync(
          resolve(homeDir, `.config/valet/Certificates/${host}.key`),
        ),
        cert: fs.readFileSync(
          resolve(homeDir, `.config/valet/Certificates/${host}.crt`),
        ),
      },
      hmr: {
        host
      },
      host
    }
  }

  return {
    plugins: [laravel(['resources/js/app.js'])],
    server: serverConfig
  }
});