@MattiaFontana I found a solution to this:

  npm:
    image: node:current-alpine
    ports:
      - "5175:5175"
    environment:
      - VITE_DEV_SERVER_URL=http://localhost:5175
    volumes:
      - ./src:/var/www/html
    user: "node"
    working_dir: /var/www/html
    networks:
      - laravel
    entrypoint: sh
    command:
      - -c
      - "npm run dev -- --host --port 5175 & PID=$$! && sleep 3 && echo 'http://localhost:5175' > /var/www/html/public/hot && wait $$PID"

It's a bit of a hack because it's re-writing the hot file! At least Vite works now.

I'm using 5175 because I have Laravel Herd running other ports for npm.

We're a couple of years later and now in Vite era.

Despite adding port 5173 under php and adding a hmr server in vite.config, for the life of me, I cannot access localhost:5173 after npm run dev

Any hints?

It's nice to have a command to do this. Handy :) An alternative method I've found and use quite often is to use the booted method on the Model. So when the model is deleted it will delete any associated files. If we are deleting Puppies using Eloquent the clean up will happen for each one.

Alter the image path depending on what you stored in the DB... my version is:

protected static function booted(): void
{
    static::deleting(function ($puppy) {
        $path = str_replace('/storage/', '', $puppy->image_url);
        Storage::disk('public')->delete($path);
    });
}