Trying to find the right configuration for localhost Vite in Docker with WebWorkers

[bensaufley]

What I need is to visit localhost:3000 and get Laravel + Vite, and also get Vite to serve references to other assets at localhost—not [::], not 0.0.0.0, but localhost. Is there a way to do this?

Here's my use case:

• Vite
• Laravel
• Docker (host: true in vite.config.ts)
• Preact (not sure this is relevant, but just for the record)
• crypto.subtle used (only available secure environments, but localhost is also allowed—not 127.0.0.1 or [::], only localhost)

Here are my issues:

• WebWorkers can't be loaded from a different port, so if I use :3000 for Laravel and :3001 for Vite, Chrome rejects it
• So I set up Vite to proxy Laravel and run everything through :3000 (served by Vite). Now Chrome won't let me load the WebWorker because I'm accessing at localhost and Vite is using [::], which is AFAIK functionally the same, but Chrome doesn't know that.
• I currently have host: true, and it serves references to dynamically-loaded assets at [::]:3000. This seems to work fine most of the time, but the mismatch between localhost and [::] means Chrome won't execute WebWorkers.
• If I set Vite to use host: 'localhost', I can't access it outside Docker
• If I set Vite to use host: '[::]' or 0.0.0.0, and then:
  • visit [::]:3000 or 0.0.0.0:3000 locally, I get WebWorkers but I can't get crypto.subtle.
  • visit localhost with these configurations, I can get the app but I can't get WebWorkers.

[bensaufley]

Whelp. it's as simple as adding the below to the vite config:

{
  hmr: 'localhost',
}

[bensaufley]

It may actually be more about the Laravel side of things (all the asset links from the Laravel HTML started with http://[::]/ and now start with http://localhost/) than with Vite at all, but it's a part of the Vite config, not the Laravel (or even laravel-vite) config.