Merge branch 'fe-build-dir' into 'develop'

Build config: add FE_BUILD_DIR

See merge request soapbox-pub/soapbox-fe!709

.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

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 sanitizeBasename = path => {
-const getFeBasePath = () => {
+  return `/${trim(path, '/')}`;
-  return `/${trim(FE_BASE_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',
 });

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
+```

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',
+  public_root_path: FE_BUILD_DIR,
-  test_root_path: 'static-test',
+  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' ],