next: support dev

Caddyfile.dev

@@ -2,15 +2,14 @@
 	debug
 }
 
-localhost {
-	tls internal
+http://localhost {
 	encode gzip
 	handle_path /api/* {
 		reverse_proxy meshinfo:9000
 	}
 	handle_path /next/* {
 		rewrite * /next{uri}
-		reverse_proxy frontend:80
+		reverse_proxy frontend:5173
 	}
 	handle /* {
 		root * /srv

Dockerfile.spa

@@ -8,10 +8,13 @@ COPY . .
 
 WORKDIR /frontend
 
+ARG env=production
+ENV NODE_ENV=$env
+
 RUN corepack enable
 RUN yarn
 RUN yarn build --base=/next/
 
 EXPOSE 80
 
-CMD ["/frontend/scripts/run-frontend.sh"]
+CMD ["/frontend/scripts/run-frontend.sh"]

Dockerfile.spa.dev

@@ -0,0 +1,18 @@
+# trunk-ignore-all(checkov/CKV_DOCKER_3)
+FROM node:20.11.1-alpine
+
+LABEL org.opencontainers.image.source="https://github.com/MeshAddicts/meshinfo"
+LABEL org.opencontainers.image.description="Realtime web UI to run against a Meshtastic regional or private mesh network."
+
+COPY . .
+
+WORKDIR /frontend
+
+ENV NODE_ENV=dev
+
+RUN corepack enable
+RUN yarn
+
+EXPOSE 5173
+
+CMD ["/frontend/scripts/run-frontend.sh"]

api/api.py

@@ -186,6 +186,7 @@ async def server_config(request: Request) -> JSONResponse:
             app.add_middleware(
                 CORSMiddleware,
                 allow_origins=allow_origins,
+                allow_credentials=True,
                 allow_methods=["*"],
                 allow_headers=["*"]
             )

docker-compose-dev.yml

@@ -2,8 +2,7 @@ services:
   caddy:
     image: caddy:latest
     ports:
-      - 8001:80
-      - 8443:443
+      - 8000:80
     volumes:
       - ./caddy/data:/data/caddy
       - ./Caddyfile.dev:/etc/caddy/Caddyfile
@@ -35,12 +34,12 @@ services:
   frontend:
     build:
       context: .
-      dockerfile: Dockerfile.spa
+      dockerfile: Dockerfile.spa.dev
     ports:
-      - 8000:80
+      - 5173:5173
     environment:
-      - VITE_API_BASE_URL=/api
-      - NODE_ENV=production
+      - VITE_API_BASE_URL=http://localhost:9000
+      - NODE_ENV=dev
     restart: always
 
   meshinfo:
@@ -52,12 +51,11 @@ services:
       - ./output:/app/output
       - ./templates:/app/templates
       - ./spa:/app/spa
+    ports:
+      - 9000:9000
     environment:
       - PYTHONUNBUFFERED=1
-      - MQTT_HOST=mqtt
-      - MQTT_PORT=1883
-      - MQTT_USERNAME=meshinfo
-      - MQTT_PASSWORD=m3sht4st1c
+      - ALLOW_ORIGINS=*
     restart: always
     depends_on:
       - caddy

docker-compose.yml

@@ -24,10 +24,6 @@ services:
       - ./output:/app/output
     environment:
       - PYTHONUNBUFFERED=1
-      - MQTT_HOST=mqtt
-      - MQTT_PORT=1883
-      - MQTT_USERNAME=meshinfo
-      - MQTT_PASSWORD=m3sht4st1c
     ports:
       - 9000:9000
     restart: always

frontend/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "start": "vite",
+    "dev": "vite dev",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

frontend/scripts/run-frontend.sh

@@ -1,2 +1,8 @@
+echo "NODE_ENV: " $NODE_ENV
 echo "API BASE URL: " $VITE_API_BASE_URL
-yarn build --base=/next/ && npx pm2-runtime /frontend/scripts/server.js
+
+if [ "$NODE_ENV" == "dev" ]; then
+  yarn run dev --host 0.0.0.0
+else
+  yarn build --base=/next/ && npx pm2-runtime /frontend/scripts/server.js
+fi

frontend/vite.config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: process.env.API_BASE_URI ?? "http://localhost:9000",
+        target: process.env.VITE_API_BASE_URL ?? "http://localhost:9000",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),
       },