Merge pull request #1883 from iminoso/webpack

Installing skeleton Webpack build tool on front end

.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/js/directives/components static/dist/components
+
+# Run Webpack
+RUN npm run build
+
+# Install Grunt
 RUN npm install -g grunt-cli
 
 # Install Grunt depenencies
@@ -77,13 +90,13 @@ 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
 RUN apt-get autoremove -y
 RUN apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 RUN rm -rf grunt
+RUN rm -rf node_modules
 
 # Set up the init system
 ADD conf/init/copy_config_files.sh /etc/my_init.d/

Procfile

@@ -0,0 +1,3 @@
+app: gunicorn -c conf/gunicorn_local.py application:application
+webpack: npm run watch
+

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
@@ -114,8 +120,15 @@ The username and password of the admin test account is `devtable` and `password`
 
 ### Local Scripts
 
+Running the web server locally requires [goreman](https://github.com/mattn/goreman):
+```
+go get github.com/mattn/goreman
+```
+
 * `local-run` runs the web server for testing
 * `local-test` runs the unit test suite
+* `npm run build` builds front end dependencies
+* `npm run watch` a watcher for webpack
 
 ### Development inside Docker
 

local-run.sh

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

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,9 @@
+import * as React from "react";
+import * as angular from "angular";
+
+import repoHeader from "./directives/components/component";
+
+angular.module('quayPages').directive('repoHeader', function(reactDirective) {
+  return reactDirective(repoHeader);
+});
+

static/js/directives/components/component.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+class repoHeader extends React.Component<{}, {}> {
+  render () {
+    return <p> The component for the header</p>;
+  }
+}
+
+export default repoHeader;
+

static/js/directives/components/testComponent.js

@@ -1,20 +0,0 @@
-/**
- * A react component implemented using the ngReact library
- */
-var testComponent = React.createClass({
-  propTypes: {
-    firstProp: React.PropTypes.string.isRequired,
-    secondProp: React.PropTypes.string.isRequired
-  },
-  render: function() {
-    return React.DOM.span(null, 
-      'This is a react component: ' + this.props.firstProp + ' ' + this.props.secondProp
-    );
-  }
-});
-
-angular.module('quayPages').value('test-component', testComponent);
-angular.module('quayPages').directive('testComponent', function(reactDirective) {
-    return reactDirective('testComponent');
-});
-

static/partials/repo-view.html

@@ -4,17 +4,8 @@
   <div class="page-content">
     <!-- New Public Repo Page experiment -->
     <div ng-if="newRepoExperiment" class="main-panel">
-      <!-- Test React Component -->
-      <div>
-        <div>
-          <div>This is using the generic react-component directive</div>
-          <react-component name="test-component" props="reactProps"/>
-        </div>
-        <div>
-          <div>This is creating a specific directive corresponding to a react component</div>
-          <test-component first-prop="reactProps.firstProp" second-prop="reactProps.secondProp"/>
-        </div>
-      </div>
+      <!-- React Components -->
+      <repo-header />
     </div>
     <!-- Old Repo Page -->
     <div ng-if="!newRepoExperiment">

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;