quasar dev keeps auto-refreshing every 5 (ish) seconds, how do I stop it from doing that?

I have a web server and backend running behind an nginx reverse proxy, but for some reason when I run quasar dev in such a setup the web server auto-refreshes every few seconds. This seems to be hot-reloading gone wrong (it prevents me from navigating the pages, inspecting variables in the browser, etc.), but I don't understand where / how to track down the cause of this.

I've tried to make the repro for this as small as I can. Here is the docker-compose.yml file for the setup:

version: '3.7'
services:
  proxy:
    image: nginx:1.25.5
    ports:
      - 9876:80
    volumes:
      - /path/to/nginx.conf:/etc/nginx/nginx.conf
      - /path/to/proxy.conf:/etc/nginx/conf.d/default.conf
  ui:
    image: node:22.1.0
    volumes:
      - /home/quant/quasar_test/:/ui/
    working_dir: /ui/
    command:
      - /bin/sh
      - -c
      - |
        cd quasar-project
        npx quasar dev

Note that I've removed the backend component since it's not needed to reproduce this problem.

The quasar_test directory was constructed as follows:

mkdir quasar_test
docker run -p 9000:9000 -v quasar_test:/quasar_test -it node:22.1.0 /bin/bash
npm init quasar # (pick defaults for everything)
npm i -g @quasar/cli
cd quasar-project/
quasar dev

proxy.conf looks like this:

server {
    listen 80;

    charset utf-8;

    location / {
        proxy_pass http://ui:9000;
    }
}

and nginx.conf is this:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

Any idea what's causing this? It makes it very hard to debug the frontend since any attempt to inspect variables / console in chrome gets nuked every 5 seconds!

Things I've tried:

I added the following to my quasar.config.js in an attempt to stop the auto reloading but it doesn't seem to have helped:

devServer: {
      // https: true
      open: true, // opens browser window automatically
      hot: false,
      liveReload: false
    },

Launching quasar directly from docker (without nginx) works fine (no auto refreshing). However, this isn't a workaround for me since my real development environment requires the full reverse proxy setup with the backend.

The only workaround I've found is CTRL+C on the terminal where the docker container is running. This stops the refreshes on the browser, leading me to believe it's a server-side issue.

Solution

The problem was twofold:

Vite (the tooling framework underlying Quasar) didn't know which ports it was operating on.
nginx wasn't configured to pass through the required headers for a websocket proxy (which vite uses for HMR / hot reloading).

This manifested as the following errors in the browser console looping indefinitely (and reloading my webpage every time):

[vite] connecting...
Navigated to http://sy4tnt01:9876/
WebSocket connection to 'ws://localhost:9876/' failed: 
[vite] server connection lost. polling for restart...

In order for Vite to understand that the websocket server was on port 9000 internally and 9876 externally, I had to add these lines to my quasar.config.js:

extendViteConf(viteConf) {
  viteConf.server.hmr = {
    port: 9000,
    clientPort: 9876
  }
}

To get nginx to properly handle websocket protocol requests I added the following lines to the location / section of the config:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'Upgrade';