PSA: update `valetTls` to `detectTls` in your vite.config.js for Laravel Herd

Published December 12th, 2023

Laravel

I finished work on an app earlier this year that was built on Valet and with Vite, and with this being the app’s quiet period, time to add some new features.

I’ve been using Laravel Herd very happily since its release: if you don’t know, it is a handy macOS app that behaves like Laravel Valet, but comes with pre-compiled PHP versions – and doesn’t rely on the user fiddling with Homebrew.

And just to clarify: Herd is awesome and not suggesting it is at fault… it’s just part of the puzzle, and major change between development in the start of the year and now.

However, loading up the app in Firefox Developer Edition, my dev browser of choice, none of Vite’s assets could be loaded.

No worries, I remember this, self-signed certificates sometimes need to be manually allowed then it’s all good, right?

True… but that’s not the issue here.

When trying to access one of Vite’s URLs for the app, Firefox was not happy, and instead of the expected ERR_CERT_AUTHORITY_INVALID error (you know, where you can go to “Advanced” and still visit the site after a few more clicks), displayed a SEC_ERROR_BAD_SIGNATURE error.

The "SEC_ERROR_BAD_SIGNATURE" error given by Firefox

An example of the error displayed by Firefox. No, there is no security issue: this is just an example.

Opening in other browsers – Safari, Edge – works as expected, with all assets loading: it is just Firefox that definitely doesn’t like something.

I remember when I started using the Laravel Vite plugin, there were some steps to run through to get https working with Valet, eventually replaced by a valetTls config option.

It’s always great to read the docs.

Because when you do, you’ll learn that the Laravel docs for working with a secure development server have been updated and talk about using a different option, detectTls.

Changing the vite.config.js file from valetTls to detectTls gets the app running again in Firefox.

 1export default defineConfig({
 2    plugins: [
 3        laravel({
 4            // ...
 5            refresh: true,
 6 
 7            // valetTls: 'my-app.test'
 8            detectTls: 'my-app.test'
 9 
10            // ...
11        }),
12    ],
13});

Copied!

Looking through the PR to the Laravel Vite plugin, you can see that valetTls has been depreciated during the updates to support Laravel Herd, and replaced with the Valet/Herd-generic detectTls.

The PR even says that valetTls should continue to run: and it does for other browsers like Safari and Edge, but Firefox must be doing something special under the hood. Even following additional steps did not resolve the issue as of December 2023.

Changing config to only use detectTls pleased Firefox though – and Safari and Edge too, of course.

So if you’re going back to work on a recent (i.e. early 2023) project, and now use Herd, don’t forget to update your vite.config.js to use detectTls instead of valetTls – even if you don’t use Firefox, maybe one of your team does: either way, it’s always good to remove deprecated properties from your config.

PSA: update valetTls to detectTls in your vite.config.js for Laravel Herd

You may be interested in...

PSA: update `valetTls` to `detectTls` in your vite.config.js for Laravel Herd