feat(server): add index.html generating

Author: nakrovati

server/package-lock.json

@@ -15,13 +15,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fastify/static": "^6.10.2",
-    "fastify": "^4.21.0"
+    "@fastify/static": "^6.11.2",
+    "ejs": "^3.1.9",
+    "fastify": "^4.23.2"
   },
   "devDependencies": {
-    "@types/node": "^20.4.4",
-    "eslint": "^8.46.0",
+    "@types/ejs": "^3.1.2",
+    "@types/node": "^20.6.2",
+    "eslint": "^8.49.0",
     "nodemon": "^3.0.1",
-    "prettier": "^3.0.0"
+    "prettier": "^3.0.3"
   }
 }

server/package.json

@@ -1,15 +1,22 @@
+// @ts-check
 import { loadFrameworkVersions } from "./frameworksServices.js";
+import { generateIndexHtml } from "./helpers/index.js";
+import path from "node:path";
+import { cwd } from "node:process";
+
+const projectRootPath = path.join(cwd(), "..");
 
 /**
  * @typedef {import("fastify").FastifyRequest} Request
  * @typedef {import("fastify").FastifyReply} Reply
  */
 
 /**
+ * Get framework versions.
  * @param {Request} request
  * @param {Reply} reply
  */
-export async function getFrameworksVersions(_request, reply) {
+export async function getFrameworksVersions(request, reply) {
   performance.mark("Start");
 
   const frameworks = await loadFrameworkVersions();
@@ -26,3 +33,14 @@ export async function getFrameworksVersions(_request, reply) {
 
   return reply.send(frameworks);
 }
+
+/**
+ * Get and serve the index HTML page.
+ * @param {Request} request
+ * @param {Reply} reply
+ */
+export async function generateAndServeIndex(request, reply) {
+  await generateIndexHtml();
+
+  return reply.sendFile("index.html", projectRootPath);
+}

server/src/frameworks/frameworksControllers.js

@@ -1,5 +1,5 @@
-import path from "path";
-import fs from "fs";
+import path from "node:path";
+import * as fs from "node:fs";
 
 import { frameworksDirectory } from "../config/directories.js";
 import { buildFrameworkVersionString, copyProps } from "./helpers/index.js";

server/src/frameworks/frameworksServices.js

@@ -0,0 +1,52 @@
+import * as fs from "node:fs";
+import path from "node:path";
+import { cwd } from "node:process";
+import ejs from "ejs";
+
+import { loadFrameworkVersions } from "../frameworksServices.js";
+
+const projectRootPath = path.join(cwd(), "..");
+
+/**
+ * Options for generating the index HTML page.
+ * @typedef GenerateIndexHtmlOptions
+ * @property {boolean} minify
+ */
+
+/**
+ * Generate the index HTML page.
+ * @param {GenerateIndexHtmlOptions} options
+ */
+export async function generateIndexHtml(options = { minify: true }) {
+  const { minify } = options;
+  const frameworks = await loadFrameworkVersions();
+
+  for (const framework of frameworks) {
+    framework.uri = `frameworks/${framework.type}/${framework.directory}${
+      framework.customURL || ""
+    }`;
+  }
+
+  frameworks.sort((a, b) =>
+    a.frameworkVersionString.localeCompare(b.frameworkVersionString),
+  );
+
+  const templateFilePath = path.join("templates", "index.ejs");
+  const templateContent = fs.readFileSync(templateFilePath, "utf8");
+
+  const renderedContent = ejs.render(templateContent, {
+    frameworks,
+  });
+
+  let outputContent = minify
+    ? renderedContent
+        .replace(/\n/g, "")
+        .replace(/\s+/g, " ")
+        .replace(/(<[^>]*>)\s+/g, "$1")
+        .replace(/\s*>\s*/g, ">") // Removes line wraps and spaces;
+    : renderedContent;
+
+  fs.writeFileSync(path.resolve(projectRootPath, "index.html"), outputContent, {
+    encoding: "utf8",
+  });
+}

server/src/frameworks/helpers/generateIndexHtml.js

@@ -1,2 +1,3 @@
 export { copyProps } from "./copyProps.js";
 export { buildFrameworkVersionString } from "./buildFrameworkVersionString.js";
+export { generateIndexHtml } from "./generateIndexHtml.js";

server/src/frameworks/helpers/index.js

@@ -1,9 +1,10 @@
 import fastifyStatic from "@fastify/static";
-import path from "path";
-import { cwd } from "process";
+import path from "node:path";
+import { cwd } from "node:process";
 
 import { isCSPEnabled } from "../csp/cspControllers.js";
 import { frameworksDirectory } from "../config/directories.js";
+import { generateAndServeIndex } from "../frameworks/frameworksControllers.js";
 
 const projectRootPath = path.join(cwd(), "..");
 
@@ -37,9 +38,8 @@ async function routes(fastify) {
     decorateReply: false,
   });
 
-  fastify.get("/index.html", async (_request, reply) => {
-    return reply.sendFile("index.html", projectRootPath);
-  });
+  fastify.get("/", generateAndServeIndex);
+  fastify.get("/index.html", generateAndServeIndex);
 }
 
 export default routes;

server/src/static/staticRouter.js

@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+  <head>
+    <title>JS-Frameworks Benchmark</title>
+    <meta charset="UTF-8" />
+    <link href="css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Choose a framework:</h3>
+        </div>
+        <div class="panel-body">
+          <ul class="nav nav-pills nav-stacked">
+            <% frameworks.forEach(framework => { %>
+            <li>
+              <a href="/<%= framework.uri %>/index.html"
+                ><span
+                  class="glyphicon glyphicon-arrow-right"
+                  aria-hidden="true"
+                ></span>
+                <%= framework.frameworkVersionString %>
+              </a>
+            </li>
+            <% }); %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>