Anyone have a working example of viteBundler and docker?

[brandoniffert]

I'm running payload in docker for local development and am trying out viteBundler. I have traefik configured for the app but am running into problems getting HMR to work with this setup.

---
services:
  node:
    image: node:20.9.0
    working_dir: /app
    volumes:
      - "./site:/app"
    command: sh -c "yarn install && yarn dev"
    labels:
      - proxy.enabled=true
      - traefik.http.services.node-cms.loadbalancer.server.port=3000
      - traefik.http.routers.node-cms.entrypoints=websecure
      - traefik.http.routers.node-cms.service=node-cms
      - traefik.http.routers.node-cms.rule=Host(`app.example.com`)
      - traefik.http.services.vite-cms.loadbalancer.server.port=5173
      - traefik.http.routers.vite-cms.entrypoints=vite
      - traefik.http.routers.vite-cms.service=vite-cms
      - traefik.http.routers.vite-cms.rule=Host(`app.example.com`)
  mongo:
    image: mongo:7.0.3
    command:
      - --storageEngine=wiredTiger
    volumes:
      - "./data/db:/data/db"
    logging:
      driver: none

Entrypoints from traefik config:

...
# Entrypoint (websecure)
- "--entrypoints.websecure.address=:443"
- "--entrypoints.websecure.http.tls.certresolver=cloudflare"
# Entrypoint (vite)
- "--entrypoints.vite.address=:5173"
- "--entrypoints.vite.http.tls=true"
...

vite config from payload.config.ts

vite: (incomingViteConfig) => {
  return {
    ...incomingViteConfig,
    server: {
      ...(incomingViteConfig.server || {}),
      hmr: {
        port: 5173,
        protocol: "wss",
      },
    },
  };
}

This gets me to the point where when I load the admin, I see the initial wss request:

wss://app.example.com:5173/admin/

When I update a file though, there is a request for https://app.example.com:5173/admin/ that gets a 502 and the page is forced reloaded, also with a 502.

Been trying a bunch of different options from Googling, but that usually results in infinite reloading of the page.