Merge pull request #1210 from weaveworks/client-start

Fix make client-start

Makefile

@@ -127,7 +127,7 @@ client-lint: $(SCOPE_UI_BUILD_UPTODATE)
 
 client-start: $(SCOPE_UI_BUILD_UPTODATE)
 	$(SUDO) docker run $(RM) $(RUN_FLAGS) --net=host -v $(shell pwd)/client/app:/home/weave/app \
-		-v $(shell pwd)/client/build:/home/weave/build \
+		-v $(shell pwd)/client/build:/home/weave/build -e WEBPACK_SERVER_HOST \
 		$(SCOPE_UI_BUILD_IMAGE) npm start
 
 else

client/Dockerfile

@@ -2,6 +2,5 @@ FROM node:4.2.2
 WORKDIR /home/weave
 COPY package.json /home/weave/
 ENV NPM_CONFIG_LOGLEVEL=warn NPM_CONFIG_PROGRESS=false
-# Don't install optional developer tools
-RUN npm install --no-optional
+RUN npm install
 COPY webpack.local.config.js webpack.production.config.js server.js .babelrc .eslintrc .eslintignore /home/weave/

client/README.md

@@ -2,17 +2,23 @@
 
 ## Requirements
 
-- nodejs 4.2.2
-- running `weavescope` container
 
-## Getting Started
+## Getting Started (using local node)
 
+- You need nodejs 4.2.2 and a running `weavescope` container
 - Setup: `npm install`
 - Build: `npm run build`, output will be in `build/`
 - Develop: `BACKEND_HOST=<dockerhost-ip>:4040 npm start` and then open `http://localhost:4042/`
 
 This will start a webpack-dev-server that serves the UI and proxies API requests to the container.
 
+## Getting Started (using node in a container)
+
+- You need a running `weavescope` container
+- Develop: `make WEBPACK_SERVER_HOST=<dockerhost-ip> client-start` and then open `http://<dockerhost-ip>:4042/`
+
+This will start a webpack-dev-server that serves the UI from the UI build container and proxies API requests to the weavescope container.
+
 ## Coding
 
 This directory has a `.eslintrc`, make sure your editor supports linter hints.

client/server.js

@@ -6,6 +6,8 @@ var url = require('url');
 
 var app = express();
 
+var BACKEND_HOST = process.env.BACKEND_HOST || 'localhost';
+var WEBPACK_SERVER_HOST = process.env.WEBPACK_SERVER_HOST || 'localhost';
 
 /************************************************************
  *
@@ -26,17 +28,15 @@ app.get(/(app|contrast-app|terminal-app|vendors).js/, function(req, res) {
   if (process.env.NODE_ENV === 'production') {
     res.sendFile(__dirname + '/build' + filename);
   } else {
-    res.redirect('//localhost:4041/build' + filename);
+    res.redirect('//' + WEBPACK_SERVER_HOST + ':4041/build' + filename);
   }
 });
 
 // Proxy to backend
 
-var BACKEND_HOST = process.env.BACKEND_HOST || 'localhost:4040';
-
 var proxy = httpProxy.createProxy({
   ws: true,
-  target: 'http://' + BACKEND_HOST
+  target: 'http://' + BACKEND_HOST + ':4040'
 });
 
 proxy.on('error', function(err) {
@@ -64,12 +64,12 @@ if (process.env.NODE_ENV !== 'production') {
   var config = require('./webpack.local.config');
 
   new WebpackDevServer(webpack(config), {
-    publicPath: config.output.publicPath,
+    publicPath: 'http://' + WEBPACK_SERVER_HOST + ':4041/build/',
     hot: true,
     noInfo: true,
     historyApiFallback: true,
     stats: { colors: true }
-  }).listen(4041, 'localhost', function (err, result) {
+  }).listen(4041, '0.0.0.0', function (err, result) {
     if (err) {
       console.log(err);
     }

client/webpack.local.config.js

@@ -14,7 +14,7 @@ var path = require('path');
  */
 
  // Inject websocket url to dev backend
-var BACKEND_HOST = process.env.BACKEND_HOST || 'localhost:4040';
+ var WEBPACK_SERVER_HOST = process.env.WEBPACK_SERVER_HOST || 'localhost';
 
 module.exports = {
 
@@ -25,18 +25,18 @@ module.exports = {
   entry: {
     'app': [
       './app/scripts/main',
-      'webpack-dev-server/client?http://localhost:4041',
+      'webpack-dev-server/client?http://' + WEBPACK_SERVER_HOST + ':4041',
       'webpack/hot/only-dev-server',
       './app/scripts/debug'
     ],
     'contrast-app': [
       './app/scripts/contrast-main',
-      'webpack-dev-server/client?http://localhost:4041',
+      'webpack-dev-server/client?http://' + WEBPACK_SERVER_HOST + ':4041',
       'webpack/hot/only-dev-server'
     ],
     'terminal-app': [
       './app/scripts/terminal-main',
-      'webpack-dev-server/client?http://localhost:4041',
+      'webpack-dev-server/client?http://' + WEBPACK_SERVER_HOST + ':4041',
       'webpack/hot/only-dev-server'
     ],
     vendors: ['classnames', 'd3', 'dagre', 'flux', 'immutable',
@@ -47,8 +47,7 @@ module.exports = {
   // by the dev server for dynamic hot loading.
   output: {
     path: path.join(__dirname, 'build/'),
-    filename: '[name].js',
-    publicPath: 'http://localhost:4041/build/'
+    filename: '[name].js'
   },
 
   // Necessary plugins for hot load