[CORL-127] Custom CSS (#2194)

* feat: moved html-webpack-plugin to custom server templates in production

* fix: fixed templates

* fix: removed sri for the time being

* fix: fixed up tests for new field name

src/core/server/app/router/client.ts

@@ -1,12 +1,20 @@
 import express from "express";
+import { minify } from "html-minifier";
 
 import { cacheHeadersMiddleware } from "talk-server/app/middleware/cacheHeaders";
+import { Entrypoint } from "../helpers/entrypoints";
 
 export interface ClientTargetHandlerOptions {
   /**
-   * view is the name of the template to render.
+   * entrypoint is the entrypoint entry to load.
    */
-  view: string;
+  entrypoint: Entrypoint;
+
+  /**
+   * enableCustomCSS will insert the custom CSS into the template if it is
+   * available on the Tenant.
+   */
+  enableCustomCSS?: boolean;
 
   /**
    * cacheDuration is the cache duration that a given request should be cached for.
@@ -22,7 +30,8 @@ export interface ClientTargetHandlerOptions {
 
 export function createClientTargetRouter({
   staticURI,
-  view,
+  entrypoint,
+  enableCustomCSS = false,
   cacheDuration = "1h",
 }: ClientTargetHandlerOptions) {
   // Create a router.
@@ -32,7 +41,25 @@ export function createClientTargetRouter({
   router.use(cacheHeadersMiddleware(cacheDuration));
 
   // Wildcard display all the client routes under the provided prefix.
-  router.get("/*", (req, res) => res.render(view, { staticURI }));
+  router.get("/*", (req, res, next) =>
+    res.render(
+      "client",
+      { staticURI, entrypoint, enableCustomCSS },
+      (err, html) => {
+        if (err) {
+          return next(err);
+        }
+
+        // Send back the HTML minified.
+        res.send(
+          minify(html, {
+            removeComments: true,
+            collapseWhitespace: true,
+          })
+        );
+      }
+    )
+  );
 
   return router;
 }

src/core/server/app/router/index.ts

@@ -1,4 +1,5 @@
 import express, { Router } from "express";
+import path from "path";
 
 import { AppOptions } from "talk-server/app";
 import { noCacheMiddleware } from "talk-server/app/middleware/cacheHeaders";
@@ -9,6 +10,7 @@ import logger from "talk-server/logger";
 
 import { cspTenantMiddleware } from "talk-server/app/middleware/csp/tenant";
 import { tenantMiddleware } from "talk-server/app/middleware/tenant";
+import Entrypoints from "../helpers/entrypoints";
 import { createAPIRouter } from "./api";
 import { createClientTargetRouter } from "./client";
 
@@ -28,67 +30,89 @@ export async function createRouter(app: AppOptions, options: RouterOptions) {
 
   const staticURI = app.config.get("static_uri");
 
-  // Add the embed targets.
-  router.use(
-    "/embed/stream",
-    createClientTargetRouter({
-      staticURI,
-      view: "stream",
-    })
-  );
-  router.use(
-    "/embed/auth",
-    createClientTargetRouter({
-      staticURI,
-      view: "auth",
-      cacheDuration: false,
-    })
-  );
-  router.use(
-    "/embed/auth/callback",
-    createClientTargetRouter({
-      staticURI,
-      view: "auth-callback",
-      cacheDuration: false,
-    })
+  // Load the entrypoint manifest.
+  const manifest = path.join(
+    __dirname,
+    "..",
+    "..",
+    "..",
+    "..",
+    "..",
+    "dist",
+    "static",
+    "asset-manifest.json"
   );
+  const entrypoints = Entrypoints.fromFile(manifest);
 
-  // Add the standalone targets.
-  router.use(
-    "/admin",
-    // If we aren't already installed, redirect the user to the install page.
-    installedMiddleware({
-      tenantCache: app.tenantCache,
-    }),
-    createClientTargetRouter({
-      staticURI,
-      view: "admin",
-      cacheDuration: false,
-    })
-  );
-  router.use(
-    "/install",
-    // If we're already installed, redirect the user to the admin page.
-    installedMiddleware({
-      redirectIfInstalled: true,
-      redirectURL: "/admin",
-      tenantCache: app.tenantCache,
-    }),
-    createClientTargetRouter({
-      staticURI,
-      view: "install",
-      cacheDuration: false,
-    })
-  );
+  if (entrypoints) {
+    // Add the embed targets.
+    router.use(
+      "/embed/stream",
+      createClientTargetRouter({
+        staticURI,
+        enableCustomCSS: true,
+        entrypoint: entrypoints.get("stream"),
+      })
+    );
+    router.use(
+      "/embed/auth",
+      createClientTargetRouter({
+        staticURI,
+        cacheDuration: false,
+        entrypoint: entrypoints.get("auth"),
+      })
+    );
+    router.use(
+      "/embed/auth/callback",
+      createClientTargetRouter({
+        staticURI,
+        cacheDuration: false,
+        entrypoint: entrypoints.get("authCallback"),
+      })
+    );
 
-  // Handle the root path.
-  router.get(
-    "/",
-    // Redirect the user to the install page if they are not, otherwise redirect
-    // them to the admin.
-    installedMiddleware({ tenantCache: app.tenantCache }),
-    (req, res, next) => res.redirect("/admin")
-  );
+    // Add the standalone targets.
+    router.use(
+      "/admin",
+      // If we aren't already installed, redirect the user to the install page.
+      installedMiddleware({
+        tenantCache: app.tenantCache,
+      }),
+      createClientTargetRouter({
+        staticURI,
+        cacheDuration: false,
+        entrypoint: entrypoints.get("admin"),
+      })
+    );
+    router.use(
+      "/install",
+      // If we're already installed, redirect the user to the admin page.
+      installedMiddleware({
+        redirectIfInstalled: true,
+        redirectURL: "/admin",
+        tenantCache: app.tenantCache,
+      }),
+      createClientTargetRouter({
+        staticURI,
+        cacheDuration: false,
+        entrypoint: entrypoints.get("install"),
+      })
+    );
+
+    // Handle the root path.
+    router.get(
+      "/",
+      // Redirect the user to the install page if they are not, otherwise redirect
+      // them to the admin.
+      installedMiddleware({ tenantCache: app.tenantCache }),
+      (req, res, next) => res.redirect("/admin")
+    );
+  } else {
+    logger.warn(
+      { manifest },
+      "could not load the generated manifest, client routes will remain un-mounted"
+    );
+  }
 
   return router;
 }