Improve dev host handling and clarify backend port configuration (#532)

* fix: remove --host from npm run server command

Running `vite --host` exposes the dev server on all interfaces. However,
we should expose it on all interfaces only when `HOST` is set to `0.0.0.0`.
Otherwise, we should assume the user wants to bind to a host of their choice
and not expose the server on the network.

* fix: use src hostname for redirecting to Vite in development

Previously, the server redirected to Vite using `localhost` as the hostname.
Even if the user was using HOST="0.0.0.0", if they connected to server from
another device on the same network using `http://<host_ip>:3001`, the
server would redirect them to `http://localhost:5173`, which would not
work since `localhost` would resolve to the client's machine instead of the server.

* fix: use shared network hosts configuration for better proxy setup

- Normalize all localhost variants to 'localhost' for consistent proxy
configuration in Vite and server setup.
- use one source of truth for network hosts functions by moving them to
a shared
- log production and development urls

* refactor: rename PORT to SERVER_PORT for clarity

* chore: add comments explaining host normalization

* fix: add legacy PORT env fallback for server port configuration

* fix: add fallback for SERVER_PORT using PORT environment variable

---------

Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: Simos Mikelatos <simosmik@gmail.com>

vite.config.js

@@ -1,15 +1,21 @@
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
+import { getConnectableHost, normalizeLoopbackHost } from './shared/networkHosts.js'
 
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
   const env = loadEnv(mode, process.cwd(), '')
 
-  const host = env.HOST || '0.0.0.0'
-  // When binding to all interfaces (0.0.0.0), proxy should connect to localhost
-  // Otherwise, proxy to the specific host the backend is bound to
-  const proxyHost = host === '0.0.0.0' ? 'localhost' : host
-  const port = env.PORT || 3001
+  const configuredHost = env.HOST || '0.0.0.0'
+  // if the host is not a loopback address, it should be used directly. 
+  // This allows the vite server to EXPOSE all interfaces when the host 
+  // is set to '0.0.0.0' or '::', while still using 'localhost' for browser 
+  // URLs and proxy targets.
+  const host = normalizeLoopbackHost(configuredHost)
+  
+  const proxyHost = getConnectableHost(configuredHost)
+  // TODO: Remove support for legacy PORT variables in all locations in a future major release, leaving only SERVER_PORT.
+  const serverPort = env.SERVER_PORT || env.PORT || 3001
 
   return {
     plugins: [react()],
@@ -17,13 +23,13 @@ export default defineConfig(({ command, mode }) => {
       host,
       port: parseInt(env.VITE_PORT) || 5173,
       proxy: {
-        '/api': `http://${proxyHost}:${port}`,
+        '/api': `http://${proxyHost}:${serverPort}`,
         '/ws': {
-          target: `ws://${proxyHost}:${port}`,
+          target: `ws://${proxyHost}:${serverPort}`,
           ws: true
         },
         '/shell': {
-          target: `ws://${proxyHost}:${port}`,
+          target: `ws://${proxyHost}:${serverPort}`,
           ws: true
         }
       }