`svelte-kit dev --host` inside a docker container causes constant refreshes when loaded in browser on host machine

Describe the bug Running yarn dev --host inside a docker container causes the page to constantly refresh when loaded in a browser on the host machine.

Logs

No server logs showed up, but in the console in the browser, it looked like there was a web socket issue - potentially related to HMR? I recorded the console in Safari below, but I noticed the same issue whether I opened it in Safari, Firefox, or Chrome.

Safari

https://user-images.githubusercontent.com/5247826/118409994-37d64300-b65b-11eb-8655-3a3f0b8ba72b.mov

Chrome

https://user-images.githubusercontent.com/5247826/118410732-ef208900-b65e-11eb-9053-aa89dd8738d6.mov

To Reproduce

Start a basic svelte-kit project, using the SvelteKit demo app, no Typescript, no ESLint, and no Prettier:

npm init svelte@next docker-test
cd docker-test
yarn install

Then add the following files to the project root:

# Dockerfile
FROM node:12-slim
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN ["yarn", "install"]
COPY . ./
CMD ["yarn", "dev", "--host"]

# docker-compose.yml
version: "3.2"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"

# .dockerignore

Dockerfile
.dockerignore
.gitignore
README.md
**/.git
build
node_modules

Then run docker compose up, or docker-compose up if you’re not using the new docker cli with compose build-in.

I also noticed the same issue when the working directory was used as a volume (minus the node_modules folder), which is the real-world setup I would use to take advantage of the HMR from the svelte-kit dev command.

Expected behavior

The webpage should load, and not constantly refresh, as it does when the dev server is being run on the host machine.

Stacktraces

No stack traces found.

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System: OS: macOS 10.15.6 CPU: (4) x64 Intel® Core™ i5-6360U CPU @ 2.00GHz Memory: 574.44 MB / 8.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.18.3 - ~/.asdf/installs/nodejs/12.18.3/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.6 - ~/.asdf/installs/nodejs/12.18.3/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman npmPackages: svelte: ^3.34.0 => 3.38.2

• Your browser

Safari, though I replicated it in Firefox/Chrome

• Your adapter (e.g. Node, static, Vercel, Begin, etc…)

Node

Severity

I quite like having a dockerized setup when building a full-stack application, but given that the svelte-kit dev command works on my host machine just fine, it’s not the absolute end of the world.

Additional context

This looks like it is a Vite issue to me, but given that it’s an issue with the default svelte-kit template, maybe this is something that could be fixed by adding something to the template re: a Vite config, or a clarification/warning in the docs? I assume a lot of people will want to use a dockerized development setup.

This seems slightly different from the existing issues, since I’m not using https (https://github.com/sveltejs/kit/issues/844), and it’s in docker instead of VSCode (https://github.com/sveltejs/kit/issues/1134), but I wouldn’t be surprised if it’s caused by the same issue, given that it’s also showing an issue with web socket connections.

[quentin-fox]

EDIT: I was not able to customize the HMR websocket port using the Vite config either in vite.config.js or in the config.kit.vite property in svelte.config.js, but I exposed the port that the browser was trying to connect to to the docker-compose file, which seemed to partly solve the issue. Since the port that my browser was trying to connect to was 24678, my docker-compose.yml file now looks like:

# docker-compose.yml
version: "3.2"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
      - "24678:24678"

Perhaps we should add a line re: this to the FAQ?

[Perturbatio]

The solution for me regarding this was to add the following to docker-compose.yml:

    ports:
      - 15000:15000

And in svelte.config.js:

vite: {
      server: {
	hmr: {
          host: 'localhost',
          port: 15000,
          protocol: 'ws'
        }
      }
}