DDEV Vite Laravel HMR Issues

### 1. **Check Your Vite Configuration (`vite.config.js`)**
Make sure your `vite.config.js` is correctly configured to work with DDEV.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true,
        },
    },
});

– **`host: '0.0.0.0'`** allows Vite to bind to all network interfaces.
– **`hmr: { host: 'localhost' }`** ensures HMR connects properly within DDEV.
– **`usePolling: true`** helps when file changes are not detected properly.

—

### 2. **Set Environment Variables**
In your `.env` file, ensure the correct asset URL is set:

VITE_HMR_HOST=localhost
VITE_HMR_PORT=5173

—

### 3. **Expose Ports in DDEV (`.ddev/config.yaml`)**
Modify `.ddev/config.yaml` to expose Vite’s default port:

services:
  vite:
    container_name: ddev-vite
    image: node:21
    working_dir: /var/www/html
    volumes:
      - .:/var/www/html
    command: ["yarn", "dev"]
    ports:
      - "5173:5173"

Run:

ddev restart

—

### 4. **Restart Vite & DDEV**
Inside the DDEV container, restart Vite manually:

ddev ssh
yarn dev

Or, if using npm:

npm run dev

—

### 5. **Verify Network Connectivity**
From your local machine, check if the Vite server is accessible:

curl http://localhost:5173

If it doesn’t respond, check firewall settings and DDEV logs:

ddev logs -f

—

### 6. **Use `@vite` Blade Directive Correctly**
In `resources/views/layouts/app.blade.php`:

@vite(['resources/js/app.js'])

Ensure you're not loading old assets.

—

If it's still not working, let me know what errors you're seeing in the browser console or terminal.