Merge branch 'fe-basename' into 'develop'

Build config: subdirectory support

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

.gitlab-ci.yml

@@ -17,6 +17,7 @@ stages:
   - deploy
 
 before_script:
+  - env
   - yarn
 
 lint-js:

app/soapbox/build_config.js

@@ -4,7 +4,12 @@
  * @module soapbox/build_config
  */
 
-const { BACKEND_URL } = process.env;
+const { trim } = require('lodash');
+
+const {
+  BACKEND_URL,
+  FE_BASE_PATH,
+} = process.env;
 
 const sanitizeURL = url => {
   try {
@@ -14,10 +19,16 @@ const sanitizeURL = url => {
   }
 };
 
+// Run Soapbox FE from a subdirectory.
+const getFeBasePath = () => {
+  return `/${trim(FE_BASE_PATH, '/')}`;
+};
+
 // 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);
 
@@ -147,7 +148,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} />}

webpack/configuration.js

@@ -1,6 +1,8 @@
 const { join } = require('path');
 const { env } = require('process');
 
+const { FE_BASE_PATH } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
+
 const settings = {
   source_path: 'app',
   public_root_path: 'static',
@@ -14,7 +16,7 @@ const settings = {
 const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;
 
 const output = {
-  path: join(__dirname, '..', outputDir),
+  path: join(__dirname, '..', outputDir, FE_BASE_PATH),
 };
 
 module.exports = {

webpack/rules/babel-build-config.js

@@ -0,0 +1,19 @@
+const { resolve } = require('path');
+const { env } = require('../configuration');
+
+// This is a hack, used to force build_config @preval to recompile
+// https://github.com/kentcdodds/babel-plugin-preval/issues/19
+
+module.exports = {
+  test: resolve(__dirname, '../../app/soapbox/build_config.js'),
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        cacheDirectory: false,
+        cacheCompression: env.NODE_ENV === 'production',
+        compact: env.NODE_ENV === 'production',
+      },
+    },
+  ],
+};

webpack/rules/index.js

@@ -1,6 +1,7 @@
 const babel = require('./babel');
 const git = require('./babel-git');
 const gitRefresh = require('./git-refresh');
+const buildConfig = require('./babel-build-config');
 const css = require('./css');
 const file = require('./file');
 const nodeModules = require('./node_modules');
@@ -15,4 +16,5 @@ module.exports = [
   babel,
   git,
   gitRefresh,
+  buildConfig,
 ];

webpack/shared.js

@@ -11,6 +11,8 @@ const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
 const { env, settings, output } = require('./configuration');
 const rules = require('./rules');
 
+const { FE_BASE_PATH } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
+
 const htmlWebpackPluginConfig = {
   template: 'app/index.ejs',
   chunksSortMode: 'manual',
@@ -37,7 +39,7 @@ module.exports = {
     chunkFilename: 'packs/js/[name]-[chunkhash].chunk.js',
     hotUpdateChunkFilename: 'packs/js/[id]-[hash].hot-update.js',
     path: output.path,
-    publicPath: '/',
+    publicPath: FE_BASE_PATH,
   },
 
   optimization: {