supports overriding the replayweb.page version without having to be r… (#1122)

* 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

@@ -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 }}"

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

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} \
+    VERSION=${VERSION}
-    RWP_BASE_URL=${RWP_BASE_URL}
 
 # 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

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
+// for testing: for prod, using the version specified in Helm values.yaml
-const RWP_BASE_URL = process.env.RWP_BASE_URL || "https://replayweb.page/";
+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");
+    });
   },
 };

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;

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"

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,