2024-08-28: @next changes (#76)

.gitignore

@@ -8,6 +8,7 @@
 node_modules/
 .github_pat
 .env
+.venv
 
 backups/*
 caddy
@@ -17,3 +18,11 @@ mosquitto/data/*
 postgres/data/*
 config.json
 spa
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

Caddyfile.dev

@@ -9,9 +9,7 @@ localhost {
 		reverse_proxy meshinfo:9000
 	}
 	handle_path /next/* {
-		root * /srv/next
-		try_files {path} /index.html
-		file_server
+		reverse_proxy frontend:80
 	}
 	handle /* {
 		root * /srv

Caddyfile.sample

@@ -14,6 +14,6 @@ YOUR_FQDN_OR_HOSTNAME {
 		reverse_proxy meshinfo:9000
 	}
 	handle_path /next/* {
-		reverse_proxy meshinfo-spa:8000
+		reverse_proxy frontend:80
 	}
 }

Dockerfile.spa

@@ -1,5 +1,5 @@
 # trunk-ignore-all(checkov/CKV_DOCKER_3)
-FROM node:20.11.1-alpine
+FROM node:20.11.1-alpine AS build
 
 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."
@@ -10,12 +10,14 @@ WORKDIR /frontend
 
 RUN corepack enable
 RUN yarn
-RUN yarn build
+RUN yarn build --base=/next/
 
-ENV API_BASE_URI="http://localhost:9000"
+FROM nginx:alpine
 
-HEALTHCHECK NONE
+COPY --from=build /frontend/dist /usr/share/nginx/html/next
 
-EXPOSE 8000
+COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
 
-CMD ["yarn", "run", "start"]
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

api/api.py

@@ -1,8 +1,10 @@
+import os
 from fastapi.encoders import jsonable_encoder
 import uvicorn
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.templating import Jinja2Templates
+from fastapi.middleware.cors import CORSMiddleware
 
 from config import Config
 import utils
@@ -176,6 +178,18 @@ async def stats(request: Request) -> JSONResponse:
         async def server_config(request: Request) -> JSONResponse:
             return jsonable_encoder({'config': Config.cleanse(self.config)})
 
+
+        allow_origins = os.getenv("ALLOW_ORIGINS", "").split(",")
+        print(f"Allowed origins: {allow_origins} {len(allow_origins)}")
+
+        if(len(allow_origins) > 0):
+            app.add_middleware(
+                CORSMiddleware,
+                allow_origins=allow_origins,
+                allow_methods=["*"],
+                allow_headers=["*"]
+            )
+
         conf = uvicorn.Config(app=app, host="0.0.0.0", port=9000, loop=loop)
         server = uvicorn.Server(conf)
         print(f"Starting Uvicorn server bound at http://{conf.host}:{conf.port}")

config.py

@@ -27,7 +27,7 @@ def load_from_file(cls, path):
 
   @classmethod
   def cleanse(cls, config):
-    config_clean = config.deepcopy()
+    config_clean = config.copy()
     blacklist = {
         "config": {
             "broker": {

docker-compose-dev.yml

@@ -2,7 +2,7 @@ services:
   caddy:
     image: caddy:latest
     ports:
-      - 8000:80
+      - 8001:80
       - 8443:443
     volumes:
       - ./caddy/data:/data/caddy
@@ -32,6 +32,18 @@ services:
       - ./mosquitto/config:/mosquitto/config:rw
     restart: always
 
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile.spa
+    volumes:
+      - ./frontend/dist:/usr/share/nginx/html/next
+    ports:
+      - 8000:80
+    environment:
+      - NODE_ENV=production
+    restart: always
+
   meshinfo:
     build:
       context: .

docker-compose.yml

@@ -38,17 +38,16 @@ services:
   frontend:
     image: ghcr.io/meshaddicts/meshinfo-spa:latest
     ports:
-      - 8000:3000
+      - 8000:80
     environment:
       - NODE_ENV=production
-      - API_BASE_URL=https://svm1.meshinfo.network/api
     restart: always
 
   caddy:
     image: caddy:latest
     ports:
       - 80:80
-      - 443:443
+      - 8443:443
     volumes:
       - ./caddy/data:/data/caddy
       - ./Caddyfile:/etc/caddy/Caddyfile

frontend/.env.sample

@@ -1,3 +1 @@
-VITE_MESH_DESCRIPTION=Serving Meshtastic to the Central Valley and surrounding areas.
-VITE_MESH_URL=https://sacvalleymesh.com
-VITE_MESH_SERVER_NODE=!4355f528
+VITE_API_BASE_URL=http://localhost:9000

frontend/nginx.conf

@@ -0,0 +1,14 @@
+server {
+    listen 80;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        proxy_pass http://meshinfo:9000/;
+    }
+
+    location / {
+        try_files $uri $uri/ /next/index.html;
+    }
+}

frontend/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
+    "@types/node": "^22.5.1",
     "autoprefixer": "^10.4.19",
     "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "ol": "^9.2.4",
     "postcss": "^8.4.38",
     "react": "^18.2.0",

frontend/src/components/HardwareImg.tsx

@@ -15,7 +15,7 @@ export const HardwareImg = ({ model }: { model: number }) => {
 
   return (
     <img
-      src={`/images/hardware/${image}`}
+      src={`${import.meta.env.BASE_URL}images/hardware/${image}`}
       alt={modelName}
       title={modelName}
       className="w-8 h-8 object-cover"

frontend/src/components/Layout.tsx

@@ -12,15 +12,13 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         <div className="flex flex-col px-6 pb-4 overflow-y-auto bg-gray-300 border-r-2 grow gap-y-5 border-r-cyan-600">
           <div className="flex items-center h-24 mt-4 shrink-0">
             <div className="text-2xl">
-              <div className="p-0 m-0">
-                S<span className="text-gray-500">ACRAMENTO</span>
-              </div>
-              <div className="p-0 m-0">
-                V<span className="text-gray-500">ALLEY</span>
-              </div>
-              <div className="p-0 m-0">
-                M<span className="text-gray-500">ESH</span>
-              </div>
+              {config?.mesh.name.split(" ").map((word, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div className="p-0 m-0" key={`meshname-${index}`}>
+                  {word[0]}
+                  <span className="text-gray-500">{word.slice(1)}</span>
+                </div>
+              ))}
             </div>
           </div>
 
@@ -37,7 +35,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="chat" relative="path">
                 <img
-                  src="/images/icons/chat.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/chat.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -50,7 +48,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             {/* TODO <div className="mb-1">
               <Link to="graph" relative="path">
                 <img
-                  src="/images/icons/map.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/map.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -63,7 +61,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="map">
                 <img
-                  src="/images/icons/map.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/map.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -76,7 +74,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="nodes">
                 <img
-                  src="/images/icons/node.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/node.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -89,7 +87,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="neighbors" relative="path">
                 <img
-                  src="/images/icons/neighbors.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/neighbors.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -102,7 +100,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="stats" relative="path">
                 <img
-                  src="/images/icons/stats.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/stats.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -115,7 +113,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="telemetry" relative="path">
                 <img
-                  src="/images/icons/telemetry.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/telemetry.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -128,7 +126,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <div className="mb-1">
               <Link to="traceroutes">
                 <img
-                  src="/images/icons/route2.svg"
+                  src={`${import.meta.env.BASE_URL}images/icons/route2.svg`}
                   width="20"
                   height="20"
                   className="inline-block"
@@ -197,9 +195,9 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
           <div className="flex flex-col">
             <h5 className="mb-2">
               Powered by MeshInfo{" "}
-              {/* TODO <span className="text-xs text-gray-500">
-                {config?.server.version_info.ref_name}
-              </span> */}
+              <span className="text-xs text-gray-500">
+                {config?.server.version_info?.refName}
+              </span>
             </h5>
             <a
               href="https://github.com/MeshAddicts/meshinfo"