From 78612703550c3cdb5681656980f109d679b93e1e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Sep 2021 14:42:31 -0500
Subject: [PATCH 1/2] Build config: add FE_BUILD_DIR to configure the output
 path

---
 .gitlab-ci.yml              |  2 +-
 app/soapbox/build_config.js | 13 +++++++++----
 webpack/configuration.js    |  9 ++++++---
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 963e63284..bd83ffd0b 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -88,9 +88,9 @@ pages:
   stage: deploy
   script:
     - yarn build
-    - mv static public
   variables:
     NODE_ENV: production
+    FE_BUILD_DIR: public
   artifacts:
     paths:
     - public
diff --git a/app/soapbox/build_config.js b/app/soapbox/build_config.js
index 53d05170f..5748bd371 100644
--- a/app/soapbox/build_config.js
+++ b/app/soapbox/build_config.js
@@ -9,6 +9,7 @@ const { trim } = require('lodash');
 const {
   BACKEND_URL,
   FE_BASE_PATH,
+  FE_BUILD_DIR,
 } = process.env;
 
 const sanitizeURL = url => {
@@ -19,9 +20,12 @@ const sanitizeURL = url => {
   }
 };
 
-// Run Soapbox FE from a subdirectory.
-const getFeBasePath = () => {
-  return `/${trim(FE_BASE_PATH, '/')}`;
+const sanitizeBasename = path => {
+  return `/${trim(path, '/')}`;
+};
+
+const sanitizePath = path => {
+  return trim(path, '/');
 };
 
 // JSON.parse/stringify is to emulate what @preval is doing and avoid any
@@ -30,5 +34,6 @@ const sanitize = obj => JSON.parse(JSON.stringify(obj));
 
 module.exports = sanitize({
   BACKEND_URL: sanitizeURL(BACKEND_URL),
-  FE_BASE_PATH: getFeBasePath(),
+  FE_BASE_PATH: sanitizeBasename(FE_BASE_PATH),
+  FE_BUILD_DIR: sanitizePath(FE_BUILD_DIR) || 'static',
 });
diff --git a/webpack/configuration.js b/webpack/configuration.js
index eb0442989..439a57ce1 100644
--- a/webpack/configuration.js
+++ b/webpack/configuration.js
@@ -1,12 +1,15 @@
 const { join } = require('path');
 const { env } = require('process');
 
-const { FE_BASE_PATH } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
+const {
+  FE_BASE_PATH,
+  FE_BUILD_DIR,
+} = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
 
 const settings = {
   source_path: 'app',
-  public_root_path: 'static',
-  test_root_path: 'static-test',
+  public_root_path: FE_BUILD_DIR,
+  test_root_path: `${FE_BUILD_DIR}-test`,
   cache_path: 'tmp/cache/webpacker',
   resolved_paths: [],
   static_assets_extensions: [ '.jpg', '.jpeg', '.png', '.tiff', '.ico', '.svg', '.gif', '.eot', '.otf', '.ttf', '.woff', '.woff2', '.mp3', '.ogg', '.oga' ],

From 1687c5a8fbfea56e4a083e78758d56937ecd6873 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 3 Sep 2021 15:33:32 -0500
Subject: [PATCH 2/2] Docs: document build variables

---
 docs/development/build-config.md | 49 ++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 docs/development/build-config.md

diff --git a/docs/development/build-config.md b/docs/development/build-config.md
new file mode 100644
index 000000000..a1e331e38
--- /dev/null
+++ b/docs/development/build-config.md
@@ -0,0 +1,49 @@
+# Build Configuration
+
+When compiling Soapbox FE, environment variables may be passed to change the build itself.
+For example:
+
+```sh
+NODE_ENV="production" FE_BUILD_DIR="public" FE_BASE_PATH="/soapbox" yarn build
+```
+
+The following build variables are available:
+
+### `NODE_ENV`
+
+The environment to build Soapbox FE for.
+
+Options:
+- `"production"` - For live sites
+- `"development"` - For local development
+- `"test"` - Bootstraps test environment
+
+Default: `"development"`
+
+It's recommended to always build in `"production"` mode for live sites.
+
+### `FE_BUILD_DIR`
+
+The folder to put build files in. This is mostly useful for CI tasks like GitLab Pages.
+
+Options:
+- Any directory name, eg `"public"`
+
+Default: `"static"`
+
+### `FE_BASE_PATH`
+
+Subdirectory to host Soapbox FE out of.
+When hosting on a subdirectory, you must create a custom build for it.
+This option will set the imports in `index.html`, and the basename for routes in React.
+
+Options:
+- Any path, eg `"/soapbox"` or `"/fe/soapbox"`
+
+Default: `"/"`
+
+For example, if you want to host the build on `https://gleasonator.com/soapbox`, you can compile it like this:
+
+```sh
+NODE_ENV="production" FE_BASE_PATH="/soapbox" yarn build
+```