#79 Continuing work to get the frontend up and running

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/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}`);
+});