fix(viewer): use correct publicPath, replace process.env (#753)

Author: connorjclark

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"

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,15 +45,15 @@ 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);
 }
 
 /**
  * @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,