Build config: subdirectory support

app/soapbox/build_config.js

@@ -4,7 +4,13 @@
  * @module soapbox/build_config
  */
 
-const { BACKEND_URL } = process.env;
+const { trimEnd } = require('lodash');
+
+const {
+  BACKEND_URL,
+  FE_BASE_PATH,
+  CI_PAGES_URL,
+} = process.env;
 
 const sanitizeURL = url => {
   try {
@@ -14,10 +20,29 @@ const sanitizeURL = url => {
   }
 };
 
+// Run Soapbox FE from a subdirectory.
+// If FE_BASE_PATH (eg '/web') is provided, prefer it.
+// For GitLab Pages builds, CI_PAGES_URL will be used.
+const getFeBasePath = () => {
+  if (FE_BASE_PATH) {
+    return trimEnd(FE_BASE_PATH, '/');
+  } else if (CI_PAGES_URL) {
+    try {
+      const { pathname } = new URL(CI_PAGES_URL);
+      return trimEnd(pathname, '/');
+    } catch {
+      return '/';
+    }
+  } else {
+    return '/';
+  }
+};
+
 // JSON.parse/stringify is to emulate what @preval is doing and avoid any
 // inconsistent behavior in dev mode
 const sanitize = obj => JSON.parse(JSON.stringify(obj));
 
 module.exports = sanitize({
   BACKEND_URL: sanitizeURL(BACKEND_URL),
+  FE_BASE_PATH: getFeBasePath(),
 });

app/soapbox/containers/soapbox.js

@@ -26,6 +26,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { generateThemeCss } from 'soapbox/utils/theme';
 import messages from 'soapbox/locales/messages';
+import { FE_BASE_PATH } from 'soapbox/build_config';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
@@ -142,7 +143,7 @@ class SoapboxMount extends React.PureComponent {
             ))}
             <meta name='theme-color' content={this.props.brandColor} />
           </Helmet>
-          <BrowserRouter>
+          <BrowserRouter basename={FE_BASE_PATH}>
             <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
               <Switch>
                 {!me && <Route exact path='/' component={PublicLayout} />}