Build UI using webpack (#54)

jonog · Mar 26, 2017 · 3a1bcb0 · 3a1bcb0
1 parent d697429
commit 3a1bcb0
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,6 @@ config.json
 *.rice-box.go
 vendor
 *.exe
+ui/node_modules
+ui/dist
+web/assets
diff --git a/Makefile b/Makefile
@@ -5,14 +5,22 @@ BUILD=`git rev-parse HEAD`
 
 LDFLAGS=-ldflags "-X main.Version=${VERSION} -X main.Build=${BUILD}"
 
-build: build-static
+build: embed-static
 	go build ${LDFLAGS} -o ${BINARY}
 
-build-static:
+embed-static: build-ui
 	go get github.com/GeertJohan/go.rice
 	go get github.com/GeertJohan/go.rice/rice
 	cd web && rice embed-go && cd ..
 
+build-ui:
+	cd ui && npm install && NODE_ENV=production ./node_modules/.bin/webpack -p && cd ..
+	cp ui/dist/assets/app.bundle.js web/assets
+	cp ui/index.html web/assets
+
+run-dev-ui:
+	cd ui && npm install && ./node_modules/.bin/webpack-dev-server
+
 build-proto:
 	protoc -I servicepb/ servicepb/service.proto --go_out=plugins=grpc:servicepb
 
@@ -26,7 +34,7 @@ test-deps:
 test:
 	go test -v -race $(shell glide novendor)
 
-build-docker-image-local: build-static
+build-docker-image-local: embed-static
 	docker run --rm \
 		-v "$(shell pwd):/src" \
 		-v /var/run/docker.sock:/var/run/docker.sock \
@@ -37,4 +45,4 @@ build-docker-image-remote: build-docker-image-local
 	docker tag jonog/redalert jonog/redalert:v${VERSION}
 	docker push jonog/redalert
 
-.PHONY: build-static build-proto clean test-deps test build-docker-image build-docker-image-remote
+.PHONY: embed-static build-ui build-proto clean test-deps test build-docker-image build-docker-image-remote
diff --git a/web/static/index.html → ui/index.html b/web/static/index.html → ui/index.html
@@ -9,10 +9,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:700">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.min.css">
     <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
-    <link rel="stylesheet" href="static/stylesheets/main.css">
-    <script>
-      window.baseURL = window.location.href;
-    </script>
   </head>
 
   <body>
@@ -51,6 +47,6 @@
       </div>
     </div>
   </div>
-    <script src="static/js/index.js"></script>
+    <script src="/assets/app.bundle.js"></script>
   </body>
 </html>
diff --git a/ui/package.json b/ui/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^0.27.3",
+    "style-loader": "^0.16.0",
+    "webpack": "^2.3.2",
+    "webpack-dev-server": "^2.4.2"
+  }
+}
diff --git a/web/static/js/index.js → ui/src/app.js b/web/static/js/index.js → ui/src/app.js
@@ -1,3 +1,10 @@
+import css from './main.css';
+
+if (process.env.NODE_ENV == "development") {
+  window.baseURL = process.env.API_URL;
+} else {
+  window.baseURL = window.location.href;
+}
 
 var redalert = new Vue({
   el: '#wrapper',

diff --git a/web/static/stylesheets/main.css → ui/src/main.css b/web/static/stylesheets/main.css → ui/src/main.css
@@ -79,7 +79,7 @@ body {
 
 .server .status-icon {
   height: 20px !important;
-  widgth: 20px !important;
+  width: 20px !important;
 }
 .server .check-info {
   font-size: 0.75em;

diff --git a/ui/webpack.config.js b/ui/webpack.config.js
@@ -0,0 +1,31 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  context: path.resolve(__dirname, './src'),
+  entry: {
+    app: './app.js',
+  },
+  output: {
+    path: path.resolve(__dirname, './dist/assets'),
+    filename: '[name].bundle.js',
+    publicPath: '/assets',
+  },
+  devServer: {
+    contentBase: __dirname,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      NODE_ENV: 'development',
+      API_URL: 'http://localhost:8888',
+    })
+  ],
+};
diff --git a/web/static/images/rocket.png b/web/static/images/rocket.png
diff --git a/web/web.go b/web/web.go
@@ -21,11 +21,11 @@ func Run(service *core.Service, port int, disableBrand bool) {
 		},
 	}
 
-	box := rice.MustFindBox("static")
+	box := rice.MustFindBox("assets")
 	fs := http.FileServer(box.HTTPBox())
 
 	router := mux.NewRouter()
-	router.PathPrefix("/static/").Handler(http.StripPrefix("/static/", fs))
+	router.PathPrefix("/assets/").Handler(http.StripPrefix("/assets/", fs))
 	router.Handle("/", fs)
 	router.Handle("/api/put", appHandler{context, metricsReceiverHandler})