Hot Reloading Fails

1. Terminate processes running in the background related to Vite and Node.js:

pkill -f vite
pkill -f node

2. Clear Laravel and Vite caches:

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear
rm -rf node_modules package-lock.json
rm -rf bootstrap/cache/*
npm install

Then start your Vite dev server:

npm run dev

3. Force refresh in the browser:

Cmd/Ctrl + Shift + R

First, thank you for your reply.

I have tried those steps already without success.

I’ve done additional tests and it seems to be tied to the local SSH certificate that I created with this command…

herd secure

When I deleted my original project, it does not delete the secure certificate that it created for that project.

I figured out where it stores those files and manually deleted them and hot reloading worked again using http:// instead of https://.

But as soon as I tried to secure it again with herd secure, it broke hot reloading.

First, do you really need a secure site in dev environement?

If it was working without the serverentry prior to the problem, then you technically don't need it.

To check what's going on, run the command:

herd secured

You should see something like this:

+----------------------------+----------------------------+
| Site                       | Valid Until                |
+----------------------------+----------------------------+
| expose.dev.test            | 2024-08-10 12:07:38 GMT    |
| herd-templates.test        | 2024-09-05 25:12:77 GMT    |
| reverb-110.test            | 2024-09-11 13:44:56 GMT    |
| tinkerwell.app.test        | 2024-10-16 19:53:32 GMT    |
+----------------------------+----------------------------+

What you can try to do is unsecure the site that gives you problems:

herd unsecure example-site 

Double check herd securedto be sure the site is no longer there, then herd secure example-site and finally:

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear

You know Remim, I was asking myself the same question. I was following an instructional video and that’s what they did, so I just followed along.

I’m deep enough into this now that I want to know more about it. I’m going to try what you suggested and see what happens.

For what it’s worth, here’s what ChatGPT thinks about using ‘herd secure’ for my local development environment…

——

Using Herd Secure in your local development environment depends on your needs. Here are some considerations:

Reasons to Use Herd Secure:

1. Testing HTTPS Locally – If your project interacts with services that require HTTPS (e.g., OAuth, Stripe, API integrations), Herd Secure makes it easy to test without self-signed certificate hassles.

2. Matching Production Environment – If your production site runs on HTTPS, testing locally under the same conditions can help catch mixed-content issues and other SSL-related problems.

3. Service Worker & PWA Development – Some browser features (like service workers or PWA installations) require HTTPS, even in development.

4. Secure Cookie Handling – If you’re working with Secure or SameSite cookie settings, you may need HTTPS to test their behavior properly.

Reasons Not to Use It:

1. Unnecessary Overhead – If your project doesn’t require HTTPS-related testing, enabling it won’t provide much benefit.

2. Local-Only Development – If your app doesn’t interact with external services that enforce HTTPS, you likely don’t need it.

If any of your projects involve API authentication, payments, or PWA features, it’s worth enabling. Otherwise, it’s not essential.

——

In my case, I have no reason to use ‘herd secure’ so I’m just going to leave that out of my procedure when creating a new project, but I thought I would post that info in case someone else finds it helpful.

I found that the hot reloading didn't work on my livewire sites until I asked Herd to use the latest version of PHP.