Automated UI building

- Add Dockerfile for js build image
- Wire up dockerized-ui build to the makefile.
- Removed unused dev tools from package.json/gulp

.gitignore

@@ -31,6 +31,7 @@ coverage.html
 
 # Project specific
 scope.tar
+scope_ui_build.tar
 app/app
 probe/probe
 docker/app

Makefile

@@ -9,14 +9,20 @@ PROBE_EXE=probe/probe
 FIXPROBE_EXE=experimental/fixprobe/fixprobe
 SCOPE_IMAGE=$(DOCKERHUB_USER)/scope
 SCOPE_EXPORT=scope.tar
+SCOPE_UI_BUILD_EXPORT=scope_ui_build.tar
+SCOPE_UI_BUILD_IMAGE=weave/scope-ui-build
 
 all: $(SCOPE_EXPORT)
 dist: client static $(APP_EXE) $(PROBE_EXE)
 
-client:
-	cd client && make build && rm -f dist/.htaccess
+$(SCOPE_UI_BUILD_EXPORT): client/Dockerfile client/gulpfile.js client/package.json
+	docker build -t $(SCOPE_UI_BUILD_IMAGE) client
+	docker save $(SCOPE_UI_BUILD_IMAGE):latest > $@
 
-app/static.go:
+client/dist: client/app/* $(SCOPE_UI_BUILD_EXPORT)
+	docker run --rm -ti -v $(shell pwd)/client:/home/weave/client $(SCOPE_UI_BUILD_IMAGE)
+
+app/static.go: client/dist
 	go get github.com/mjibson/esc
 	esc -o app/static.go -prefix client/dist client/dist
 

client/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

client/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:latest
+
+WORKDIR /home/weave
+
+# build tool
+RUN npm install -g gulp
+
+# install app and build dependencies
+ADD package.json /home/weave/
+RUN npm install
+
+# run container via
+#
+# `docker run -v $GOPATH/src/github.com/weaveworks/scope/client:/app weaveworks/scope-build`
+#
+# after the container is run, bundled app should be in ./dist/ dir
+CMD cd client; ln -s ../node_modules; gulp build

client/gulpfile.js

@@ -47,8 +47,6 @@ gulp.task('scripts', function() {
 gulp.task('html', ['styles', 'scripts'], function () {
     return gulp.src('app/*.html')
         .pipe($.preprocess())
-        //.pipe($.useref.assets({searchPath: 'dist'}))
-        //.pipe($.useref())
         .pipe(gulp.dest('dist'))
         .pipe($.size())
         .pipe(livereload());
@@ -107,9 +105,7 @@ gulp.task('connect', function () {
     });
 });
 
-gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts'], function () {
-    //require('opn')('http://localhost:9000');
-});
+gulp.task('serve', ['connect', 'styles', 'scripts', 'fonts']);
 
 gulp.task('watch', ['serve'], function () {
     livereload.listen();

client/package.json

@@ -1,53 +1,52 @@
 {
-  "name": "scope-webapp",
-  "version": "0.2.0",
+  "name": "weave-scope",
+  "version": "1.2.0",
+  "description": "SPA JS app for Weave Scope visualising the application network.",
+  "repository": "weaveworks/scope",
+  "license": "Apache-2.0",
+  "private": true,
   "dependencies": {
-    "d3": "^3.5.3",
-    "dagre": "^0.7.1",
-    "flux": "^2.0.1",
+    "d3": "^3.5.5",
+    "dagre": "^0.7.2",
+    "flux": "^2.0.3",
     "font-awesome": "^4.3.0",
     "keymirror": "^0.1.1",
-    "lodash": "~3.0.1",
+    "lodash": "~3.8.0",
     "material-ui": "^0.7.5",
     "object-assign": "^2.0.0",
-    "page": "^1.6.0",
-    "react": "^0.13.2",
+    "page": "^1.6.3",
+    "react": "^0.13.3",
+    "react-tap-event-plugin": "^0.1.6",
     "react-tween-state": "0.0.5",
     "reqwest": "~1.1.5"
   },
   "devDependencies": {
-    "browserify": "^8.1.3",
-    "connect": "^3.3.4",
+    "browserify": "^10.2.0",
     "del": "^1.1.1",
-    "gulp": "^3.8.10",
-    "gulp-autoprefixer": "^2.1.0",
-    "gulp-cache": "^0.2.4",
-    "gulp-clean": "^0.3.1",
+    "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.3.0",
     "gulp-connect": "^2.2.0",
     "gulp-csso": "^1.0.0",
-    "gulp-filter": "^2.0.0",
+    "gulp-filter": "^2.0.2",
     "gulp-flatten": "^0.0.4",
     "gulp-if": "^1.2.5",
-    "gulp-imagemin": "^2.1.0",
-    "gulp-jshint": "^1.9.2",
+    "gulp-jshint": "^1.10.0",
     "gulp-less": "^3.0.3",
     "gulp-livereload": "^3.8.0",
-    "gulp-load-plugins": "^0.8.0",
+    "gulp-load-plugins": "^0.10.0",
     "gulp-preprocess": "^1.2.0",
-    "gulp-size": "^1.2.0",
-    "gulp-sourcemaps": "^1.3.0",
-    "gulp-uglify": "^1.1.0",
-    "gulp-useref": "^1.1.1",
-    "gulp-util": "^3.0.3",
-    "jshint-stylish": "^1.0.0",
-    "opn": "^1.0.1",
-    "proxy-middleware": "^0.11.0",
-    "reactify": "^1.1.0",
+    "gulp-size": "^1.2.1",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.4",
+    "jshint-stylish": "^1.0.2",
+    "proxy-middleware": "^0.11.1",
+    "reactify": "^1.1.1",
     "vinyl-buffer": "^1.0.0",
-    "vinyl-source-stream": "^1.0.0"
+    "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {
-    "start": "npm install && gulp serve"
+    "start": "gulp"
   },
   "engines": {
     "node": ">=0.10.0"