client/js/router.js: Reads <base> href tag

4 files changed, 28 insertions, 19 deletions

diff --git a/client/Dockerfile b/client/Dockerfile
index 49e0ab6..69555a4 100644
--- a/client/Dockerfile
+++ b/client/Dockerfile
@@ -8,9 +8,10 @@ COPY . ./
 
 ARG BUILD_INFO="docker-latest"
 ARG CLIENT_BUILD_ARGS=""
-RUN node build.js ${CLIENT_BUILD_ARGS}
+RUN BASE_URL="__BASEURL__" node build.js ${CLIENT_BUILD_ARGS}
 
-RUN find public/ -type f -size +5k -print0 | xargs -0 -- gzip -6 -k
+RUN find public/ -name public/index.html -prune -o -type f -size +5k \
+        -print0 | xargs -0 -- gzip -6 -k
 
 
 FROM nginx:alpine
@@ -21,6 +22,7 @@ RUN \
     echo "#!/bin/sh" >> /init && \
     echo 'sed -i "s|__BACKEND__|${BACKEND_HOST}|" /etc/nginx/nginx.conf' \
         >> /init && \
+    echo 'sed -i "s|__BASEURL__|${BASE_URL:-/}|" /var/www/index.htm' >> /init && \
     echo 'exec nginx -g "daemon off;"' >> /init && \
     chmod a+x /init
 
diff --git a/client/build.js b/client/build.js
index 23d54fa..fdc5fd0 100644
--- a/client/build.js
+++ b/client/build.js
@@ -65,7 +65,10 @@ function bundleHtml() {
     const underscore = require('underscore');
     const babelify = require('babelify');
     const baseHtml = readTextFile('./html/index.htm', 'utf-8');
-    writeFile('./public/index.htm', minifyHtml(baseHtml));
+    const baseUrl = process.env.BASE_URL ? process.env.BASE_URL : '/';
+    const finalHtml = baseHtml.replace(
+        '<!-- Base HTML Placeholder -->', `<base href="${baseUrl}"/>`);
+    writeFile('./public/index.htm', minifyHtml(finalHtml));
 
     glob('./html/**/*.tpl', {}, (er, files) => {
         let compiledTemplateJs = '\'use strict\'\n';
diff --git a/client/html/index.htm b/client/html/index.htm
index 2ebec1c..0072890 100644
--- a/client/html/index.htm
+++ b/client/html/index.htm
@@ -9,7 +9,7 @@
     <meta name='msapplication-TileColor' content='#ffffff'/>
     <meta name="msapplication-TileImage" content="/img/mstile-150x150.png">
     <title>Loading...</title>
-    <base href="/"/>
+    <!-- Base HTML Placeholder -->
     <link href='css/app.min.css' rel='stylesheet' type='text/css'/>
     <link href='css/vendor.min.css' rel='stylesheet' type='text/css'/>
     <link rel='shortcut icon' type='image/png' href='img/favicon.png'/>
diff --git a/client/js/router.js b/client/js/router.js
index a8bd4c3..dd9b9e1 100644
--- a/client/js/router.js
+++ b/client/js/router.js
@@ -14,24 +14,29 @@ const clickEvent = document.ontouchstart ? 'touchstart' : 'click';
 const uri = require('./util/uri.js');
 let location = window.history.location || window.location;
 
-const base = '';
+function _getOrigin() {
+    return location.protocol + '//' + location.hostname
+        + (location.port ? (':' + location.port) : '');
+}
 
 function _isSameOrigin(href) {
-    let origin = location.protocol + '//' + location.hostname;
-    if (location.port) {
-        origin += ':' + location.port;
-    }
-    return href && href.indexOf(origin) === 0;
+    return href && href.indexOf(_getOrigin()) === 0;
+}
+
+function _getBaseHref() {
+    const bases = document.getElementsByTagName('base');
+    return bases.length > 0 ?
+        bases[0].href.replace(_getOrigin(), '').replace(/\/+$/, '') : '';
 }
 
 class Context {
     constructor(path, state) {
-        if (path[0] === '/' && path.indexOf(base) !== 0) {
-            path = base + path;
-        }
+        const base = _getBaseHref();
+        path = path.indexOf('/') !== 0 ? '/' + path : path;
+        path = path.indexOf(base) !== 0 ? base + path : path;
 
         this.canonicalPath = path;
-        this.path = path.replace(base, '') || '/';
+        this.path = !path.indexOf(base) ? path.slice(base.length) : path;
 
         this.title = document.title;
         this.state = state || {};
@@ -289,15 +294,14 @@ const _onClick = router => {
             return;
         }
 
-        let path = el.pathname + el.search + (el.hash || '');
+        const base = _getBaseHref();
+        const orig = el.pathname + el.search + (el.hash || '');
+        const path = !orig.indexOf(base) ? orig.slice(base.length) : orig;
 
-        const orig = path;
-        if (path.indexOf(base) === 0) {
-            path = path.substr(base.length);
-        }
         if (base && orig === path) {
             return;
         }
+
         e.preventDefault();
         router.show(orig);
     };