chore: make vite dev server port configurable (#1060)

## Done

- Make vite dev server port configurable. It is set to 3000 by default
so we don't need to worry about creating an extra secret for the demo
environment.
- Added to the docs about configuring `VITE_PORT`

.env

@@ -1,3 +1,4 @@
 ENVIRONMENT=devel
 PORT=8407
 LXD_UI_BACKEND_IP=172.17.0.1
+VITE_PORT=3000

.github/workflows/coverage.yaml

@@ -33,6 +33,7 @@ jobs:
           ENVIRONMENT: devel
           PORT: 8407
           LXD_UI_BACKEND_IP: 172.17.0.1
+          VITE_PORT: 3000
         run: |
           dotrun &
           curl --head --fail --retry-delay 2 --retry 100 --retry-connrefused --insecure https://localhost:8407

.github/workflows/pr.yaml

@@ -90,6 +90,7 @@ jobs:
           ENVIRONMENT: devel
           PORT: 8407
           LXD_UI_BACKEND_IP: 172.17.0.1
+          VITE_PORT: 3000
         run: |
           dotrun &
           curl --head --fail --retry-delay 2 --retry 100 --retry-connrefused --insecure https://localhost:8407

CONTRIBUTING.md

@@ -82,6 +82,9 @@
     You should enable a firewall as `dotrun` exposes an api to start or interact with unprivileged containers on your public
     ip via port `8407`. Ensure that the lxd API on port `8443` is open, so `dotrun` can access it.
 
+    For local development, the UI is served by the Vite development server, which uses port 3000 by default. 
+    If you have another process listening on this port on your system, create `.env.local` as a copy of the `.env` file and change the `VITE_PORT` variable in it to any free port.
+
     The first time, running `dotrun` will generate certificates for you. You can find them in the `keys` folder on the top level of
     the repo. Trust them from your local `lxc` with
 

entrypoint

@@ -1,26 +1,37 @@
 #! /usr/bin/env bash
 set -e
 
+load_env_file() {
+  if [ -f "$1" ]; then
+    set -o allexport
+    source "$1"
+    set +o allexport
+  fi
+}
+
+load_env_file .env
+load_env_file .env.local
+# default to 3000 if VITE_PORT is not set, in demo environment
+VITE_PORT="${VITE_PORT:-3000}"
+
 # demo config
 if [[ ! -z "$LXD_UI_BACKEND_KEY_PEM" ]]; then
   printf %s "$LXD_UI_BACKEND_KEY_PEM" > key.pem
   cp haproxy-demo.cfg /tmp/haproxy-local.cfg
   sed -i "s#LXD_UI_BACKEND_IP#$LXD_UI_BACKEND_IP#" /tmp/haproxy-local.cfg
   sed -i "s#LXD_UI_BACKEND_SECRET#$LXD_UI_BACKEND_SECRET#" /tmp/haproxy-local.cfg
+  sed -i "s#VITE_PORT#$VITE_PORT#" /tmp/haproxy-local.cfg
   . /usr/local/nvm/nvm.sh
 
   haproxy -f /tmp/haproxy-local.cfg
-  npx serve --single --no-clipboard -l 3000 build
+  npx serve --single --no-clipboard -l $VITE_PORT build
 
 # dev config
 else
   cp haproxy-dev.cfg /tmp/haproxy-local.cfg
-  set -o allexport; source .env; set +o allexport
-  if [ -f .env.local ]
-  then
-    set -o allexport; source .env.local; set +o allexport
-  fi
   sed -i "s#LXD_UI_BACKEND_IP#$LXD_UI_BACKEND_IP#" /tmp/haproxy-local.cfg
+  sed -i "s#VITE_PORT#$VITE_PORT#" /tmp/haproxy-local.cfg
+
   # generate certificates for dev environment
   if [ ! -d "keys" ]; then
     mkdir -p keys

haproxy-demo.cfg

@@ -19,7 +19,7 @@ frontend lxd_frontend
   default_backend lxd_ui
 
 backend lxd_ui
-  server yarn_serve_port 127.0.0.1:3000
+  server yarn_serve_port 127.0.0.1:VITE_PORT
 
 backend lxd_core
   server lxd_https LXD_UI_BACKEND_IP:8443 ssl verify none crt /srv/key.pem

haproxy-dev.cfg

@@ -16,7 +16,7 @@ frontend lxd_frontend
   default_backend lxd_ui
 
 backend lxd_ui
-  server yarn_serve_port 127.0.0.1:3000
+  server yarn_serve_port 127.0.0.1:VITE_PORT
 
 backend lxd_core
   server lxd_https LXD_UI_BACKEND_IP:8443 ssl verify none crt keys/lxd-ui.pem

package.json

@@ -18,7 +18,7 @@
     "lint-js": "tsc --noEmit && yarn lint-js-eslint && yarn lint-js-prettier",
     "hooks-add": "husky install",
     "hooks-remove": "husky uninstall",
-    "start": "concurrently --kill-others --raw 'vite --host | grep -v 3000' 'yarn serve'",
+    "start": "concurrently --kill-others --raw 'vite --host | grep -v http:' 'yarn serve'",
     "serve": "./entrypoint",
     "test-js": "vitest --run",
     "test-e2e-edge": "tests/scripts/setup_test && npx playwright test --project chromium:lxd-latest-edge firefox:lxd-latest-edge && tests/scripts/teardown_test",

vite.config.ts

@@ -1,6 +1,14 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
+import * as dotenv from "dotenv";
+import * as fs from "fs";
+
+// Load .env.local if it exists to override default environment variables
+dotenv.config({ path: ".env" });
+if (fs.existsSync(".env.local")) {
+  dotenv.config({ path: ".env.local" });
+}
 
 export default defineConfig({
   css: {
@@ -13,7 +21,8 @@ export default defineConfig({
   },
   plugins: [tsconfigPaths(), react()],
   server: {
-    port: 3000,
+    port: process.env.VITE_PORT ? Number(process.env.VITE_PORT) : 3000,
+    strictPort: true,
     proxy: {
       "/ui/assets": {
         target: "https://localhost:8407/",