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]   ### 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 <sora0...@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 <sora0...@zepl.com> Authored: Fri Mar 24 23:01:07 2017 +0900 Committer: Lee moon soo <m...@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,
