hack base url

.env.testing

@@ -34,3 +34,5 @@ BUILD_ALWAYS_ALLOW_ROBOTS=true
 REACT_APP_ENABLE_PLUS=true
 
 REACT_APP_FXA_SIGNIN_URL=/users/fxa/login/authenticate/
+
+BASE_URL="https://developer.mozilla.org"

client/config/env.js

@@ -40,7 +40,7 @@ process.env.NODE_PATH = (process.env.NODE_PATH || "")
 // injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
-function getClientEnvironment(publicUrl, baseUrl) {
+function getClientEnvironment(publicUrl) {
   const raw = Object.keys(process.env)
     .filter((key) => REACT_APP.test(key))
     .reduce(
@@ -57,7 +57,6 @@ function getClientEnvironment(publicUrl, baseUrl) {
         // This should only be used as an escape hatch. Normally you would put
         // images into the `src` and `import` them in code to get their paths.
         PUBLIC_URL: publicUrl,
-        BASE_URL: baseUrl,
         // We support configuring the sockjs pathname during development.
         // These settings let a developer run multiple simultaneous projects.
         // They are used as the connection `hostname`, `pathname` and `port`

client/config/paths.js

@@ -22,12 +22,6 @@ const publicUrlOrPath = getPublicUrlOrPath(
   process.env.PUBLIC_URL
 );
 
-const baseUrl = getPublicUrlOrPath(
-  process.env.NODE_ENV === "development",
-  appPackage.homepage,
-  process.env.BASE_URL || "/"
-);
-
 const buildPath = process.env.BUILD_PATH || "build";
 
 const moduleFileExtensions = [
@@ -77,7 +71,6 @@ const config = {
   appTsBuildInfoFile: resolveApp("../node_modules/.cache/tsconfig.tsbuildinfo"),
   swSrc: resolveModule(resolveApp, "src/service-worker"),
   publicUrlOrPath,
-  baseUrl,
   libsPath: resolveApp("../libs"),
   moduleFileExtensions,
 };

client/config/webpack.config.js

@@ -95,10 +95,7 @@ function config(webpackEnv) {
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
   // Get environment variables to inject into our app.
-  const env = getClientEnvironment(
-    paths.publicUrlOrPath.replace(/\/$/, ""),
-    paths.baseUrl.replace(/\/$/, "")
-  );
+  const env = getClientEnvironment(paths.publicUrlOrPath.replace(/\/$/, ""));
 
   const shouldUseReactRefresh = env.raw.FAST_REFRESH;
 

client/scripts/postprocess-client-build.js

@@ -26,6 +26,9 @@ export async function hashSomeStaticFilesForClientBuild(buildRoot) {
       if (element.attribs.property !== "og:image") {
         return;
       }
+      // This is a can of worms. Using from environment for now.
+      // We need to use an absolute URL for "og:image".
+      hrefPrefix = process.env.BASE_URL || "";
       href = element.attribs.content;
       attributeKey = "content";
     } else {

testing/tests/index.test.ts

@@ -49,6 +49,7 @@ test("all favicons on the home page", () => {
   // Check that the og:image resolves
   $('meta[property="og:image"]').each((i, element) => {
     const url = $(element).attr("content");
+    console.log("og:image", url);
     const href = new URL(url).pathname;
     // There should always be a 8 character hash in the href
     expect(/\.[a-f0-9]{8}\./.test(href)).toBeTruthy();