Merge pull request #1149 from navikt/new_devserver

New devserver
navikt · Aug 30, 2023 · 5b69b82 · 5b69b82
2 parents 3291042 + e260104
commit 5b69b82
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 322 deletions.
diff --git a/apps/frackend/.dockerignore b/apps/frackend/.dockerignore
@@ -7,4 +7,5 @@
 !tsconfig.json
 !package*.json
 !public/
-!node_modules
+!node_modules
+!dev-server
diff --git a/apps/frackend/publicLocal/index.html → apps/frackend/dev-server/index.html b/apps/frackend/publicLocal/index.html → apps/frackend/dev-server/index.html
@@ -10,30 +10,34 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>[DEVMODE] Team katalogen</title>
+    <title>[DEVMODE] NOM</title>
     <style>
         #dev-mode {
             position: absolute;
-            right: 50%;
-            top: 8px;
+            left: 20px;
+            top: 30px;
+            cursor: pointer;
         }
 
         #explain-why-no-dev-server {
-            display: none;
-            padding: 2rem;
+            visibility: hidden;
+            position: absolute;
+            left: 100px;
+            top: 100px;
             font-size: 20px;
         }
 
         #explain-why-no-dev-server:has(~ #root:empty) {
-            display: block;
+            visibility: visible;
         }
     </style>
 </head>
 <body>
-<span class="navds-tag navds-tag--success" id="dev-mode">DEVMODE</span>
+<span class="navds-tag navds-tag--success" id="dev-mode"><a href="/toggle-devserver">Skru av DEVMODE</a></span>
 <div id="explain-why-no-dev-server">
     Det ser ikke ut som du har en lokal frontend kjørende.<br />
-    Vær obs på at frontend er nødt til å kjøre på <code>http://localhost:5173</code>
+    Vær obs på at frontend er nødt til å kjøre på <code>http://localhost:5173</code><br />
+    eller <a href="/toggle-devserver">skru av DEVMODE</a>
 </div>
 <div id="root"></div>
 <script type="module" src="http://localhost:5173/@vite/client"></script>

diff --git a/apps/frackend/package-lock.json b/apps/frackend/package-lock.json
diff --git a/apps/frackend/package.json b/apps/frackend/package.json
@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "axios": "1.5.0",
+    "cookie-parser": "1.4.6",
     "express": "4.18.2",
     "express-jwt": "8.4.1",
     "express-session": "1.17.3",
@@ -24,6 +25,7 @@
     "uuid": "9.0.0"
   },
   "devDependencies": {
+    "@types/cookie-parser": "1.4.3",
     "@types/express": "4.17.17",
     "@types/express-session": "1.17.7",
     "@types/node": "20.5.7",

diff --git a/apps/frackend/src/frontendRoute.ts b/apps/frackend/src/frontendRoute.ts
@@ -1,17 +1,43 @@
 import * as fs from "node:fs";
 import path from "node:path";
 
-import express, { Express } from "express";
+import express, { Express, Response } from "express";
 
-const indexHtmlExists = fs.existsSync("./public/index.html");
-const publicFolderPath = indexHtmlExists ? "./public" : "./publicLocal";
+// When deployed the built frontend is copied into the public directory. If running BFF locally the directory will not exist.
+const productionBuildExists = fs.existsSync("./public/index.html");
 
-const setupStaticRoutes = (app: Express) => {
-  app.use(express.static(publicFolderPath));
+export function setupStaticRoutes(app: Express) {
+  app.use(express.static("./public"));
+
+  app.get("/toggle-devserver", (request, response) => {
+    const developmentServerShouldBeEnabled =
+      request.cookies["use-local-devserver"] !== "true";
+    response.cookie("use-local-devserver", developmentServerShouldBeEnabled, {
+      httpOnly: false,
+      secure: false,
+      sameSite: "lax",
+    });
+
+    developmentServerShouldBeEnabled
+      ? serveDevserver(response)
+      : serveProductionBuild(response);
+  });
 
   app.get("*", (request, response) => {
-    response.sendFile(path.resolve(publicFolderPath) + "/index.html");
+    const developmentServerIsEnabled =
+      request.cookies["use-local-devserver"] === "true";
+
+    if (developmentServerIsEnabled || !productionBuildExists) {
+      return serveDevserver(response);
+    }
+    return serveProductionBuild(response);
   });
-};
+}
+
+function serveDevserver(response: Response) {
+  response.sendFile(path.resolve("./dev-server") + "/index.html");
+}
 
-export default setupStaticRoutes;
+function serveProductionBuild(response: Response) {
+  response.sendFile(path.resolve("./public") + "/index.html");
+}
diff --git a/apps/frackend/src/server.ts b/apps/frackend/src/server.ts
@@ -2,9 +2,8 @@ import express from "express";
 
 import { setupActuators } from "./actuators.js";
 import { setupNomApiProxy, setupTeamcatApiProxy } from "./apiProxy.js";
-import setupStaticRoutes from "./frontendRoute.js";
+import { setupStaticRoutes } from "./frontendRoute.js";
 import { setupSession } from "./session.js";
-import setupUiDevelopmentEndpoint from "./uiDev.js";
 
 // Create Express Server
 const app = express();
@@ -18,8 +17,6 @@ setupSession(app);
 setupNomApiProxy(app);
 setupTeamcatApiProxy(app);
 
-setupUiDevelopmentEndpoint(app);
-
 // Catch all route, må være sist
 setupStaticRoutes(app);
 

diff --git a/apps/frackend/src/session.ts b/apps/frackend/src/session.ts
@@ -1,3 +1,4 @@
+import cookieParser from "cookie-parser";
 import { Express } from "express";
 import session, { SessionOptions } from "express-session";
 import { v4 as uuidv4 } from "uuid";
@@ -19,6 +20,8 @@ const SESSION_MAX_AGE_MILLISECONDS = 10 * 60 * 60 * 1000;
 
 export const setupSession = (app: Express) => {
   app.set("trust proxy", 1);
+  app.use(cookieParser());
+
   const options: SessionOptions = {
     cookie: {
       maxAge: SESSION_MAX_AGE_MILLISECONDS,