Vaadin with Vite does not respect custom host names in vite.config.ts

[roeltje25]

Description of the bug

We tried to migrate to 23.2.x this week, but were having trouble because of vite. One reason was that we tend to run multiple interdependent dev environments on our machines. they make use of the local 127.x.x.x range, but are not necessarily running on 127.0.0.1. Also we use domain names for these ip's which reside in our (C:\Windows\System32\Drivers\network)/etc/hosts file. We tried to use the domain name, or the specific ip address (webportfolio.local and 127.0.16.1 respectively). But although the browser is able to get at the resources, the DevModeHandler implementation called AbstractDevServerRunner in package com.vaadin.base.devserver uses a hardcoded reference to 127.0.0.1 on line 81:

   private static final String DEV_SERVER_HOST = "http://127.0.0.1";

Minimal reproducible example

take any project and change customConfig in vit.config.ts to:

const customConfig: UserConfigFn = (env) => ({
  // Here you can add custom Vite parameters
  // https://vitejs.dev/config/
    server: {
      host: '127.0.16.1', 
      https: true
    }
});

Expected behavior

Either the AbstractDevServerRunner should make requests to the correct ip address. Or if the host should not be changed in vite.config.ts, then The browser should request resources from the correct localhost address. it is now requesting from the server we host the app from (wildfly is listening on 127.0.16.1).

Actual behavior

AbstractDevServerRunner is requesting from another ip address, which results in connection issues, which result in exceptions and a not-working app. Or if vite serves from 127.0.0.1, The app starts, but there are ERR_CONNECTION_REFUSED errors because it's trying to access 127.0.16.1:/VAADIN/ instead of 127.0.0.1:/VAADIN/

Versions:

- Vaadin / Flow version: 23.2.3
- Java version: 17.0.4
- OS version: Windows 11 22H2
- Browser version (if applicable): Chrome 105.0.5195.127 (Official Build) (64-bit)
- Application Server (if applicable): Wildfly 26.1.1
- IDE (if applicable):Eclipse  2022-09 (4.25.0) Build id: 20220908-1902
- Development or production mode: development mode
- Project from start.vaadin.com or activated in application: activated in application

[Artur-]

We cannot read the Vite config in Java as it is a function that is executed to get the real config. However we should be able to parse the

[dev-server-output] INFO com.vaadin.base.devserver.DevServerOutputTracker -   ➜  Local:   http://localhost:60440/VAADIN/

row that Vite outputs and use that protocol + hostname + port for communicating with Vite

[Artur-]

The best solution though would be to proxy the websocket connection also so the Vite server remains an internal detail and no configuration is needed

[chkpnt]

Indeed. Otherwise, it would be tricky or at least unclean to get dev mode working when running behind a reverse proxy (keyword X-Forwarded-headers, etc.).