Reorganize frontend build files (#1803)

Refactors config files so that `/config` can be included in Docker build.

frontend/Dockerfile

@@ -6,6 +6,7 @@ COPY yarn.lock package.json ./
 # Uses a cache mount for the Yarn cache so that it's not included in subsequent steps
 RUN --mount=type=cache,target=/root/.yarn YARN_CACHE_FOLDER=/root/.yarn yarn --production --frozen-lockfile --ignore-optional --network-timeout 1000000
 
+COPY --link config ./config/
 COPY --link lit-localize.json \
   postcss.config.js \
   tailwind.config.js \
@@ -18,7 +19,6 @@ COPY --link lit-localize.json \
   ./
 
 COPY --link src ./src/
-COPY --link plugins ./plugins/
 
 # Build variables used to show current app version
 # in the UI. Note that this will invalidate all

frontend/config/dev-server.js

@@ -1,52 +0,0 @@
-/* eslint-env node */
-const path = require("path");
-require(path.resolve(process.cwd(), "./webpack.config.js"));
-
-// for testing: for prod, using the version specified in Helm values.yaml
-const RWP_BASE_URL =
-  process.env.RWP_BASE_URL || "https://cdn.jsdelivr.net/npm/replaywebpage/";
-
-if (!process.env.API_BASE_URL) {
-  throw new Error(
-    "To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'",
-  );
-}
-
-const devBackendUrl = new URL(process.env.API_BASE_URL);
-
-module.exports = {
-  proxy: {
-    "/api": {
-      target: devBackendUrl.href,
-      headers: {
-        Host: devBackendUrl.host,
-      },
-      ws: true,
-    },
-
-    "/data": {
-      target: devBackendUrl.href,
-      headers: {
-        Host: devBackendUrl.host,
-      },
-    },
-  },
-  // Serve replay service worker file
-  onBeforeSetupMiddleware: (server) => {
-    server.app.get("/replay/sw.js", (req, res) => {
-      res.set("Content-Type", "application/javascript");
-      res.send(`importScripts("${RWP_BASE_URL}sw.js")`);
-    });
-
-    server.app.get("/replay/ui.js", (req, res) => {
-      res.set("Content-Type", "application/javascript");
-      res.redirect(307, RWP_BASE_URL + "ui.js");
-    });
-
-    // serve a 404 page for /replay/ path, as that should be taken over by RWP
-    server.app.get("/replay/*", (req, res) => {
-      res.set("Content-Type", "application/javascript");
-      res.status(404).send(`{"error": "placeholder_for_replay"}`);
-    });
-  },
-};

frontend/scripts/serve.js

@@ -1,17 +1,26 @@
 // Serve app locally without building with webpack, e.g. for e2e
+const path = require("path");
+
 const connectHistoryApiFallback = require("connect-history-api-fallback");
 const express = require("express");
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
-const devServerConfig = require("../config/dev-server.js");
+const dotEnvPath = path.resolve(process.cwd(), ".env.local");
+require("dotenv").config({
+  path: dotEnvPath,
+});
+
+const [devConfig] = require("../webpack.dev.js");
 
 const app = express();
 
-devServerConfig.onBeforeSetupMiddleware({ app });
+const { devServer } = devConfig;
+
+devServer.onBeforeSetupMiddleware({ app });
 
 app.use("/", express.static("dist"));
-Object.keys(devServerConfig.proxy).forEach((path) => {
+Object.keys(devServer.proxy).forEach((path) => {
-  app.use(path, createProxyMiddleware(devServerConfig.proxy[path]));
+  app.use(path, createProxyMiddleware(devServer.proxy[path]));
 });
 app.use(connectHistoryApiFallback());
 

frontend/tailwind.config.js

@@ -1,7 +1,7 @@
 const { tailwindTransform } = require("postcss-lit");
 
-const containPlugin = require("./plugins/contain");
+const containPlugin = require("./config/tailwind/plugins/contain");
-const contentVisibilityPlugin = require("./plugins/content-visibility");
+const contentVisibilityPlugin = require("./config/tailwind/plugins/content-visibility");
 
 const PRIMARY_COLOR = "#0891B2";
 

frontend/webpack.config.js

@@ -24,9 +24,6 @@ require("dotenv").config({
   path: dotEnvPath,
 });
 
-// for testing: for prod, the Dockerfile should have the official prod version used
-const _RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
-
 const WEBSOCKET_HOST =
   isDevServer && process.env.API_BASE_URL
     ? new URL(process.env.API_BASE_URL).host

frontend/webpack.dev.js

@@ -5,7 +5,6 @@ const path = require("path");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const { merge } = require("webpack-merge");
 
-const devServerConfig = require("./config/dev-server.js");
 const baseConfigs = require("./webpack.config.js");
 const [main, vnc] = baseConfigs;
 
@@ -15,6 +14,18 @@ const shoelaceAssetsSrcPath = path.resolve(
 );
 const shoelaceAssetsPublicPath = "shoelace/assets";
 
+if (!process.env.API_BASE_URL) {
+  throw new Error(
+    "To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'",
+  );
+}
+
+// for testing: for prod, using the version specified in Helm values.yaml
+const RWP_BASE_URL =
+  process.env.RWP_BASE_URL || "https://cdn.jsdelivr.net/npm/replaywebpage/";
+
+const devBackendUrl = new URL(process.env.API_BASE_URL);
+
 module.exports = [
   merge(main, {
     devtool: "eval-cheap-source-map",
@@ -31,8 +42,40 @@ module.exports = [
         },
       ],
       historyApiFallback: true,
-      proxy: devServerConfig.proxy,
+      proxy: {
-      onBeforeSetupMiddleware: devServerConfig.onBeforeSetupMiddleware,
+        "/api": {
+          target: devBackendUrl.href,
+          headers: {
+            Host: devBackendUrl.host,
+          },
+          ws: true,
+        },
+
+        "/data": {
+          target: devBackendUrl.href,
+          headers: {
+            Host: devBackendUrl.host,
+          },
+        },
+      },
+      // Serve replay service worker file
+      onBeforeSetupMiddleware: (server) => {
+        server.app?.get("/replay/sw.js", (req, res) => {
+          res.set("Content-Type", "application/javascript");
+          res.send(`importScripts("${RWP_BASE_URL}sw.js")`);
+        });
+
+        server.app?.get("/replay/ui.js", (req, res) => {
+          res.set("Content-Type", "application/javascript");
+          res.redirect(307, RWP_BASE_URL + "ui.js");
+        });
+
+        // serve a 404 page for /replay/ path, as that should be taken over by RWP
+        server.app?.get("/replay/*", (req, res) => {
+          res.set("Content-Type", "application/javascript");
+          res.status(404).send(`{"error": "placeholder_for_replay"}`);
+        });
+      },
       port: 9870,
     },
     cache: {