Fixing Safari Mixed Content Issues in Laravel 13.x with Vite and mkcert

safari-mixed-content-vite-laravel-13.md

This is just an update for the article by Kevin Dees (@kevindees) https://kevdees.com/fixing-safari-mixed-content-issues-with-vite-and-mkcert

brew install mkcertmkcert -install

mkdir -p ~/.config/dev-certs
mkcert -key-file ~/.config/dev-certs/localhost-key.pem \
       -cert-file ~/.config/dev-certs/localhost-cert.pem \
       localhost 127.0.0.1 ::1

// vite.dev-https.config.js
import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

import laravel from 'laravel-vite-plugin';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        host: 'localhost',
        port: 5173,
        https: {
            key:  fs.readFileSync(path.resolve(process.env.HOME, '.config/dev-certs/localhost-key.pem')),
            cert: fs.readFileSync(path.resolve(process.env.HOME, '.config/dev-certs/localhost-cert.pem')),
        },
        hmr: {
            protocol: 'wss',
            host: 'localhost',
            port: 5173,
        },
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});

``

```json
// package.json
{
    ...
    "scripts": {
        ...
        "dev:https": "vite --config vite.dev-https.config.js",
        ...
    },
 }

// composer.json
{
    ...
    "scripts": {
        ...
        "dev:https": [
            "Composer\\Config::disableProcessTimeout",
            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --queue=default,thumbnails --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev:https\" --names=server,queue,logs,vite --kill-others"
        ],
        ...
    }
}