Add optional BASE_PREFIX to serve the site under a sub-directory (#630)

* Add optional BASE_PREFIX to serve the site under a sub-directory

Introduce a BASE_PREFIX build option that prepends a path segment to each
flavor's BASE_HREF, so the whole multi-network site can be served from a
sub-directory (e.g. BASE_PREFIX=preview -> /preview/, /preview/signet/,
/preview/liquid/, ...) instead of the domain root.

The prefix is applied after the flavor config resolves its per-network
BASE_HREF, so the network paths are preserved. API_URL is resolved before
the prefix is applied and is left un-prefixed, so a prefixed build keeps
talking to the same API backend.

Cross-network links that are absolute (the network switcher and the
Explorer API tab) are routed through the prefix so they stay within the
current deployment root. With no BASE_PREFIX set the output is unchanged.

* navbar: make Explorer API link relative like its siblings

The Explorer API link was the only absolute navbar link (/explorer-api).
The router strips the full BASE_HREF before matching route('/explorer-api'),
so under a sub-directory or non-root network the absolute path never
matches. Use a relative href, consistent with the Dashboard/Blocks/
Transactions links, so it resolves against BASE_HREF and stays within the
current network and deployment root.

Author: DeviaVir

README.md

@@ -86,6 +86,7 @@ All options are optional.
 
 - `NODE_ENV` - set to `production` to enable js minification, or to `development` to disable (defaults to `production`)
 - `BASE_HREF` - base href for user interface (defaults to `/`, change if not served from the root directory)
+- `BASE_PREFIX` - optional path prefix prepended to each flavor's `BASE_HREF`, to serve the whole multi-network site under a sub-directory (e.g. `BASE_PREFIX=preview` serves `/preview/`, `/preview/signet/`, ...). `API_URL` is left un-prefixed so a prefixed build still uses the same backend
 - `STATIC_ROOT` - root for static assets (defaults to `BASE_HREF`, change to load static assets from a different server)
 - `API_URL` - URL for HTTP REST API (defaults to `/api`, change if the API is available elsewhere)
 - `CANONICAL_URL` - absolute base url for user interface (optional, only required for opensearch and canonical link tags)

build.sh

@@ -9,6 +9,16 @@ export NODE_ENV=${NODE_ENV:=production}
 export BASE_HREF=${BASE_HREF:-/}
 export API_URL=${API_URL:-"${BASE_HREF}api"}
 
+# Optional path prefix for serving the whole site under a sub-directory (e.g. a preview
+# deploy keyed by branch name). Applied *after* the flavor sets its per-network BASE_HREF,
+# so the network paths are preserved: / -> /$BASE_PREFIX/, /signet/ -> /$BASE_PREFIX/signet/.
+# API_URL is resolved above, before this, so it keeps pointing at the un-prefixed network
+# API and a prefixed build still talks to the same backend.
+if [ -n "$BASE_PREFIX" ]; then
+  export BASE_HREF="/${BASE_PREFIX#/}${BASE_HREF}"
+  export BASE_PREFIX="/${BASE_PREFIX#/}"
+fi
+
 mkdir -p $DEST
 rm -rf $DEST/*
 

client/src/views/nav-toggle.js

@@ -1,6 +1,9 @@
 import { nativeAssetId } from '../const'
 
 const staticRoot = process.env.STATIC_ROOT || ''
+// Prefix for cross-network links so they stay within the current deployment root when the
+// whole site is served under a sub-directory (BASE_PREFIX). Empty for a root deployment.
+const siteRoot = process.env.BASE_PREFIX || ''
 const hasCam = process.browser && navigator.mediaDevices && navigator.mediaDevices.getUserMedia
 
 export default () =>
@@ -40,10 +43,10 @@ export default () =>
         <div className="link-list">
           <h4 className="menu-title font-h5">Explorers</h4>
           <ul className="font-p3">
-            <li><a href="/" rel="external">Bitcoin</a></li>
-            <li><a href="/liquid/" rel="external">Liquid Network</a></li>
-            <li><a href="/testnet/" rel="external" target="_blank">Bitcoin Testnet</a></li>
-            <li><a href="/liquidtestnet/" rel="external" target="_blank">Liquid Testnet</a></li>
+            <li><a href={`${siteRoot}/`} rel="external">Bitcoin</a></li>
+            <li><a href={`${siteRoot}/liquid/`} rel="external">Liquid Network</a></li>
+            <li><a href={`${siteRoot}/testnet/`} rel="external" target="_blank">Bitcoin Testnet</a></li>
+            <li><a href={`${siteRoot}/liquidtestnet/`} rel="external" target="_blank">Liquid Testnet</a></li>
           </ul>
           <h4 className="menu-title font-h5">Developer Tools</h4>
           <ul className="font-p3">

client/src/views/navbar.js

@@ -13,7 +13,7 @@ export default S =>
             <a href="blocks/recent" class={{ active: S.activeTab == 'recentBlocks' }}>Blocks</a>
             <a href="tx/recent" class={{ active: S.activeTab == 'recentTxs' }}>Transactions</a>
             { process.env.IS_ELEMENTS ? <a href="assets" class={{ active: S.activeTab == 'assets' }}>Assets<sup className="highlight"></sup></a> : "" }
-            <a href="/explorer-api" class={{ active: S.activeTab == 'apiLanding' }}>Explorer API</a>
+            <a href="explorer-api" class={{ active: S.activeTab == 'apiLanding' }}>Explorer API</a>
         </div>
       { menu(S) }
   </nav>

client/src/views/network-selection.js

@@ -2,6 +2,10 @@ const items = process.env.MENU_ITEMS && JSON.parse(process.env.MENU_ITEMS),
   active = process.env.MENU_ACTIVE;
 
 const staticRoot = process.env.STATIC_ROOT || "";
+// Keep cross-network links within the current deployment root when the site is served under a
+// sub-directory (BASE_PREFIX). No-op for a root deployment (empty prefix).
+const siteRoot = process.env.BASE_PREFIX || "";
+const withRoot = (url) => (siteRoot && url && url.charAt(0) === "/" ? siteRoot + url : url);
 const itemEntries = items ? Object.entries(items) : [];
 const activeName = active || (itemEntries[0] && itemEntries[0][0]);
 const activeId = activeName && activeName.replace(/ /g, "");
@@ -43,7 +47,7 @@ export default ({ t, page }) => (
                   return (
                     <a
                       id={name.replace(/ /g, "")}
-                      href={url}
+                      href={withRoot(url)}
                       className={`network-hover-menu-option-container ${name.replace(/ /g, "").toLowerCase()} ${name === activeName ? "active" : ""}`}
                       rel="external"
                     >