Suggestions how to implement this with DDEV?

[timothyoesch]

Heyup!

Thanks for the plugin! Since I am working with ddev/ddev as my development environment, I was wondering if you have any suggestions to get it working there. I've tried to follow the instructions of this blogpost, sadly with no luck. Here's a reproduction repo: https://github.com/timothyoesch/ddev-vite-for-wp

Thanks for your help!

[brianjhanson]

It looks like your host value isn't quite right. You'll want that to be 0.0.0.0. That will tell Vite to broadcast to all available IP addresses.

[timothyoesch]

Unfortunately, when using 0.0.0.0 as the host value, I get some puzzling CORS errors...

Access to script at 'https://0.0.0.0:5173/@vite/client' from origin 'https://ddev-vite-for-wp.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://0.0.0.0:5173/@vite/client net::ERR_FAILED 404 (Not Found)

Access to script at 'https://0.0.0.0:5173/js/src/main.js' from origin 'https://ddev-vite-for-wp.ddev.site' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://0.0.0.0:5173/js/src/main.js net::ERR_FAILED 404 (Not Found)

I know, CORS isn't actually an issue with this plugin and if it's requested, I will close the issue and try and figure it out myself. I'd be super glad for some assistance though. I have a working, yet very hacky and not so elegant solution for now. Would be amazing to get this working though!

[hiepvq]

Different domain is blocked by cors of browser. You can use some browser extension to disable checking cors

[hunterd]

I'm experiencing a similar issue. I can't access my server remotely because when I set server.host to 0.0.0.0, the server.origin option in vite.config.js gets overwritten by the plugin behavior.

Currently, the file node_modules/@kucrut/vite-for-wp/src/exports/plugins/dev-server.js forces the origin value, even when it's explicitly set in the config.
I'll submit a PR to fix this issue and allow custom server.origin to be respected.

To address this, your vite.config.js could look like this:

server: {
  host: '0.0.0.0', // Listen on all network interfaces
  https: {
    key: fs.readFileSync(process.env.SSL_LOCAL_PK),  // Path to SSL key
    cert: fs.readFileSync(process.env.SSL_LOCAL_CERT),  // Path to SSL cert
  },
  // port: 5173, // Required if strictPort is true
  origin: 'https://example.com', // Dev server URL (the fixed plugin will auto-append the port if missing)
  hmr: {
    protocol: 'wss', // HMR uses wss protocol
    host: 'example.com', // Dev server host (without protocol)
    // port: 5173 // Must match the server port if specified
  },
  // strictPort: true, // Enforce a specific port or throw an error if it's taken
},

⚠️ If you're using HTTPS with a self-signed certificate, don't forget to manually trust the certificate by visiting the URL shown in the browser console error.
Browsers often treat self-signed certificate errors as CORS errors, which can block requests and WebSocket connections. Trusting the certificate resolves this issue.

I don't know much about DDEV, but I personally use Valet Linux Plus, which simplifies creating self-signed certificates.