Add variable to support prefixPath for the cadence web-UI

Dockerfile

@@ -10,6 +10,8 @@ COPY . .
 RUN npm install --no-save --production --unsafe-perm
 
 # Bundle the client code
+ARG PREFIX_PATH
+ENV PREFIX_PATH=$PREFIX_PATH
 RUN npm run build-production
 
 # switch to lite version of node

client/main.js

@@ -60,6 +60,7 @@ import {
 import { injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
 const routeOpts = {
+  base: process.env.PREFIX_PATH,
   mode: 'history',
   routes: [
     {

client/services/http-service.js

@@ -43,11 +43,17 @@ class HttpService {
   }
 
   async request(baseUrl, { query, ...options } = {}) {
-    const { origin } = this;
+    let { origin } = this;
     const fetch = this.fetchOverride ? this.fetchOverride : window.fetch;
     const queryString = getQueryStringFromObject(query);
     const path = queryString ? `${baseUrl}${queryString}` : baseUrl;
     const hasOrigin = baseUrl.startsWith('http');
+    const prefixPath = process.env.PREFIX_PATH;
+
+    if (!origin.endsWith(prefixPath)) {
+      origin = `${origin}${prefixPath}`.replace(/\/$/, '');
+    }
+
     const url = hasOrigin ? path : `${origin}${path}`;
     const isCrossOrigin = !url.startsWith(window.location.origin);
 

package.json

@@ -60,6 +60,7 @@
     "koa-better-error-handler": "^1.3.0",
     "koa-bodyparser": "^4.2.0",
     "koa-compress": "^2.0.0",
+    "koa-mount": "^4.0.0",
     "koa-onerror": "^3.1.0",
     "koa-router": "^7.2.1",
     "koa-send": "^4.1.1",

server.js

@@ -1,10 +1,17 @@
-var app = require('./server/index'),
-    port = Number(process.env.CADENCE_WEB_PORT) || 8088,
-    production = process.env.NODE_ENV === 'production'
+const mount = require('koa-mount');
+const Koa = require('koa');
+const cadenceWeb = require('./server/index'),
+  port = Number(process.env.CADENCE_WEB_PORT) || 8088,
+  production = process.env.NODE_ENV === 'production';
 
-app.init().listen(port)
+const app = new Koa();
+const appPrefixPath = process.env.PREFIX_PATH || '/'
+
+app.use(mount(appPrefixPath, cadenceWeb.init()));
+app.listen(port);
+
+console.log('cadence-web up and listening on port ' + port);
 
-console.log('cadence-web up and listening on port ' + port)
 if (!production) {
-  console.log('webpack is compiling...')
-}
+  console.log('webpack is compiling...');
+}

webpack.config.js

@@ -4,7 +4,8 @@ const
   ExtractTextPlugin = require('extract-text-webpack-plugin'),
   HtmlWebpackPlugin = require('html-webpack-plugin'),
   extractStylus = 'css-loader?sourceMap!stylus-loader',
-  development = !['production', 'ci'].includes(process.env.NODE_ENV)
+  development = !['production', 'ci'].includes(process.env.NODE_ENV),
+  appPrefixPath = process.env.PREFIX_PATH || '/'
 
 require('babel-polyfill');
 
@@ -17,12 +18,18 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'cadence.[hash].js',
-    publicPath: '/'
+    publicPath: appPrefixPath
   },
   plugins: [
     !development && new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: '"production"'
+        NODE_ENV: '"production"',
+        PREFIX_PATH: `"${appPrefixPath}"`
+      }
+    }),
+    development && new webpack.DefinePlugin({
+      'process.env': {
+        PREFIX_PATH: `"${appPrefixPath}"`
       }
     }),
     new ExtractTextPlugin({ filename: development ? 'cadence.css' : 'cadence.[hash].css', allChunks: true }),