Vite HTTPS HMR Issue

export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js', 'resources/js/app-backend.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
host: '0.0.0.0', // Allows access from the Docker container
port: 5173, // Port Vite listens on
strictPort: true,
https: true, // Ensure Vite serves over HTTPS
watch: {
usePolling: true, // Add polling
interval: 1000,
ignored: ['**/node_modules/**', '**/.git/**', '**/storage/**', '**/vendor/**', '**/public/**'],
},
hmr: {
host: '0.0.0.0', // For Windows/Mac, use 'host.docker.internal'
port: 5173,
protocol: 'https', // Ensure HMR uses HTTPS
},
},
});
ddev yarn run dev
Mixed Content: The page at 'https://shareyourthoughts.ddev.site/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:5173/@vite/client'. This request has been blocked; the content must be served over HTTPS.

Here are a couple of things to check and adjust:

1. **Make sure Vite is serving over HTTPS**:
You've already set `https: true` in the Vite config, but you also need to ensure that the Vite server is correctly handling the certificates for HTTPS.

2. **Set the correct HMR host and port**:
The error message indicates that HMR is being requested over HTTP, which suggests that the HMR configuration isn't fully aligned with your HTTPS setup.

Update your Vite config for the HMR settings and ensure everything is aligned to use HTTPS:

hmr: {
    host: '0.0.0.0', // For Docker
    port: 5173,
    protocol: 'https', // Ensure HTTPS is being used for HMR
    clientPort: 5173, // Add this line if it's still using HTTP in the client
},

3. **Use a secure context for `https` in your Docker container**:
If you're running Docker, ensure that your local environment has valid SSL certificates for Vite to use when serving over HTTPS. You might want to configure `vite` to use a self-signed certificate for local development:

In your `vite.config.js`:

server: {
       https: {
           key: fs.readFileSync('/path/to/your/localhost-key.pem'),
           cert: fs.readFileSync('/path/to/your/localhost-cert.pem'),
       },
       // other server settings...
   },

Make sure to replace `/path/to/your/…` with the actual paths to your SSL certificate and key.

4. **Check the browser's console**:
If the issue persists, check the browser's developer tools console for any further details. You may also need to configure your browser or development server to accept self-signed certificates if you're not using a valid certificate.

By ensuring that Vite's dev server and HMR both use HTTPS, the mixed content issue should be resolved.

To find the path to the certificate and key files for use with your Vite configuration, follow these steps:

1. **Locate the DDEV project configuration directory**:
Inside your project folder, DDEV stores its certificates in the `.ddev` directory.

2. **Navigate to the `.ddev` folder**:
The path to the certificates is inside the `.ddev` folder, typically under:
– `/.ddev/.ssl/cert.pem` (the public certificate)
– `/.ddev/.ssl/key.pem` (the private key)

### Example path:

/path/to/your/project/.ddev/.ssl/cert.pem
/path/to/your/project/.ddev/.ssl/key.pem

You can use these certificate and key paths in your Vite configuration like this:

import fs from 'fs';
import path from 'path';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, '.ddev/.ssl/key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, '.ddev/.ssl/cert.pem')),
        },
        // other settings...
    },
    // other config...
});

This will ensure that Vite is using the DDEV-generated certificates for HTTPS in your development environment.

Here's what you can try:

### 1. **Ensure HTTPS is enabled in DDEV:**

DDEV supports HTTPS out of the box, but sometimes you may need to ensure the environment is set to enable it. You can check this by running:

ddev describe

Look for the `https` setting in the output. If it's not enabled, you can manually configure it in your `.ddev/config.yaml`.

### 2. **Use a self-signed certificate for local development:**

If you need to explicitly set up SSL for your Vite server, you can create a self-signed certificate for local development. Here's how:

#### Generate a Self-Signed SSL Certificate:

1. **Generate the certificate and key** using OpenSSL:

openssl genpkey -algorithm RSA -out key.pem
   openssl req -new -key key.pem -out csr.pem
   openssl x509 -req -in csr.pem -signkey key.pem -out cert.pem

2. **Place the `cert.pem` and `key.pem` files** in your project folder (for example, in `.ddev/ssl`).

#### Update Vite Configuration:

Once you have the self-signed certificate and key, modify your `vite.config.js`:

import fs from 'fs';
import path from 'path';

export default defineConfig({
    server: {
        https: {
            key: fs.readFileSync(path.resolve(__dirname, '.ddev/ssl/key.pem')),
            cert: fs.readFileSync(path.resolve(__dirname, '.ddev/ssl/cert.pem')),
        },
        // other settings...
    },
    // other config...
});

This will tell Vite to serve your development site over HTTPS using the self-signed certificate you created.

### 3. **Trust the Self-Signed Certificate in Your Browser:**

After generating the self-signed certificates, you may need to manually trust them in your browser to avoid security warnings when accessing your local development environment.

Let me know if you need further assistance setting this up!