Vite and Docker

Describe the bug

vite and docker dont seem to work well together every time i develop with both the browser reloads every minute. The browser reloads up to five time per initial load . Also the server crashes at random times during development .

Reproduction

https://github.com/louiss0/vue-2-template

System Info

docker-desktop 3.35

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[akauppi]

@louiss0 's description maybe needs some editing, to be reproducible.

I’m also setting up Vite HMR with Docker Compose. The part where it still fails is HMR - I just don’t get any changes to the browser, if Vite is being run under Docker. If I run it natively, HMR works like magic.

This issue: Vite hmr does not work in Docker was specifically about HMR but is now closed.

Want to help solving these issues. My work is currently uncommitted, but will be available and reproducible soon.

[JosephusPaye]

I had the same problem and was able to fix it by setting a custom HMR port and exposing that port from the docker container.

• Set Vite’s server.hmr.port config option to the port you want to use for HMR:

export default defineConfig({
  server: {
    hmr: {
      port: 3010,
    },
  },
  // other options...
})

• Expose the HMR port when running the docker container: (here I’m using docker-compose)

docker-compose run \
  -p 3000:3000 \       # my dev server port (not needed if you're not using port 3000)
  -p 3010:3010 \       # the HMR port
  webservice \
  yarn dev