Merge pull request #26 from oxsecurity/OXDEV-15954-fix-server-redirects

Move api routes under /api and serve index.html for all GET requests

package.json

@@ -8,7 +8,7 @@
     "build": "npm run build --workspaces",
     "postbuild": "mv ./packages/backend/dist . && mkdir -p ./dist/public && mv ./packages/app/dist/* ./dist/public",
     "clean": "rm -rf dist && npm run clean --workspaces",
-    "production": "node -r dotenv/config dist/index.js dotenv_config_path=./.env dotenv_config_debug=true",
+    "production": "cross-env NODE_ENV=production node -r dotenv/config dist/index.js dotenv_config_path=./.env dotenv_config_debug=true",
     "build:be": "npm run build:st && npm run build --workspace=packages/backend",
     "build:st": "npm run build --workspace=packages/shared-types",
     "start:be": "npm start --workspace=packages/backend",

packages/app/src/analysis/actions/analysis-actions.ts

@@ -6,7 +6,7 @@ import {
   RepoAnalysis,
   SnippetAnalysis,
 } from "shared-types";
-import config from "../../config";
+import { backendUrl } from "../../common/utils/backend-url";
 import { AnalysisStore, AsyncState } from "../stores/analysis-store";
 
 export const startAnalysis = async () => {
@@ -16,15 +16,11 @@ export const startAnalysis = async () => {
 
   try {
     const data = createRequestData();
-    const report = await axios.post(
-      `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/analysis`,
-      data,
-      {
-        headers: {
-          "Content-Type": "multipart/form-data",
-        },
-      }
-    );
+    const report = await axios.post(`${backendUrl}/analysis`, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
     AnalysisStore.getState().reset();
     return report.data.requestId;
   } catch (err) {

packages/app/src/common/utils/backend-url.ts

@@ -0,0 +1,11 @@
+import config from "../../config";
+
+const port = config.CODETOTAL_HTTP_PORT;
+const host = config.CODETOTAL_HTTP_HOST;
+const prefix = "api";
+
+export const backendUrl =
+  port === "80" || port === undefined
+    ? `//${host}/${prefix}`
+    : `//${host}:${port}/${prefix}`;
+

packages/app/src/common/utils/detect-lanauge-utils.ts

@@ -2,11 +2,11 @@ import axios from "axios";
 import debounce from "lodash-es/debounce";
 import { ProgrammingLanguage } from "shared-types";
 import { AnalysisStore } from "../../analysis/stores/analysis-store";
-import config from "../../config";
+import { backendUrl } from "./backend-url";
 
 export const detect = async (snippet: string) => {
   const res = await axios.post<ProgrammingLanguage | undefined>(
-    `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/detect`,
+    `${backendUrl}/detect`,
     { snippet }
   );
   AnalysisStore.setState({ language: res.data });

packages/app/src/report/ReportPage.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from "react";
+import { FC, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { AnalysisErrorDialog } from "../common/AnalysisErrorDialog";
 import { initReport } from "./actions/init-report-action";
@@ -9,19 +9,17 @@ import { ReportHeader } from "./components/ReportHeader";
 import { ReportTabs } from "./components/ReportTabs";
 
 const ReportPage: FC = () => {
-  const calls = useRef(0);
   const { requestId } = useParams();
   const navigate = useNavigate();
 
   useEffect(() => {
     (async () => {
-      if (calls.current > 0 && requestId) {
+      if (requestId) {
         const success = await initReport(requestId);
         if (!success) {
           navigate("/");
         }
       }
-      calls.current += 1;
     })();
   }, [requestId, navigate]);
 

packages/app/src/report/actions/init-report-action.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { AnalysisStatus } from "shared-types";
-import config from "../../config";
+import { backendUrl } from "../../common/utils/backend-url";
 import { ReportStore } from "../stores/fe-report-store";
 import { subscribeToReportProgress } from "./subscribe-report-action";
 
@@ -10,9 +10,7 @@ export const initReport = async (requestId: string) => {
     ReportStore.getState().reset();
 
     // fetch report
-    const res = await axios.get(
-      `http://${config.CODETOTAL_HTTP_HOST}:${config.CODETOTAL_HTTP_PORT}/report/${requestId}`
-    );
+    const res = await axios.get(`${backendUrl}/report/${requestId}`);
 
     const { status } = res.data;
     switch (status) {

packages/backend/src/http/register-http-routes.ts

@@ -1,11 +1,26 @@
 import express from "express";
+import fs from "node:fs";
+import path from "node:path";
 import { analysisHttpHandler } from "./handlers/analysis-http-handler";
 import { multerFileUploadHandler } from "./handlers/http-file-upload-handler";
 import { languageDetectionHttpHandler } from "./handlers/language-detection-http-handler";
 import { reportHttpHandler } from "./handlers/report-http-handler";
 
 export const registerRoutes = (app: express.Express) => {
-  app.post("/analysis", multerFileUploadHandler, analysisHttpHandler);
-  app.get("/report/:requestId", reportHttpHandler);
-  app.post("/detect", languageDetectionHttpHandler);
+  const prefix = "/api";
+
+  app.post(`${prefix}/analysis`, multerFileUploadHandler, analysisHttpHandler);
+  app.get(`${prefix}/report/:requestId`, reportHttpHandler);
+  app.post(`${prefix}/detect`, languageDetectionHttpHandler);
+
+  if (process.env.NODE_ENV === "production") {
+    const indexHTMLPath = path.resolve("./dist", "public", "index.html");
+    const indexHTML = fs.readFileSync(indexHTMLPath).toString();
+    console.log("Serving the following index.html file for all GET requests");
+    console.log(indexHTML);
+
+    app.get("*", (req, res) => {
+      res.send(indexHTML);
+    });
+  }
 };