Make public path configurable via an environment variable (#203)

* Make public path configurable via an environment variable

* Update server and client to be aware of public path

* Update http object to use account for public path

* fix subpath routing

* Update README.md

Co-authored-by: feedmeapples <aksenov.ro@outlook.com>
Co-authored-by: swyx <shawnthe1@gmail.com>

README.md

@@ -17,8 +17,9 @@ Set these environment variables if you need to change their defaults
 | ----------------------------- | ----------------------------------------------------------------- | ----------------------------- |
 | TEMPORAL_GRPC_ENDPOINT        | String representing server gRPC endpoint                          | 127.0.0.1:7233                |
 | TEMPORAL_WEB_PORT             | HTTP port to serve on                                             | 8088                          |
-| TEMPORAL_CONFIG_PATH          | Path to config file, see [configurations](#configuring-authentication-optional) | ./server/config.yml   
+| TEMPORAL_CONFIG_PATH          | Path to config file, see [configurations](#configuring-authentication-optional) | ./server/config.yml |
 | TEMPORAL_PERMIT_WRITE_API     | Boolean to permit write API methods such as Terminating Workflows | true                          |
+| TEMPORAL_WEB_ROOT_PATH        | The root path to serve the app under                              | /                             |
 | TEMPORAL_HOT_RELOAD_PORT      | HTTP port used by hot reloading in development                    | 8081                          |
 | TEMPORAL_HOT_RELOAD_TEST_PORT | HTTP port used by hot reloading in tests                          | 8082                          |
 | TEMPORAL_SESSION_SECRET       | Secret used to hash the session with HMAC                         | "ensure secret in production" |
@@ -125,13 +126,15 @@ make
 npm run dev
 ```
 
+You can then access Temporal Web at `localhost:8088` (you can configure both the port and the path with `TEMPORAL_WEB_PORT` and `TEMPORAL_WEB_ROOT_PATH` per the config docs above).
+
 For development and contributing to `temporal-web`, please see the [contributing guide](https://github.com/temporalio/temporal-web/blob/master/CONTRIBUTING.md).
 
 You may also use docker by pulling [temporalio/web](https://hub.docker.com/r/temporalio/web/). It is also included in the Temporal server's [local docker setup](https://github.com/temporalio/temporal/tree/master/docker).
 
 ### API
 
-If you need to extend `temporal-web` to add middleware to the server, you can install `temporal-web` as a dependecy, and it will export the [Koa](http://koajs.com/) web server that has not yet been started or configured. It includes an additional `init` function that will then compose the built-in middleware. This gives you an option to add middleware before or after you call `init` so it will add the middleware at the beginning or the end of the chain, respectively.
+If you need to extend `temporal-web` to add middleware to the server, you can install `temporal-web` as a dependency, and it will export the [Koa](http://koajs.com/) web server that has not yet been started or configured. It includes an additional `init` function that will then compose the built-in middleware. This gives you an option to add middleware before or after you call `init` so it will add the middleware at the beginning or the end of the chain, respectively.
 
 #### `init(options)`
 

client/App.vue

@@ -72,23 +72,6 @@ export default {
     await this.announceNewVersionIfExists();
   },
   methods: {
-    globalClick(e) {
-      // Code required for mocha tests to run correctly without infinite looping.
-      if (e.target.tagName === 'A') {
-        const href = e.target.getAttribute('href');
-
-        if (
-          href &&
-          href.startsWith('/') &&
-          !e.target.getAttribute('download') &&
-          !e.target.getAttribute('target')
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
-          this.$router.push(href);
-        }
-      }
-    },
     onEnvironmentSelectChange(environment) {
       if (environment === this.environment.value) {
         return;
@@ -178,7 +161,7 @@ export default {
 </script>
 
 <template>
-  <main @click="globalClick">
+  <main>
     <notification-bar
       :message="notification.message"
       :onClose="onNotificationClose"
@@ -192,11 +175,10 @@ export default {
       :link="announcement.link"
     />
     <header class="top-bar">
-      <a href="/namespaces" class="logo">
+      <router-link :to="{ name: 'namespaces' }" class="logo">
         <div v-html="logo"></div>
         <span class="version">{{ version }}</span>
-      </a>
-
+      </router-link>
       <feature-flag name="environment-select">
         <v-select
           class="environment-select"

client/helpers/http.js

@@ -1,3 +1,4 @@
+const PUBLIC_PATH = process.env.TEMPORAL_WEB_ROOT_PATH || '/';
 export default function http(fetch, url, o) {
   const opts = {
     credentials: 'same-origin',
@@ -19,6 +20,9 @@ export default function http(fetch, url, o) {
     }
   }
 
+  let path = PUBLIC_PATH.slice(0, -1);
+  fetchUrl = `${path}${fetchUrl}`
+
   return fetch(fetchUrl, opts).then(r =>
     r.status >= 200 && r.status < 300
       ? r.json().catch(() => {})

client/main.js

@@ -31,10 +31,14 @@ import WorkflowTabs from './routes/workflow';
 
 import { http, injectMomentDurationFormat, jsonTryParse } from '~helpers';
 
+const PUBLIC_PATH = process.env.TEMPORAL_WEB_ROOT_PATH || '/';
+
 const routeOpts = {
+  base: PUBLIC_PATH,
   mode: 'history',
   routes: [
     {
+      name: 'namespaces',
       path: '/',
       redirect: '/namespaces',
       component: Root,

server/index.js

@@ -28,6 +28,8 @@ app.init = function(options) {
   const hotReloadTestPort =
     Number(process.env.TEMPORAL_HOT_RELOAD_TEST_PORT) || 8082;
 
+  const PUBLIC_PATH = process.env.TEMPORAL_WEB_ROOT_PATH || '/';
+
   const secret =
     process.env.TEMPORAL_SESSION_SECRET ?? 'ensure secret in production';
   app.keys = [secret];
@@ -68,7 +70,7 @@ app.init = function(options) {
     .use(auth.initialize)
     .use(passport.initialize())
     .use(passport.session())
-    .use(router.routes())
+    .use(router.prefix(PUBLIC_PATH).routes())
     .use(router.allowedMethods())
     .use(async function(ctx, next) {
       if (

webpack.config.js

@@ -7,11 +7,7 @@ const path = require('path'),
 
 require('babel-polyfill');
 
-const envKeys = {
-};
-if (!development) {
-  envKeys['NODE_ENV'] = '"production"';
-}
+const PUBLIC_PATH = process.env.TEMPORAL_WEB_ROOT_PATH || '/';
 
 module.exports = {
   devtool: 'source-map',
@@ -25,11 +21,11 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'temporal.[hash].js',
-    publicPath: '/',
+    publicPath: PUBLIC_PATH,
   },
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': envKeys,
+      'process.env.TEMPORAL_WEB_ROOT_PATH': `"${PUBLIC_PATH}"`,
     }),
     new ExtractTextPlugin({
       filename: development ? 'temporal.css' : 'temporal.[hash].css',
@@ -111,5 +107,6 @@ module.exports = {
   devServer: {
     historyApiFallback: true,
     overlay: true,
+    publicPath: PUBLIC_PATH,
   },
 };