From e749d436cb0c9921850291131903ba05152983a5 Mon Sep 17 00:00:00 2001
From: Arjan van Wijk <thanarie@gmail.com>
Date: Sun, 12 Nov 2017 14:06:11 +0100
Subject: [PATCH] Add option to dynamically set the publicPath

---
 build-tools/config/index.js |  3 +++
 docs/webpack.md             | 20 ++++++++++++++++++++
 package.json                |  2 +-
 src/app/bundle.js           | 15 +++++++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/build-tools/config/index.js b/build-tools/config/index.js
index 626827e2..72507992 100644
--- a/build-tools/config/index.js
+++ b/build-tools/config/index.js
@@ -8,6 +8,9 @@ Change the publicPath if site is running in a subfolder on the server.
 
 It's also possible to override this publicPath by using:
 yarn build --publicPath=/m/muban-site/
+
+When you don't know the publicPath at build time, you can set `window['webpackPublicPath']` before
+loading any script in your HTML.
 */
 let publicPath = '/';
 
diff --git a/docs/webpack.md b/docs/webpack.md
index f8a8d000..a5c81c4a 100644
--- a/docs/webpack.md
+++ b/docs/webpack.md
@@ -9,3 +9,23 @@ TODO
   * assets
   * comments
 * standalone
+
+
+## publicPath
+
+The publicPath is the location your assets are retrieved from. The default is set to `/`.
+When you deploy your site into a nested folder, you want to change the publicPath to that folder.
+This can be done by passing the `--publicPath` flag:
+```
+yarn build --publicPath=/nested/folder/
+```
+
+When you don't know the publicPath during build time, you can also set it at runtime by setting
+the `webpackPublicPath` variable on the window before any script file is loaded:
+```
+<script>
+  window.webpackPublicPath = '/nested/folder/';
+  // or
+  window.webpackPublicPath = 'https://cdn-domain.site.com/nested/folder/';
+</script>
+```
diff --git a/package.json b/package.json
index 893c4aa6..2cfef29e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "muban",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "",
   "scripts": {
     "dev": "webpack-dev-server --config build-tools/config/webpack/webpack.config.js",
diff --git a/src/app/bundle.js b/src/app/bundle.js
index 6b98ad1d..26fdddc4 100644
--- a/src/app/bundle.js
+++ b/src/app/bundle.js
@@ -2,6 +2,21 @@
  * This file is the webpack entry for all scripts/styles that must be used in the website.
  */
 
+/**
+ * Allows the website to override the publicPath set in the build process.
+ * This can be useful when:
+ * - The same build is deployed in different folders
+ * - The same build could use a cdn-path to load all assets from another domain
+ *
+ * If you know the publicPath during buildTime, you can do a build with the `--publicPath=...` flag
+ * This feature is mostly useful when the publicPath can be different at runtime.
+ */
+/* eslint-disable */
+if (window['webpackPublicPath']) {
+  __webpack_public_path__ = window['webpackPublicPath'];
+}
+/* eslint-enable */
+
 // require all hbs templates to get reference to all used code
 const context = require.context('./component/blocks/', true, /\.hbs$/);
 context.keys().forEach(key => {