Skip to content

Generate Valet-compatible TLS certs for Vite HTTPS auto-detection#31

Merged
munezaclovis merged 2 commits intomainfrom
vite-tls-certs
Mar 9, 2026
Merged

Generate Valet-compatible TLS certs for Vite HTTPS auto-detection#31
munezaclovis merged 2 commits intomainfrom
vite-tls-certs

Conversation

@munezaclovis
Copy link
Copy Markdown
Contributor

Summary

  • Fixes mixed content errors when using Vite dev server with pv's HTTPS sites
  • pv link now generates per-site TLS certificates signed by Caddy's local CA and places them at ~/.config/valet/Certificates/ where laravel-vite-plugin auto-detects them
  • npm run dev just works — zero configuration needed

How it works

laravel-vite-plugin has built-in detection for Valet/Herd TLS certificates. It checks ~/.config/valet/ for:

  • config.json with the TLD (e.g., {"tld": "test"})
  • Certificates/{hostname}.key and .crt

When found, Vite's dev server automatically serves HTTPS on the .test domain, and the hot file URL uses HTTPS — so @vite generates correct <script> tags with no mixed content.

pv now populates this structure:

  • pv link: generates cert + writes config.json
  • pv unlink: removes the site's cert files
  • pv setup: writes config.json when TLD is configured
  • pv uninstall: cleans up ~/.config/valet/

Test plan

  • Unit tests for cert generation (CA signing, SAN, key permissions)
  • Unit tests for Valet config management (config.json, cert cleanup)
  • All existing tests pass
  • Manual: pv link myapp → verify ~/.config/valet/Certificates/myapp.test.{crt,key} exist
  • Manual: cd myapp && npm run dev → verify Vite console shows "Using Valet certificate to secure Vite"
  • Manual: visit https://myapp.test → verify no mixed content errors, HMR works
  • Manual: pv unlink myapp → verify cert files removed

laravel-vite-plugin auto-detects TLS certificates at ~/.config/valet/
to configure the Vite dev server with HTTPS, eliminating mixed content
errors when the site is served over HTTPS.

pv now mimics this structure:
- pv link: generates a per-site TLS cert signed by Caddy's local CA
  and writes ~/.config/valet/config.json with the TLD
- pv unlink: removes the site's cert files
- pv setup: writes the Valet config.json when TLD is configured
- pv uninstall: cleans up ~/.config/valet/

This means `npm run dev` just works with zero configuration — the Vite
plugin detects the certs, serves HTTPS on the .test domain, and the hot
file URL uses HTTPS so @Vite generates correct script tags.
- Propagate UserHomeDir errors instead of silently producing relative paths
- Remove only certs for pv-linked projects during uninstall, not all of ~/.config/valet
- Merge with existing config.json to preserve real Valet settings
- Clean up orphaned cert file when key write fails
- Return errors from RemoveSiteTLS instead of silently swallowing them
- Move CA key path to config.CAKeyPath() to avoid duplication
- Wrap parse errors in parsePrivateKey for better diagnostics
- Short-circuit cert generation in link when config setup fails
@munezaclovis munezaclovis merged commit c22c10c into main Mar 9, 2026
1 check passed
@munezaclovis munezaclovis deleted the vite-tls-certs branch March 9, 2026 02:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant