Vite HMR Not Working

});
we have laravel interia react/ ddev set up hmr not working to look everychange I need to run yarn dev every time

### 1. **Update WebSocket HMR Configuration**
Your `vite.config.js` is already specifying `wss` for HMR, but try explicitly setting the port as well:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        origin: origin,
        cors: {
            origin: `https://${process.env.DDEV_HOSTNAME}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',
            host: process.env.DDEV_HOSTNAME,
            port: port,  // Explicitly set the HMR port
        },
    },
});

### 2. **Ensure `wss` (WebSockets Secure) Works**
Since you’re using HTTPS in DDEV, WebSockets need to use `wss`. Check if your browser console shows errors like **"WebSocket connection failed"**.

– If you see WebSocket connection issues, try **switching `wss` to `ws`** in your `vite.config.js`:

hmr: {
    protocol: 'ws',  // Change 'wss' to 'ws' for local dev
    host: process.env.DDEV_HOSTNAME,
    port: port,
},

### 3. **Check Logs in the Console**
Run the following command inside your DDEV project:

ddev logs -s web

See if there are any errors related to Vite HMR.

### 4. **Expose WebSocket Port in DDEV**
Make sure the port is open in `docker-compose.override.yaml`:

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

Then restart DDEV:

ddev restart

### 5. **Check If Vite Server is Running**
Inside the container, check if the Vite server is running:

ddev ssh
ps aux | grep vite

If it’s not running, you may need to start it manually:

yarn dev

### 6. **Clear Cache and Restart Everything**
If the issue persists, try clearing cache and restarting:

ddev poweroff
ddev start
yarn dev

This should get HMR working in your DDEV setup. Let me know what errors you’re seeing in the browser console or terminal logs if it’s still not working. 🚀

### How to Check `DDEV_PRIMARY_URL`
You can find out what it's set to by running:

ddev describe

You'll see an output like this:

Project Information
-------------------
NAME        myproject
PRIMARY URL https://myproject.ddev.site
...

In this case, `DDEV_PRIMARY_URL` would be:

https://myproject.ddev.site

### How It's Used
In your `vite.config.js`, you're using:

const origin = `${process.env.DDEV_PRIMARY_URL}:${port}`;

Since `DDEV_PRIMARY_URL` is already an HTTPS URL, adding `:5175` makes it:

https://myproject.ddev.site:5175

However, most browsers block `:5175` over HTTPS unless explicitly allowed, which might be causing your HMR issues.

### Alternative
Instead of `DDEV_PRIMARY_URL`, try using `DDEV_HOSTNAME`:

const origin = `https://${process.env.DDEV_HOSTNAME}`;

This way, your Vite server origin matches the WebSocket configuration.

Let me know if you need more help with this! 🚀

—

## 🔍 **Step 1: Check Browser Console for WebSocket Errors**
– Open your **browser's developer console** (`F12` → Console).
– Look for WebSocket connection errors (something like `"WebSocket connection to wss://… failed"`).
– If you see `"HMR connection lost"`, this means Vite's HMR isn't working properly.

—

## 🔥 **Step 2: Modify `vite.config.js`**
Modify your `vite.config.js` with the following settings:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost'; // Use DDEV hostname or fallback to localhost

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'ws', // Use ws instead of wss for local development
            host: hostname,
            port: port,
        },
    },
});

### **Why these changes?**
– **Use `ws` instead of `wss`**: Secure WebSockets (`wss`) can cause issues in local development.
– **Use `DDEV_HOSTNAME` instead of `DDEV_PRIMARY_URL`**: `DDEV_PRIMARY_URL` contains `https://`, which is unnecessary.
– **Ensure `host: "0.0.0.0"`**: Allows Vite to bind on all network interfaces.

—

## 🔄 **Step 3: Restart Everything**
Run the following commands:

ddev restart
ddev exec yarn dev

—

## 🔎 **Step 4: Verify WebSocket Connection**
Open your browser and go to **Developer Tools (`F12`)** → **Network** → **WS (WebSockets)**.

– If HMR is working, you should see a successful WebSocket connection.
– If it’s failing, let me know what error appears.

—

## 🛠 **Step 5: Check if the Vite Server is Running**
Inside the DDEV container, check if the Vite server is running:

ddev ssh
ps aux | grep vite

If Vite isn’t running, try starting it manually:

yarn dev

—

## 🔧 **Step 6: Expose the Vite Port in DDEV**
Modify `docker-compose.override.yaml` in your project (if it doesn’t exist, create it):

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

Then restart DDEV:

ddev restart

—

## 🚀 **Final Check**
1. Open **your DDEV site in the browser**.
2. Make a change to a React component.
3. See if it updates **without refreshing the page**.

—

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

### 🔥 **Fix HMR with HTTPS & WSS**
Let's go through the steps to ensure Vite's **HMR (Hot Module Replacement)** works correctly.

—

## ✅ **1. Update `vite.config.js`**
Modify your `vite.config.js` to explicitly configure HMR for **WSS** and ensure the correct origin:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        https: true,  // Enable HTTPS
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',  // Use WSS (WebSocket Secure)
            host: hostname,
            port: port,
        },
    },
});

### **Why these changes?**
– **`https: true`** → Ensures the Vite dev server runs with HTTPS.
– **`protocol: 'wss'`** → Uses **WebSocket Secure**, required for HTTPS.
– **`host: process.env.DDEV_HOSTNAME`** → Ensures the WebSocket host matches the HTTPS setup.

—

## ✅ **2. Trust DDEV’s SSL Certificate**
Since DDEV uses a **self-signed certificate**, your browser might block WebSocket connections. You need to **trust DDEV’s certificate** on your system:

### **On MacOS / Linux:**
Run:

mkcert -install

Then restart DDEV:

ddev restart

### **On Windows:**
1. Open **`https://your-ddev-site.ddev.site`** in Chrome.
2. Click **"Advanced" → "Proceed to site (unsafe)"**.
3. Open **Developer Tools (`F12`)** → **Console**.
4. Run this command:

window.location.reload(true);

5. Now, WebSockets should work.

—

## ✅ **3. Expose Vite’s Port in DDEV**
Ensure DDEV allows WebSocket connections by modifying `docker-compose.override.yaml`:

1. Open `docker-compose.override.yaml` (or create it in the project root).
2. Add the following:

version: '3.6'
   services:
     web:
       ports:
         - "5175:5175"

3. Restart DDEV:

ddev restart

—

## ✅ **4. Restart Everything**
Run these commands to restart Vite and ensure changes take effect:

ddev restart
ddev exec yarn dev

—

## ✅ **5. Verify WebSocket Connection**
1. **Open Chrome Developer Tools (`F12`)**.
2. **Go to "Network" → "WS" (WebSockets)**.
3. Check if WebSocket (`wss://your-ddev-site.ddev.site:5175`) is **connected**.
4. If it’s failing, **check the error message** and let me know.

—

## 🚀 **Final Check**
Now:
1. Open your **DDEV site** (`https://your-ddev-site.ddev.site`).
2. Edit a React component (e.g., `resources/js/components/Test.jsx`).
3. Save it.
4. If HMR is working correctly, the page should update **without a full refresh**.

—

### **If it’s still not working, let me know what error appears in the browser console! 🚀**

—

## **🛠 1. Check if Vite’s HMR Server is Running**
Inside your DDEV container, run:

ddev ssh
ps aux | grep vite

If you don’t see a process running Vite, manually start it inside the container:

yarn dev

Now, try changing a React file to see if HMR works.

—

## **🛠 2. Verify WebSocket Connection in Browser DevTools**
1. Open your **DDEV site** in the browser.
2. Open **DevTools (`F12`)** → **Network** tab.
3. Click on the **WS (WebSockets)** filter.
4. Look for a WebSocket connection (`wss://your-ddev-site.ddev.site:5175`).
5. If it’s missing, Vite isn’t establishing an HMR connection.

Let me know if you see it or not!

—

## **🛠 3. Manually Test WebSocket Connection**
Inside **DevTools Console**, try:

new WebSocket('wss://your-ddev-site.ddev.site:5175');

– If it **connects**, WebSockets are working.
– If it **fails**, there's a problem with HTTPS WebSockets.

—

## **🛠 4. Force WebSocket Reconnection in `vite.config.js`**
Try explicitly setting **client HMR** options in your `vite.config.js`:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        https: true, 
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',
            host: hostname,
            port: port,
            clientPort: port,
        },
    },
});

Then restart everything:

ddev restart
yarn dev

—

## **🛠 5. Add `VITE_HMR_PORT` in `.env`**
In your `.env`, add:

VITE_HMR_PORT=5175

Modify `vite.config.js` to use:

const hmrPort = process.env.VITE_HMR_PORT || 5175;

Then restart:

ddev restart
yarn dev

—

## **🛠 6. Check for Conflicting Plugins**
Sometimes, `laravel-vite-plugin` can interfere with HMR. Try disabling it temporarily:

// Comment out Laravel plugin to test HMR
// laravel({
//     input: 'resources/js/app.jsx',
//     refresh: true,
// }),

Then restart:

yarn dev

Now, try modifying a React file. If HMR starts working, the issue is with Laravel's Vite plugin.

—

## **🛠 7. Verify DDEV Port Exposure**
Make sure DDEV is forwarding port 5175 by checking:

ddev describe

If it’s missing, add it in `docker-compose.override.yaml`:

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

Then restart:

ddev restart

—

## **🚀 Final Steps**
After applying the fixes:
1. **Refresh your site**.
2. Modify a React component.
3. **Check if HMR works** without a full reload.

If it's still not working:
– **Check for WebSocket errors in DevTools (`F12` → Network → WS)**.
– **Run `ps aux | grep vite` inside DDEV to confirm Vite is running**.
– **Try `new WebSocket('wss://your-ddev-site.ddev.site:5175');` in the browser console**.

Let me know what you find! 🚀

—

## ✅ **1. Manually Start Vite**
Inside your DDEV container, run:

ddev ssh
yarn dev

Then, in a separate terminal, run:

ps aux | grep vite

Now, you should see a process like:

node /usr/local/bin/vite

If this process is running, try modifying a React component and check if HMR works.

—

## ✅ **2. Fix Vite Not Starting Automatically**
If `yarn dev` **works manually**, but Vite **does not start automatically**, add this command to your `post-start` script in `.ddev/config.yaml`:

hooks:
  post-start:
    - exec: "cd /var/www/html && yarn dev &"

Then restart:

ddev restart

This ensures Vite runs automatically when DDEV starts.

—

## ✅ **3. Debug HMR Connection**
After starting Vite, check if HMR is connected:

1. Open Chrome DevTools (`F12`).
2. Go to **Network** → **WS (WebSockets)**.
3. Look for `wss://your-ddev-site.ddev.site:5175`.

If it **does not exist**, try:

new WebSocket('wss://your-ddev-site.ddev.site:5175');

If this **fails**, DDEV might be blocking the WebSocket connection.

—

## ✅ **4. Expose Vite Port in DDEV**
Add the port in `docker-compose.override.yaml`:

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

Restart:

ddev restart

—

### 🚀 **Final Steps**
1. **Run `ddev ssh` → `yarn dev`** and check if `ps aux | grep vite` now shows Vite.
2. **Modify a React file** and see if it updates without a full refresh.
3. **Check WebSocket (`F12` → Network → WS)** for an active connection.

Let me know what happens! 🚀

—

## ✅ **1. Confirm Vite is Running**
Inside **DDEV**, check if Vite is running:

ddev ssh
ps aux | grep vite

If **Vite is missing**, manually start it:

yarn dev

Now, try modifying a React file. If HMR still doesn’t work, move to the next step.

—

## ✅ **2. Check WebSocket Port Exposure in DDEV**
DDEV might be **blocking port 5175**. To expose it, add this in `docker-compose.override.yaml`:

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

Then restart:

ddev restart

Now try again.

—

## ✅ **3. Force WebSocket Connection in `vite.config.js`**
Modify your `vite.config.js` to **explicitly configure HMR**:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        https: true,
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',
            host: hostname,
            port: port,
            clientPort: port,
        },
    },
});

Now restart:

ddev restart
yarn dev

—

## ✅ **4. Verify WebSocket Connection in DevTools**
1. Open **DevTools (`F12`)** → **Network**.
2. Click on **WS (WebSockets)**.
3. Look for `wss://openeratech.ddev.site:5175/`.
4. If it’s **not there**, test manually:

new WebSocket('wss://openeratech.ddev.site:5175');

– **If this fails**, WebSockets are blocked.
– **If this succeeds**, React HMR might not be working.

—

## ✅ **5. Enable WebSocket Proxying in Nginx/Apache**
If you are using **Apache in your DDEV setup**, enable WebSocket proxying.

Inside `apache.conf` (if available), add:

ProxyRequests Off
ProxyPass /ws/ wss://localhost:5175/
ProxyPassReverse /ws/ wss://localhost:5175/

Then restart:

ddev restart

—

### **🚀 Final Test**
1. Run `ddev ssh` → `yarn dev` and ensure `ps aux | grep vite` shows a running process.
2. Modify a React file and check if it updates without a full refresh.
3. If HMR still fails, **check DevTools WebSocket connection (`F12` → Network → WS)**.

Let me know what you find! 🚀

Here’s a checklist and some steps to troubleshoot further:

### **1. Check `docker-compose.override.yaml` for Port Exposure**
Make sure your `docker-compose.override.yaml` contains the following (or similar) to ensure the Vite port is properly exposed:

version: '3.6'
services:
  web:
    ports:
      - "5175:5175"

If you don't have this file, you can create it or add the configuration in the `ddev config.yaml` as you have done.

### **2. Confirm Vite is Running**
Make sure Vite is running properly in your DDEV environment. After executing `yarn dev`, check if it starts without errors:

ddev ssh
yarn dev

Then verify Vite is running:

ps aux | grep vite

### **3. Confirm WebSocket URL**
Make sure your Vite configuration (`vite.config.js`) uses the correct URL for HMR. The host should be the DDEV hostname:

const hostname = process.env.DDEV_HOSTNAME || 'localhost';

Ensure the WebSocket connection URL is correct:

hmr: {
    protocol: 'wss',
    host: hostname,
    port: port,
    clientPort: port,
},

### **4. Update DDEV and Restart**
Make sure your DDEV installation is up to date. You can update it using:

ddev self-update

After updating, restart your project:

ddev restart

### **5. Test WebSocket Connection Manually**
In the browser console, try to connect to the WebSocket manually:

const ws = new WebSocket('wss://openeratech.ddev.site:5175/');
ws.onopen = () => console.log('Connected');
ws.onerror = (error) => console.error('WebSocket Error: ', error);

### **6. Check Browser Security Settings**
Ensure your browser allows WebSocket connections over HTTPS. Some extensions or security settings might block them.

### **7. Review Nginx Configuration**
Since you’re using Nginx with DDEV, ensure that it’s configured to handle WebSocket connections correctly. The following configuration should be part of your Nginx setup, which DDEV manages for you, but double-check if you have custom configurations that may interfere:

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location /ws/ {
    proxy_pass http://localhost:5175;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}

### **8. Test Access to Vite**
Try accessing the Vite development server directly via the browser:

https://openeratech.ddev.site:5175/

If it returns a page or a 404 error, Vite is running.

### **9. Look for Errors in the Browser Console**
Check the console for any additional error messages that might give more context to the WebSocket failure.

### **🚀 Final Steps**
After completing these checks, try modifying a file in your React application again to see if HMR works now. Let me know how it goes!

### **1. Check Vite Logs for Errors**
Since Vite is running, check the output in your terminal where you executed `yarn dev`. Look for any logs or error messages related to HMR or WebSocket connections. This could give insights into what might be failing.

### **2. Test WebSocket Connection Again**
Run the following code in your browser's console to test the WebSocket connection:

const ws = new WebSocket('wss://openeratech.ddev.site:5175/');
ws.onopen = () => console.log('WebSocket connected');
ws.onmessage = (event) => console.log('Message from server:', event.data);
ws.onerror = (error) => console.error('WebSocket Error: ', error);
ws.onclose = () => console.log('WebSocket connection closed');

Check the console for any messages or errors. If it shows **"WebSocket Error"**, note what the error message states.

### **3. Review CORS and HTTPS Configuration**
Your CORS settings in the `vite.config.js` look correct, but let’s double-check that they are working as expected. Make sure that the origin matches exactly, including the scheme (https) and any port numbers if specified.

### **4. Check the Network Tab for WebSocket Connection**
1. Open **Chrome DevTools** (F12).
2. Go to the **Network** tab.
3. Filter for **WS** (WebSocket) connections.
4. Refresh the page and look for the connection attempt to `wss://openeratech.ddev.site:5175/`.

If the connection fails, there may be a problem with how the server is handling WebSocket requests.

### **5. Debug Nginx Configuration**
Since DDEV uses Nginx, ensure that it correctly supports WebSockets. If you made any custom changes to Nginx, check if they inadvertently block WebSocket connections.

#### Example Nginx configuration for WebSockets:
Make sure your Nginx config has something like this (DDEV usually configures this for you):

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location / {
    proxy_pass http://localhost:5175;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
}

### **6. Ensure HTTPS Configuration**
Since you mentioned you're using HTTPS, ensure that your SSL configuration is set up correctly. Any misconfigurations here can cause WebSocket connections to fail.

### **7. Test Without HTTPS (If Possible)**
If it's feasible, test the WebSocket connection using HTTP instead of HTTPS to see if the issue is related to SSL. This can help narrow down whether it's an SSL issue or something else.

### **8. Re-check Firewall and Security Group Settings**
Ensure that your firewall or security group settings on your hosting provider allow WebSocket connections. Sometimes, they may block specific ports, including 5175.

—

### 🚀 **Final Steps**
After performing these checks, try modifying a React component again and see if HMR updates without refreshing. If you encounter further issues, please provide any error messages or unexpected behaviors observed during testing.

### **1. Confirm Vite Configuration**
Ensure your `vite.config.js` is properly configured. Here's a refined example based on your setup:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        https: true,
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',
            host: hostname,
            port: port,
            clientPort: port,
        },
    },
});

### **2. Update Package Dependencies**
Make sure you have the latest versions of Vite and other dependencies. Run the following commands in your project:

yarn upgrade

### **3. Check React Component Structure**
Make sure your React components are properly set up to support HMR. Ensure you're using the latest React setup and following standard practices for component exports:

import React from 'react';

const App = () => {
    return (
        <div>
            <h1>Hello, World!</h1>
        </div>
    );
};

export default App;

### **4. Check for Console Errors**
Look for any errors in the browser console when you make changes to your files. Sometimes, errors in your JavaScript or React code can prevent HMR from functioning properly.

### **5. Debug WebSocket Connection**
Check if the WebSocket connection is indeed open and working correctly:

1. In your browser’s console, run:

const ws = new WebSocket('wss://openeratech.ddev.site:5175/');
   ws.onopen = () => console.log('WebSocket connected');
   ws.onmessage = (event) => console.log('Message from server:', event.data);
   ws.onerror = (error) => console.error('WebSocket Error: ', error);
   ws.onclose = () => console.log('WebSocket connection closed');

2. Verify that the connection opens successfully and that you're able to receive messages.

### **6. Adjust HMR Configuration**
Try adjusting the HMR configuration settings in `vite.config.js` to force it to use the correct WebSocket connection. You can try:

hmr: {
    protocol: 'wss',
    host: hostname,
    port: port,
    clientPort: port,
    timeout: 30000, // Optional: Adjust timeout for better connection stability
},

### **7. Test in Incognito Mode**
Sometimes browser caching can interfere with development. Try testing your application in **Incognito Mode** or clearing the browser cache to see if that resolves the issue.

### **8. Local Development Settings**
If you're still unable to resolve the issue, you can try running your application locally outside of DDEV temporarily:

1. Clone your project to a local environment.
2. Install the dependencies with `yarn install`.
3. Run the Vite development server with `yarn dev`.

Check if HMR works outside of the DDEV environment. This can help determine if the issue is specifically related to the DDEV configuration or your project setup.

### **9. Review DDEV Logs**
Check the DDEV logs for any potential issues related to network connections:

ddev logs

Look for any errors or warnings that may indicate issues with the web server or networking that could affect HMR.

### **10. DDEV Issue Reporting**
If none of the above solutions work, consider reaching out to the DDEV community or checking their documentation for any known issues with Vite and WebSocket connections, as there might be additional configurations specific to DDEV versions.

—

### 🚀 **Next Steps**
Try these steps and let me know if HMR starts working or if you encounter any specific errors during testing. This will help pinpoint the issue more accurately.

### **1. Check Vite Configuration Again**
Ensure your `vite.config.js` includes the correct settings for HMR, particularly the WebSocket configuration. Here’s a sample configuration to ensure it's set correctly:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

const port = 5175;
const hostname = process.env.DDEV_HOSTNAME || 'localhost';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: "0.0.0.0",
        port: port,
        strictPort: true,
        https: true,
        cors: {
            origin: `https://${hostname}`,
            credentials: true,
        },
        hmr: {
            protocol: 'wss',
            host: hostname,
            port: port,
            clientPort: port, // Ensure this matches the port being accessed in the browser
        },
    },
});

### **2. Review SSL Configuration**
Since you're using `wss` (WebSocket Secure), ensure that the SSL certificate for your DDEV site is correctly set up. If the SSL is misconfigured or expired, the WebSocket connection can fail.

1. Check your DDEV environment to ensure SSL is enabled.
2. You can also temporarily try disabling HTTPS for testing:

– Change `https: true` to `https: false` in your `vite.config.js` and update the WebSocket protocol to `ws` (instead of `wss`).
– Test if HMR works over plain HTTP.

### **3. Verify DDEV Configuration**
Check your `ddev config.yml` to ensure that the exposed ports are configured correctly. Here’s a sample:

web_extra_exposed_ports:
  - name: vite
    container_port: 5175
    http_port: 5174
    https_port: 5175

### **4. Confirm Firewall Settings**
If you're using any firewall or security group settings (e.g., AWS security groups), ensure that the ports (5175) are open for inbound traffic.

### **5. Check Network Tab for Errors**
1. Open your browser’s developer tools (F12).
2. Go to the **Network** tab.
3. Filter for **WS** (WebSocket) connections and refresh the page.
4. Check for any errors or warnings regarding the WebSocket connection.

### **6. Debug DDEV Logs**
Run the following command to get the logs from DDEV and look for any relevant error messages:

ddev logs

### **7. Try Alternative Browsers**
Sometimes, the browser you are using might have issues with WebSocket connections. Try accessing your DDEV site using different browsers like Chrome, Firefox, or Edge.

### **8. Test Local Environment**
If possible, run your application in a local environment without DDEV to check if HMR works outside of it. This can help determine whether the issue lies with DDEV or the application itself.

1. Clone your repository to a local environment.
2. Run `yarn install` to install dependencies.
3. Start the Vite development server with `yarn dev`.
4. Check if HMR works correctly locally.

### **9. Update DDEV**
Make sure you're using the latest version of DDEV. You can check for updates with:

ddev version
ddev self-update

### **10. Consult DDEV Community**
If none of the above solutions resolve the issue, consider reaching out to the DDEV community or checking their GitHub repository for similar issues. Sometimes, there might be bugs or specific configurations that need to be addressed.

—

### 🚀 **Next Steps**
Follow these troubleshooting steps, and let me know what results you observe. This will help narrow down the issue and find a suitable solution for getting HMR working with your setup.