Merge branch 'develop' into develop

Caddyfile.dev

@@ -9,6 +9,7 @@ localhost {
 		reverse_proxy meshinfo:9000
 	}
 	handle_path /next/* {
+		rewrite * /next{uri}
 		reverse_proxy frontend:80
 	}
 	handle /* {

Caddyfile.sample

@@ -14,6 +14,7 @@ YOUR_FQDN_OR_HOSTNAME {
 		reverse_proxy meshinfo:9000
 	}
 	handle_path /next/* {
+		rewrite * /next{uri}
 		reverse_proxy frontend:80
 	}
 }

Dockerfile.spa

@@ -12,12 +12,6 @@ RUN corepack enable
 RUN yarn
 RUN yarn build --base=/next/
 
-FROM nginx:alpine
-
-COPY --from=build /frontend/dist /usr/share/nginx/html/next
-
-COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
-
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["/frontend/scripts/run-frontend.sh"]

docker-compose-dev.yml

@@ -36,11 +36,10 @@ services:
     build:
       context: .
       dockerfile: Dockerfile.spa
-    volumes:
-      - ./frontend/dist:/usr/share/nginx/html/next
     ports:
       - 8000:80
     environment:
+      - VITE_API_BASE_URL=/api
       - NODE_ENV=production
     restart: always
 

docker-compose.yml

@@ -40,14 +40,15 @@ services:
     ports:
       - 8000:80
     environment:
+      - VITE_API_BASE_URL=/api
       - NODE_ENV=production
     restart: always
 
   caddy:
     image: caddy:latest
     ports:
       - 80:80
-      - 8443:443
+      - 443:443
     volumes:
       - ./caddy/data:/data/caddy
       - ./Caddyfile:/etc/caddy/Caddyfile

frontend/.gitignore

@@ -22,3 +22,11 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

frontend/README.md

@@ -19,3 +19,16 @@ yarn dev
 
 If you're having issues with your editor picking up types in TypeScript, follow the [yarn editor sdk docs](https://yarnpkg.com/getting-started/editor-sdks). This repo already includes Visual Studio Code sdks, but they may need to be augmented or regenerated.
 If you're using VSCode, make sure you install the recommended extensions. More info can be found in [the yarn docs](https://yarnpkg.com/getting-started/editor-sdks#vscode)
+
+## Notes
+
+The production portion of the frontend runs with an Express server to serve the static files so that you can switch out the api url as needed without rebuilding the container. You can change this by passing `VITE_BASE_API_URL` to the frontend container:
+
+```yml
+frontend:
+image: ghcr.io/meshaddicts/meshinfo-spa:latest
+ports:
+  - 8000:80
+environment:
+  - VITE_API_BASE_URL=/api
+```

frontend/package.json

@@ -15,7 +15,9 @@
     "autoprefixer": "^10.4.19",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
+    "express": "^4.19.2",
     "ol": "^9.2.4",
+    "pm2": "^5.4.2",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,6 +26,7 @@
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
+    "@types/express": "^4",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.0.0",

frontend/scripts/run-frontend.sh

@@ -0,0 +1,2 @@
+echo "API BASE URL: " $VITE_API_BASE_URL
+yarn build --base=/next/ && npx pm2-runtime /frontend/scripts/server.js

frontend/scripts/server.js

@@ -0,0 +1,27 @@
+import express from "express";
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const app = express();
+const port = process.env.PORT || 80;
+
+// Serve static files from the dist directory
+app.use("/next", express.static(path.join(__dirname, "../dist")));
+
+// log all requests
+app.use((req, res, next) => {
+  console.log(req.method, req.url);
+  next();
+});
+
+// Handle every other route with index.html, which will contain a script tag to your application's JavaScript
+app.get("/next/*", (req, res) => {
+  res.sendFile(path.join(__dirname, "../dist", "index.html"));
+});
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+});

frontend/src/components/HeardBy.tsx

@@ -9,10 +9,10 @@ export const HeardBy = () => {
     <>
       {" "}
       that have been heard by the mesh by{" "}
-      <Link to={`/nodes/${config?.server.node_id}`}>
-        {config?.server.node_id}
+      <Link to={`/nodes/${config?.server?.node_id}`}>
+        {config?.server?.node_id}
       </Link>{" "}
-      ({config?.server.node_id})
+      ({config?.server?.node_id})
     </>
   );
 };

frontend/src/components/Layout.tsx

@@ -2,6 +2,14 @@ import { Link, useLocation } from "react-router-dom";
 
 import { useGetConfigQuery } from "../slices/apiSlice";
 
+const defaultTools = [
+  { name: "Armooo's MeshView", url: "https://meshview.armooo.net" },
+  { name: "Liam's Meshtastic Map", url: "https://meshtastic.liamcottle.net" },
+  { name: "MeshMap", url: "https://meshmap.net" },
+  { name: "Bay Mesh Explorer", url: "https://app.bayme.sh" },
+  { name: "HWT Path Profiler", url: "https://heywhatsthat.com/profiler.html" },
+];
+
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { pathname } = useLocation();
   const { data: config } = useGetConfigQuery();
@@ -12,7 +20,7 @@ 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">
-              {config?.mesh.name.split(" ").map((word, index) => (
+              {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]}
@@ -22,10 +30,10 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             </div>
           </div>
 
-          <div>{config?.mesh.description}</div>
+          <div>{config?.mesh?.description}</div>
 
           <div>
-            <a href={config?.mesh.url} className="text-xs text-gray-900">
+            <a href={config?.mesh?.url} className="text-xs text-gray-900">
               Website
             </a>
           </div>
@@ -150,7 +158,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 
           <nav className="flex flex-col flex-1">
             <h3 className="font-bold">Tools</h3>
-            {config?.mesh.tools.map((tool, index) => (
+            {(config?.mesh?.tools ?? defaultTools).map((tool, index) => (
               // eslint-disable-next-line react/no-array-index-key
               <div key={`tools-${index}`} className="mb-1">
                 <a href={tool.url} target="_blank" rel="noopener noreferrer">
@@ -196,7 +204,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
             <h5 className="mb-2">
               Powered by MeshInfo{" "}
               <span className="text-xs text-gray-500">
-                {config?.server.version_info?.refName}
+                {config?.server?.version_info?.refName}
               </span>
             </h5>
             <a

frontend/src/pages/Chat.tsx

@@ -18,9 +18,9 @@ export const Chat = () => {
   const channels = useMemo(
     () =>
       Object.entries(chat?.channels ?? {}).filter(([id]) =>
-        config?.broker.channels.display.includes(id)
+        config?.broker?.channels?.display?.includes(id)
       ),
-    [chat?.channels, config?.broker.channels.display]
+    [chat?.channels, config?.broker?.channels?.display]
   );
 
   const [selectedChannel, setSelectedChannel] = useState<string>();
@@ -135,7 +135,7 @@ export const Chat = () => {
                       {format(
                         new Date(message.timestamp * 1000),
                         "yyyy-MM-dd HH:MM:SS xx",
-                        { timeZone: config?.server.timezone }
+                        { timeZone: config?.server?.timezone }
                       )}
                     </td>
                     <td className="p-1 text-center border border-gray-400">

frontend/src/pages/Map.tsx

@@ -99,8 +99,8 @@ export function Map() {
   }, [rawNodes]);
 
   const serverNode = useMemo(
-    () => nodes[config?.server.node_id ?? ""],
-    [config?.server.node_id, nodes]
+    () => nodes[config?.server?.node_id ?? ""],
+    [config?.server?.node_id, nodes]
   );
 
   const reverseGeocode = async (

frontend/src/pages/Node.tsx

@@ -262,14 +262,14 @@ export const Node = () => {
                     align="left"
                   >
                     Distance from{" "}
-                    {nodes[config?.server.node_id ?? ""].shortname}
+                    {nodes[config?.server?.node_id ?? ""].shortname}
                   </th>
                   <td className="p-1">
                     {calculateDistanceBetweenNodes(
-                      nodes[config?.server.node_id ?? ""],
+                      nodes[config?.server?.node_id ?? ""],
                       node
                     ) !== null
-                      ? `${calculateDistanceBetweenNodes(nodes[config?.server.node_id ?? ""], node)} km`
+                      ? `${calculateDistanceBetweenNodes(nodes[config?.server?.node_id ?? ""], node)} km`
                       : "Unknown"}
                   </td>
                 </tr>