From 6dca2f1c036a499c1899d5e9c2364b5aaba4bfc4 Mon Sep 17 00:00:00 2001
From: Ilya Kreymer <ikreymer@users.noreply.github.com>
Date: Tue, 5 Sep 2023 20:10:21 -0400
Subject: [PATCH] =?UTF-8?q?supports=20overriding=20the=20replayweb.page=20?=
 =?UTF-8?q?version=20without=20having=20to=20be=20r=E2=80=A6=20(#1122)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* supports overriding the replayweb.page version without having to be rebuild frontend image:
- ensures 'rwp_base_url' from helm chart is passed to nginx
- ensures both ui.js and sw.js are loaded based on nginx environment variable, not hard-coded
- ui.js loaded via redirect from new /replay/ui.js path
- pin RWP to known working release in default values.yaml
- remove RWP_BASE_URL from Dockerfile, no longer needed, set via chart env var
- set default RWP_BASE_URL for devserver to use CDN
- set RWP version to 1.8.11
---
 chart/templates/frontend.yaml   |  3 +++
 chart/values.yaml               |  2 +-
 frontend/Dockerfile             |  9 +--------
 frontend/config/dev-server.js   | 10 ++++++++--
 frontend/frontend.conf.template |  5 +++++
 frontend/src/index.ejs          |  2 +-
 frontend/webpack.config.js      |  1 -
 7 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/chart/templates/frontend.yaml b/chart/templates/frontend.yaml
index 1bee7fc4..f3a3d39a 100644
--- a/chart/templates/frontend.yaml
+++ b/chart/templates/frontend.yaml
@@ -44,6 +44,9 @@ spec:
             - name: NGINX_ENTRYPOINT_WORKER_PROCESSES_AUTOTUNE
               value: "1"
 
+            - name: RWP_BASE_URL
+              value: {{ .Values.rwp_base_url }}
+
             {{- if .Values.minio_local }}
             - name: LOCAL_MINIO_HOST
               value: "{{ .Values.minio_host }}"
diff --git a/chart/values.yaml b/chart/values.yaml
index 4aaa83f0..e1d62f0b 100644
--- a/chart/values.yaml
+++ b/chart/values.yaml
@@ -72,7 +72,7 @@ allow_dupe_invites: "0"
 invite_expire_seconds: 604800
 
 # base url for replayweb.page
-rwp_base_url: "https://replayweb.page/"
+rwp_base_url: "https://cdn.jsdelivr.net/npm/replaywebpage@1.8.11/"
 
 superuser:
   # set this to enable a superuser admin
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 6447bdfa..e3ce8008 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,6 +1,4 @@
 # syntax=docker/dockerfile:1.4
-ARG RWP_BASE_URL=https://cdn.jsdelivr.net/npm/replaywebpage/
-
 FROM --platform=$BUILDPLATFORM docker.io/library/node:16 as build_deps
 
 WORKDIR /app
@@ -27,12 +25,10 @@ COPY --link src ./src/
 ARG GIT_COMMIT_HASH
 ARG GIT_BRANCH_NAME
 ARG VERSION
-ARG RWP_BASE_URL
 
 ENV GIT_COMMIT_HASH=${GIT_COMMIT_HASH} \
     GIT_BRANCH_NAME=${GIT_BRANCH_NAME} \
-    VERSION=${VERSION} \
-    RWP_BASE_URL=${RWP_BASE_URL}
+    VERSION=${VERSION}
 
 # Prevent Docker image including node_modules to save space
 RUN yarn build && \
@@ -40,9 +36,6 @@ RUN yarn build && \
 
 FROM docker.io/library/nginx:1.23.2
 
-ARG RWP_BASE_URL
-ENV RWP_BASE_URL=${RWP_BASE_URL}
-
 COPY --link --from=build_deps /app/dist /usr/share/nginx/html
 
 #COPY ./nginx.conf /etc/nginx/nginx.conf
diff --git a/frontend/config/dev-server.js b/frontend/config/dev-server.js
index e20c86be..5e09af67 100644
--- a/frontend/config/dev-server.js
+++ b/frontend/config/dev-server.js
@@ -1,8 +1,9 @@
 const path = require("path");
 require(path.resolve(process.cwd(), "./webpack.config.js"));
 
-// 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/";
+// 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(
@@ -35,5 +36,10 @@ module.exports = {
       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");
+    });
   },
 };
diff --git a/frontend/frontend.conf.template b/frontend/frontend.conf.template
index 9b1f4968..49ce2747 100644
--- a/frontend/frontend.conf.template
+++ b/frontend/frontend.conf.template
@@ -42,6 +42,11 @@ server {
       return 200 'importScripts("${RWP_BASE_URL}sw.js");';
     }
 
+    location /replay/ui.js {
+      add_header Content-Type application/javascript;
+      return 307 ${RWP_BASE_URL}ui.js;
+    }
+
     # used by docker only: k8s deployment handles /api directly via ingress
     location /api/ {
       proxy_pass http://${BACKEND_HOST}:8000;
diff --git a/frontend/src/index.ejs b/frontend/src/index.ejs
index 49cb07a9..3b8f35e8 100644
--- a/frontend/src/index.ejs
+++ b/frontend/src/index.ejs
@@ -8,7 +8,7 @@
     />
     <title>Browsertrix Cloud</title>
     <base href="/" />
-    <script defer src="<%= rwp_base_url %>ui.js"></script>
+    <script defer src="/replay/ui.js"></script>
     <script
       src="https://browser.sentry-cdn.com/5.5.0/bundle.min.js"
       crossorigin="anonymous"
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 88a47dfc..3907f4ae 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -126,7 +126,6 @@ const main = {
     new HtmlWebpackPlugin({
       template: "src/index.ejs",
       templateParameters: {
-        rwp_base_url: RWP_BASE_URL,
         glitchtip_dsn: process.env.GLITCHTIP_DSN || "",
         environment: isDevServer ? "development" : "production",
         version,