Support custom web development port

zeppelin-web/package.json

@@ -73,7 +73,8 @@
     "style-loader": "^0.13.1",
     "time-grunt": "^0.3.1",
     "webpack": "^1.14.0",
-    "webpack-dev-server": "^1.16.2"
+    "webpack-dev-server": "^1.16.2",
+    "string-replace-webpack-plugin": "^0.1.3"
   },
   "repository": {
     "type": "git",

zeppelin-web/src/components/baseUrl/baseUrl.service.js

@@ -24,7 +24,7 @@ function baseUrlSrv() {
       }
     }
     //Exception for when running locally via grunt
-    if (port === 9000) {
+    if (port === process.env.WEB_PORT) {
       port = process.env.SERVER_PORT;
     }
     return port;

zeppelin-web/src/index.html

@@ -117,7 +117,7 @@ limitations under the License.
         messageStyle: "none"
       }
       // add root only if it's not dev mode
-      if (Number(location.port) !== 9000) {
+      if (Number(location.port) !== WEB_PORT) {
         config.root = '.';
       }
       MathJax.Hub.Config(config);

zeppelin-web/webpack.config.js

@@ -29,6 +29,7 @@ var InsertLiveReloadPlugin = function InsertLiveReloadPlugin(options) {
   this.hostname = this.options.hostname || 'localhost';
 }
 var express = require('express');
+var stringReplacePlugin = require('string-replace-webpack-plugin');
 
 InsertLiveReloadPlugin.prototype.autoloadJs = function autoloadJs() {
   return
@@ -88,11 +89,16 @@ module.exports = function makeWebpackConfig () {
   };
 
   var serverPort = 8080;
+  var webPort = 9000;
 
-  if(process.env.SERVER_PORT) {
+  if (process.env.SERVER_PORT) {
      serverPort = process.env.SERVER_PORT;
   }
 
+  if (process.env.WEB_PORT) {
+    webPort = process.env.WEB_PORT;
+  }
+
   /**
    * Output
    * Reference: http://webpack.github.io/docs/configuration.html#output
@@ -105,7 +111,7 @@ module.exports = function makeWebpackConfig () {
 
     // Output path from the view of the page
     // Uses webpack-dev-server in development
-    publicPath: isProd ? '' : 'http://localhost:9000/',
+    publicPath: isProd ? '' : 'http://localhost:' + webPort + '/',
 
     // Filename for entry points
     // Only adds hash in build mode
@@ -177,6 +183,16 @@ module.exports = function makeWebpackConfig () {
       // Allow loading html through js
       test: /\.html$/,
       loader: 'raw'
+    }, {
+      test: /index.html$/,
+      loader: stringReplacePlugin.replace({
+        replacements: [{
+          pattern: /WEB_PORT/ig,
+          replacement: function (match, p1, offset, string) {
+            return webPort;
+            }
+          }
+        ]})
     }]
   };
 
@@ -218,7 +234,8 @@ module.exports = function makeWebpackConfig () {
       new webpack.DefinePlugin({
         'process.env': {
           HELIUM_BUNDLE_DEV: process.env.HELIUM_BUNDLE_DEV,
-          SERVER_PORT: serverPort
+          SERVER_PORT: serverPort,
+          WEB_PORT: webPort
         }
       })
     )
@@ -259,7 +276,10 @@ module.exports = function makeWebpackConfig () {
       new CopyWebpackPlugin([])
     )
   } else {
-      config.plugins.push(new InsertLiveReloadPlugin())
+      config.plugins.push(
+        new InsertLiveReloadPlugin(),
+        new stringReplacePlugin()
+      )
   }
 
   /**
@@ -269,7 +289,7 @@ module.exports = function makeWebpackConfig () {
    */
   config.devServer = {
     historyApiFallback: true,
-    port: 9000,
+    port: webPort,
     inline: true,
     hot: true,
     progress: true,