Merge pull request #11 from hjacobs/feature/webpack

Add npm and webpack setup

.gitignore

@@ -1,4 +1,6 @@
 __pycache__
 *.swp
 *.pyc
-.idea/
+.idea/
+**/node_modules/
+static/

Dockerfile

@@ -1,7 +1,6 @@
 FROM alpine:3.4
 
-RUN \
-    apk add --no-cache python3 python3-dev alpine-sdk zlib-dev libffi-dev openssl-dev && \
+RUN apk add --no-cache python3 python3-dev alpine-sdk zlib-dev libffi-dev openssl-dev nodejs && \
     python3 -m ensurepip && \
     rm -r /usr/lib/python*/ensurepip && \
     pip3 install --upgrade pip setuptools gevent && \
@@ -15,8 +14,11 @@ RUN pip3 install -r /requirements.txt
 
 COPY app.py /
 COPY templates /templates
-COPY static /static
+COPY app /app
 COPY swagger.yaml /
 
+WORKDIR /app
+RUN npm install && npm run build
+
 WORKDIR /
 CMD /app.py

README.rst

@@ -34,6 +34,8 @@ You can run the app locally:
 
     $ pip3 install -r requirements.txt
     $ kubectl proxy &
+    $ cd app && npm start &
+    $ cd -
     $ ./app.py
 
 Now direct your browser to http://localhost:8080

app/.eslintrc.yml

@@ -2,8 +2,6 @@ env:
   browser: true
   es6: true
 extends: 'eslint:recommended'
-globals:
-  PIXI: true
 rules:
   indent:
     - error
@@ -15,4 +13,4 @@ rules:
     - error
     - single
   prefer-const:
-    - warn
+    - warn

app/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "kube-ops-view",
+  "version": "1.0.0",
+  "description": "=========================== Kubernetes Operational View ===========================",
+  "main": "src/app.js",
+  "config": {
+    "buildDir": "../static"
+  },
+  "scripts": {
+    "prestart": "npm install",
+    "start": "NODE_ENV=development webpack --watch",
+    "webpack": "webpack -p --config ./webpack.config.js",
+    "build": "NODE_ENV=production npm run webpack",
+    "prewebpack": "npm run clean",
+    "lint": "eslint ./src/**/*.js",
+    "clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hjacobs/kube-ops-view.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/hjacobs/kube-ops-view/issues"
+  },
+  "homepage": "https://github.com/hjacobs/kube-ops-view#readme",
+  "dependencies": {
+    "pixi.js": "^4.3.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-runtime": "^6.20.0",
+    "brfs": "^1.4.3",
+    "eslint": "^3.12.2",
+    "rimraf": "^2.5.4",
+    "transform-loader": "^0.2.3",
+    "webpack": "^1.14.0"
+  }
+}

app/src/app.js

@@ -1,3 +1,5 @@
+const PIXI = require('pixi.js')
+
 //Create the renderer
 const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2});
 renderer.view.style.position = 'absolute';

app/webpack.config.js

@@ -0,0 +1,36 @@
+var path = require('path');
+var pkg = require('./package.json')
+var DEBUG = process.env.NODE_ENV !== 'production';
+var util = require('util');
+var entry = {
+    app: ['./src/app.js']
+};
+
+module.exports = {
+    context: path.join(__dirname, './'),
+    entry: entry,
+    debug : DEBUG,
+    target : 'web',
+    devtool : DEBUG ? 'inline-source-map' : false,
+    output: {
+        path: path.resolve(pkg.config.buildDir),
+        publicPath: DEBUG ? "/" : "./",
+        filename: "app.js"
+    },
+    node: {
+        fs: 'empty'
+    },
+    module: {
+        loaders: [
+            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query:{presets:['es2015']}},
+            { test: /\.html$/, exclude: /node_modules/, loader: "file-loader?name=[path][name].[ext]"},
+            { test: /\.jpe?g$|\.svg$|\.png$/, exclude: /node_modules/, loader: "file-loader?name=[path][name].[ext]"},
+            { test: /\.json$/, exclude: /node_modules/, loader: "json"},
+            { test: /\.json$/, include: path.join(__dirname, 'node_modules', 'pixi.js'),loader: 'json'}
+        ],
+        postLoaders: [{
+            include: path.resolve(__dirname, 'node_modules/pixi.js'),
+            loader: 'transform?brfs'
+        }]
+    }
+};

templates/index.html

@@ -6,7 +6,6 @@
         <style>* {padding: 0; margin: 0}</style>
     </head>
     <body>
-        <script src="static/vendor/pixi.min.js"></script>
         <script src="static/app.js"></script>
     </body>
 </html>