Setup skeleton files for new front end build tool (Node, Webpack, React, Typescript)

.gitignore

@@ -2,13 +2,15 @@
 venv
 screenshots/screenshots/
 stack
-grunt/node_modules
+*/node_modules
 dist
 dest
 node_modules
 static/ldn
 static/fonts
+static/js/build
 stack_local
 test/data/registry/
+typings
 GIT_HEAD
 .idea

Dockerfile

@@ -68,8 +68,21 @@ RUN chmod +x /usr/local/bin/jwtproxy
 RUN curl -L -o /usr/local/bin/prometheus-aggregator https://github.com/coreos/prometheus-aggregator/releases/download/v0.0.1-alpha/prometheus-aggregator
 RUN chmod +x /usr/local/bin/prometheus-aggregator
 
-# Install Grunt
+# Install Webpack, Typescript, React
 RUN ln -s /usr/bin/nodejs /usr/bin/node
+ADD package.json package.json
+ADD webpack.config.js webpack.config.js
+ADD typings.json typings.json
+RUN npm install
+RUN npm link typescript
+
+# Add static files
+ADD static static
+
+# Run Webpack
+RUN npm run build
+
+# Install Grunt
 RUN npm install -g grunt-cli
 
 # Install Grunt depenencies
@@ -77,7 +90,6 @@ ADD grunt grunt
 RUN cd grunt && npm install
 
 # Run grunt
-ADD static static
 RUN cd grunt && grunt
 
 RUN apt-get remove -y --auto-remove python-dev g++ libjpeg62-dev libevent-dev libldap2-dev  libsasl2-dev libpq-dev libffi-dev libgpgme11-dev nodejs npm

README.md

@@ -61,7 +61,7 @@ macOS developers will need:
 git clone git@github.com:coreos-inc/quay.git && cd quay
 
 # Install the system dependencies
-brew install libevent libmagic postgresql gpgme pyenv pyenv-virtualenv docker docker-machine
+brew install libevent libmagic postgresql gpgme pyenv pyenv-virtualenv docker docker-machine node
 
 # create a default virtualmachine for docker
 docker-machine create -d virtualbox default
@@ -90,6 +90,12 @@ pip install -r requirements-dev.txt
 # Setup a local config
 git clone git@github.com:coreos-inc/quay-config.git ../quay-config
 ln -s ../../quay-config/local conf/stack
+
+# Install Node Dependencies
+npm install
+
+# Link Typescript
+npm link typescript
 ```
 
 ### Useful docs

local-run.sh

@@ -1 +1 @@
-gunicorn -c conf/gunicorn_local.py application:application
+gunicorn -c conf/gunicorn_local.py application:application

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "quay",
+  "license": "UNLICENSED",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "./node_modules/.bin/webpack",
+    "watch": "./node_modules/.bin/webpack --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coreos-inc/quay.git"
+  },
+  "homepage": "https://github.com/coreos-inc/quay#readme",
+  "dependencies": {
+    "@types/angular": "1.5.16",
+    "@types/react": "0.14.39",
+    "@types/react-dom": "0.14.17",
+    "angular": "1.5.8",
+    "css-loader": "0.25.0",
+    "ngreact": "0.3.0",
+    "react": "15.3.2",
+    "react-dom": "^15.3.2",
+    "style-loader": "0.13.1",
+    "typescript": "2.0.3"
+  },
+  "devDependencies": {
+    "source-map-loader": "0.1.5",
+    "ts-loader": "0.8.2",
+    "typings": "1.4.0",
+    "webpack": "1.13.2"
+  }
+}

static/js/app.tsx

@@ -0,0 +1,2 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "commonjs",
+    "noImplicitAny": true,
+    "outDir": "./build/",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "target": "ES5"
+  },
+  "exclude": [
+    "node_modules",
+    "typings/browser.d.ts",
+    "typings/browser"
+  ]
+}

typings.json

@@ -0,0 +1,6 @@
+{
+  "globalDependencies": {
+    "react": "registry:dt/react#0.14.0+20160927082313",
+    "react-dom": "registry:dt/react-dom#0.14.0+20160412154040"
+  }
+}

webpack.config.js

@@ -0,0 +1,38 @@
+var webpack = require('webpack');
+var path = require("path");
+
+var config = {
+  /*
+   * The entry point to the application
+   */
+  entry: ["./static/js/app.tsx"],
+
+  /*
+   * Output path of bundle
+   */
+  output: {
+    path: path.resolve(__dirname, "static/js/build"),
+    filename: "bundle.js"
+  },
+
+  /*
+   * specify files to search for
+   */
+  resolve: {
+    extensions: ["", ".ts", ".tsx", ".js"]
+  },
+  module: {
+    /*
+     * Regex associated with the loader
+     */
+    loaders: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        exclude: /node_modules/
+      }
+    ]
+  }
+};
+
+module.exports = config;