Set dynamically aboslute public path on 'npm run watch'; fix http/htt…

…ps hardcoded in watch.js

assets/config.json

@@ -2,6 +2,7 @@
   "context": "assets",
   "entry": {
     "main": [
+      "./scripts/util/public-path.js",
       "./scripts/main.js",
       "./styles/main.scss"
     ],
@@ -13,6 +14,5 @@
     "path": "dist",
     "publicPath": "/app/themes/sage/dist/"
   },
-  "devUrl": "http://example.dev",
-  "devPort": 3000
+  "devUrl": "http://example.dev"
 }

assets/scripts/util/public-path.js

@@ -0,0 +1,8 @@
+/* globals WEBPACK_PUBLIC_PATH */
+
+// Dynamically set absolute public path from current protocol and host
+if (WEBPACK_PUBLIC_PATH !== false) {
+  /* eslint-disable no-undef */
+  __webpack_public_path__ = location.protocol + '//' + location.host + WEBPACK_PUBLIC_PATH;
+  /*eslint-enable no-undef*/
+}

watch.js

@@ -9,15 +9,9 @@ var webpackConfig = require('./webpack.config'),
     config = require('./assets/config');
 
 // Internal variables
-var host = 'http://localhost',
-    port = config.devPort || '3000',
-    compiler;
-
-webpackConfig.output.publicPath = host + ':' + port + config.output.publicPath;
-compiler = webpack(webpackConfig);
+var compiler = webpack(webpackConfig);
 
 browserSync.init({
-  port: port,
   proxy: {
     target: config.devUrl,
     middleware: [

webpack.config.js

@@ -176,6 +176,9 @@ webpackConfig = {
       'window.jQuery': 'jquery',
       'Tether': 'tether',
       'window.Tether': 'tether'
+    }),
+    new webpack.DefinePlugin({
+      WEBPACK_PUBLIC_PATH: (argv.watch === true) ? JSON.stringify(config.output.publicPath) : false
     })
   ],
   postcss: [