You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@zeppelin.apache.org by mo...@apache.org on 2017/03/31 20:10:53 UTC

zeppelin git commit: [ZEPPELIN-2190] Support custom web development port

Repository: zeppelin
Updated Branches:
  refs/heads/master c91ec2be6 -> 7b345a91b


[ZEPPELIN-2190] Support custom web development port

### What is this PR for?
This PR is for support flexible port for custom `web application development` and update the structure of README.md document for the support variable.

### What type of PR is it?
[ Improvement | Documentation (README.md) ]

### What is the Jira issue?
* [ZEPPELIN-2190](https://issues.apache.org/jira/browse/ZEPPELIN-2190)

### How should this be tested?
1. run build
   - `mvn clean package -DskipTests -pl 'zeppelin-web'`
2. run dev mode with `WEB_PORT` variable port under `zeppelin-web` folder
   - `WEB_PORT=9999 yarn run dev`
3. connect `localhost:9999` on web browser

### Screenshots (if appropriate)
[after]
![image](https://cloud.githubusercontent.com/assets/8110458/23742014/86a34c3a-04ee-11e7-8e00-26b3d89f7bec.png)

![image](https://cloud.githubusercontent.com/assets/8110458/23742041/a71b2b7c-04ee-11e7-9159-8565fc63549c.png)

### Questions:
* Does the licenses files need update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? Yes, README.md of `zeppelin-web`

Author: soralee <so...@zepl.com>

Closes #2113 from soralee/ZEPPELIN-2190 and squashes the following commits:

f1faa79 [soralee] modify convention and remove if statement
799f4ee [soralee] add description (README.md, webpack.config.js)
78653a8 [soralee] Support custom web development port


Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/7b345a91
Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/7b345a91
Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/7b345a91

Branch: refs/heads/master
Commit: 7b345a91b966e8652bab52e4ebe71c2d4319525b
Parents: c91ec2b
Author: soralee <so...@zepl.com>
Authored: Fri Mar 24 23:01:07 2017 +0900
Committer: Lee moon soo <mo...@apache.org>
Committed: Fri Mar 31 13:10:50 2017 -0700

----------------------------------------------------------------------
 zeppelin-web/README.md                          | 15 +++++++--
 zeppelin-web/package.json                       |  3 +-
 .../src/components/baseUrl/baseUrl.service.js   |  2 +-
 zeppelin-web/src/index.html                     |  2 +-
 zeppelin-web/webpack.config.js                  | 35 +++++++++++++++-----
 5 files changed, 42 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/zeppelin/blob/7b345a91/zeppelin-web/README.md
----------------------------------------------------------------------
diff --git a/zeppelin-web/README.md b/zeppelin-web/README.md
index 11c26c5..508a97b 100644
--- a/zeppelin-web/README.md
+++ b/zeppelin-web/README.md
@@ -31,12 +31,21 @@ $ yarn run build
 # you need to run zeppelin backend instance also
 $ yarn run dev
 
-# If you are using a custom port, you must use the 'SERVER_PORT' variable to run the web application development mode
-$ SERVER_PORT=8080 yarn run dev
-
 # execute tests
 $ yarn run test
 ```
+Supports the following options with using npm environment variable when running the web development mode.
+
+```
+# if you are using a custom port instead of default(8080), 
+# you must use the 'SERVER_PORT' variable to run the web application development mode
+$ SERVER_PORT=YOUR_ZEPPELIN_PORT yarn run dev
+
+# if you want to use a web dev port instead of default(9000), 
+# you can use the 'WEB_PORT' variable
+$ WEB_PORT=YOUR_WEB_DEV_PORT yarn run dev
+
+```
 
 ## Troubleshooting
 

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/7b345a91/zeppelin-web/package.json
----------------------------------------------------------------------
diff --git a/zeppelin-web/package.json b/zeppelin-web/package.json
index 513f5ff..6e1252b 100644
--- a/zeppelin-web/package.json
+++ b/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",

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/7b345a91/zeppelin-web/src/components/baseUrl/baseUrl.service.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/components/baseUrl/baseUrl.service.js b/zeppelin-web/src/components/baseUrl/baseUrl.service.js
index f901157..4ad1eab 100644
--- a/zeppelin-web/src/components/baseUrl/baseUrl.service.js
+++ b/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;

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/7b345a91/zeppelin-web/src/index.html
----------------------------------------------------------------------
diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index 0bc5129..003ad5b 100644
--- a/zeppelin-web/src/index.html
+++ b/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);

http://git-wip-us.apache.org/repos/asf/zeppelin/blob/7b345a91/zeppelin-web/webpack.config.js
----------------------------------------------------------------------
diff --git a/zeppelin-web/webpack.config.js b/zeppelin-web/webpack.config.js
index d25166c..f3ed276 100644
--- a/zeppelin-web/webpack.config.js
+++ b/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
@@ -87,11 +88,8 @@ module.exports = function makeWebpackConfig () {
     app: './src/index.js'
   };
 
-  var serverPort = 8080;
-
-  if(process.env.SERVER_PORT) {
-     serverPort = process.env.SERVER_PORT;
-  }
+  var serverPort = process.env.SERVER_PORT || 8080;
+  var webPort = process.env.WEB_PORT || 9000;
 
   /**
    * Output
@@ -105,7 +103,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 +175,20 @@ module.exports = function makeWebpackConfig () {
       // Allow loading html through js
       test: /\.html$/,
       loader: 'raw'
+    }, {
+      // STRING REPLACE PLUGIN
+      // reference: https://www.npmjs.com/package/string-replace-webpack-plugin
+      // Allow for arbitrary strings to be replaced as part of the module build process
+      // Configure replacements for file patterns
+      test: /index.html$/,
+      loader: stringReplacePlugin.replace({
+        replacements: [{
+          pattern: /WEB_PORT/ig,
+          replacement: function (match, p1, offset, string) {
+            return webPort;
+          }
+        }
+      ]})
     }]
   };
 
@@ -218,7 +230,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 +272,11 @@ module.exports = function makeWebpackConfig () {
       new CopyWebpackPlugin([])
     )
   } else {
-      config.plugins.push(new InsertLiveReloadPlugin())
+    config.plugins.push(
+      new InsertLiveReloadPlugin(),
+      // reference: https://www.npmjs.com/package/string-replace-webpack-plugin
+      new stringReplacePlugin()
+    )
   }
 
   /**
@@ -269,7 +286,7 @@ module.exports = function makeWebpackConfig () {
    */
   config.devServer = {
     historyApiFallback: true,
-    port: 9000,
+    port: webPort,
     inline: true,
     hot: true,
     progress: true,