From 5963dcce0e88b8d3aedaba56a93ec4b93cf073a1 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 1 Feb 2022 12:26:56 -0800
Subject: [PATCH] fix(viewer): use correct publicPath, replace process.env
 (#753)

---
 packages/server/package.json |  4 ++--
 scripts/build-app.js         | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/server/package.json b/packages/server/package.json
index 3614181cc..2586a24a6 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -13,8 +13,8 @@
   "scripts": {
     "clean": "rm -rf ./dist ./storybook-static",
     "build": "npm run build:esbuild && npm run build:storybook",
-    "build:esbuild": "node ../../scripts/build-app.js build ./src/ui/index.html ./dist",
-    "build:watch": "node ../../scripts/build-app.js watch ./src/ui/index.html ./dist",
+    "build:esbuild": "node ../../scripts/build-app.js build ./src/ui/index.html ./dist /app",
+    "build:watch": "node ../../scripts/build-app.js watch ./src/ui/index.html ./dist /app",
     "build:source-map-explorer": "npm run clean && npm run build && ../../scripts/source-map-explorer.sh",
     "build:storybook": "build-storybook",
     "start:storybook": "start-storybook -p 6006"
diff --git a/scripts/build-app.js b/scripts/build-app.js
index 4cd2063a3..7a89344b8 100644
--- a/scripts/build-app.js
+++ b/scripts/build-app.js
@@ -12,6 +12,7 @@ const esbuild = require('esbuild');
 const command = process.argv[2];
 const entryPoint = process.argv[3];
 const outdir = process.argv[4];
+const publicPath = process.argv[5] || '/';
 
 if (!command || !entryPoint || !outdir) {
   throw new Error('missing args');
@@ -32,6 +33,10 @@ function insertCollectedStyles(result) {
   if (stylesheets.length === 0) return;
   if (stylesheets.length > 1) throw new Error('expected at most one generated stylesheet');
 
+  const href = publicPath === '/' ?
+    path.relative(outdir, stylesheet) :
+    `/app/${path.relative(outdir, stylesheet)}`;
+
   const htmls = Object.keys(result.metafile.outputs).filter(o => o.endsWith('.html'));
   const html = htmls[0];
   if (htmls.length !== 1) throw new Error('expected exactly one generated html');
@@ -40,8 +45,7 @@ function insertCollectedStyles(result) {
   const htmlText = fs.readFileSync(html, 'utf-8');
   if (!htmlText.includes(needle)) throw new Error(`expected ${needle} in html`);
 
-  const newHtmlText =
-    htmlText.replace(needle, `<link rel="stylesheet" href="/app/${path.relative(outdir, stylesheet)}" />`);
+  const newHtmlText = htmlText.replace(needle, `<link rel="stylesheet" href="${href}" />`);
   fs.writeFileSync(html, newHtmlText);
 }
 
@@ -49,6 +53,7 @@ function insertCollectedStyles(result) {
  * @param {esbuild.BuildResult} result
  */
  function fixScriptSrc(result) {
+  if (publicPath === '/') return;
   if (!result.metafile) throw new Error('expected metafile');
 
   const htmls = Object.keys(result.metafile.outputs).filter(o => o.endsWith('.html'));
@@ -81,7 +86,10 @@ async function main() {
       '.woff': 'file',
       '.woff2': 'file',
     },
-    publicPath: '/app',
+    define: {
+      'process.env.VIEWER_ORIGIN': JSON.stringify(process.env.VIEWER_ORIGIN || ''),
+    },
+    publicPath,
     bundle: true,
     outdir,
     minify: true,