From 9015b0902601a79a5551ac94cfd81bab8798be86 Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Tue, 27 Sep 2016 14:06:28 -0400 Subject: [PATCH 1/7] Setup skeleton files for new front end build tool (Node, Webpack, React, Typescript) --- .gitignore | 4 +++- Dockerfile | 16 ++++++++++++++-- README.md | 8 +++++++- local-run.sh | 2 +- package.json | 33 +++++++++++++++++++++++++++++++++ static/js/app.tsx | 2 ++ tsconfig.json | 16 ++++++++++++++++ typings.json | 6 ++++++ webpack.config.js | 38 ++++++++++++++++++++++++++++++++++++++ 9 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 package.json create mode 100644 static/js/app.tsx create mode 100644 tsconfig.json create mode 100644 typings.json create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore index 4977dad15..f808caee1 100644 --- a/.gitignore +++ b/.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 diff --git a/Dockerfile b/Dockerfile index 632455b90..f83742d23 100644 --- a/Dockerfile +++ b/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 diff --git a/README.md b/README.md index 52f533cb3..b47329dca 100644 --- a/README.md +++ b/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 diff --git a/local-run.sh b/local-run.sh index d606624a7..543305903 100755 --- a/local-run.sh +++ b/local-run.sh @@ -1 +1 @@ -gunicorn -c conf/gunicorn_local.py application:application \ No newline at end of file +gunicorn -c conf/gunicorn_local.py application:application diff --git a/package.json b/package.json new file mode 100644 index 000000000..498eaa59f --- /dev/null +++ b/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" + } +} diff --git a/static/js/app.tsx b/static/js/app.tsx new file mode 100644 index 000000000..f41266e1e --- /dev/null +++ b/static/js/app.tsx @@ -0,0 +1,2 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..cd8e1c6f6 --- /dev/null +++ b/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" + ] +} \ No newline at end of file diff --git a/typings.json b/typings.json new file mode 100644 index 000000000..b01c490f5 --- /dev/null +++ b/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" + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 000000000..a3156acb8 --- /dev/null +++ b/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; From 5a45f140c2bbac620e52722b55b7ef1a8f92c197 Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Tue, 18 Oct 2016 17:16:01 -0400 Subject: [PATCH 2/7] compile a typescript react component with webpack --- README.md | 2 ++ static/js/app.tsx | 9 ++++++++- static/js/directives/components/component.tsx | 10 ++++++++++ .../js/directives/components/testComponent.js | 20 ------------------- static/partials/repo-view.html | 13 ++---------- 5 files changed, 22 insertions(+), 32 deletions(-) create mode 100644 static/js/directives/components/component.tsx delete mode 100644 static/js/directives/components/testComponent.js diff --git a/README.md b/README.md index b47329dca..9813f2b15 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,8 @@ The username and password of the admin test account is `devtable` and `password` * `local-run` runs the web server for testing * `local-test` runs the unit test suite +* `npm run build` builds front end dependencies (webpack, typescript, react) +* `npm run watch` a watcher for webpack ### Development inside Docker diff --git a/static/js/app.tsx b/static/js/app.tsx index f41266e1e..b59f05101 100644 --- a/static/js/app.tsx +++ b/static/js/app.tsx @@ -1,2 +1,9 @@ import * as React from "react"; -import * as ReactDOM from "react-dom"; \ No newline at end of file +import * as angular from "angular"; + +import repoHeader from "./directives/components/component"; + +angular.module('quayPages').directive('repoHeader', function(reactDirective) { + return reactDirective(repoHeader); +}); + diff --git a/static/js/directives/components/component.tsx b/static/js/directives/components/component.tsx new file mode 100644 index 000000000..0c5b6919e --- /dev/null +++ b/static/js/directives/components/component.tsx @@ -0,0 +1,10 @@ +import * as React from "react"; + +class repoHeader extends React.Component<{}, {}> { + render () { + return

The component for the header

; + } +} + +export default repoHeader; + diff --git a/static/js/directives/components/testComponent.js b/static/js/directives/components/testComponent.js deleted file mode 100644 index 58bd0cd9f..000000000 --- a/static/js/directives/components/testComponent.js +++ /dev/null @@ -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'); -}); - diff --git a/static/partials/repo-view.html b/static/partials/repo-view.html index f996ff52c..f3da86092 100644 --- a/static/partials/repo-view.html +++ b/static/partials/repo-view.html @@ -4,17 +4,8 @@
- -
-
-
This is using the generic react-component directive
- -
-
-
This is creating a specific directive corresponding to a react component
- -
-
+ +
From 79545bc2bc9a9bddd7d1d2a1845146d6ce63919e Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Wed, 19 Oct 2016 12:43:30 -0400 Subject: [PATCH 3/7] Run gunicorn and webpack through Procfile --- Procfile | 3 +++ README.md | 7 ++++++- local-run.sh | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 Procfile diff --git a/Procfile b/Procfile new file mode 100644 index 000000000..097fc0825 --- /dev/null +++ b/Procfile @@ -0,0 +1,3 @@ +app: gunicorn -c conf/gunicorn_local.py application:application +webpack: npm run watch + diff --git a/README.md b/README.md index 9813f2b15..fd78efa2f 100644 --- a/README.md +++ b/README.md @@ -120,9 +120,14 @@ 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 (webpack, typescript, react) +* `npm run build` builds front end dependencies * `npm run watch` a watcher for webpack ### Development inside Docker diff --git a/local-run.sh b/local-run.sh index 543305903..84679d83d 100755 --- a/local-run.sh +++ b/local-run.sh @@ -1 +1 @@ -gunicorn -c conf/gunicorn_local.py application:application +goreman start From 9c128182abbf7f944380c29944d011da9df38d22 Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Thu, 20 Oct 2016 14:49:44 -0400 Subject: [PATCH 4/7] Remove node_modules in Dockerfile --- Dockerfile | 1 + 1 file changed, 1 insertion(+) diff --git a/Dockerfile b/Dockerfile index f83742d23..ea2a241c6 100644 --- a/Dockerfile +++ b/Dockerfile @@ -96,6 +96,7 @@ RUN apt-get remove -y --auto-remove python-dev g++ libjpeg62-dev libevent-dev li 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/ From 77bdcf893d8895290f2fef286abbbb3a7919e0f2 Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Mon, 24 Oct 2016 16:00:17 -0400 Subject: [PATCH 5/7] Add directives folder --- Dockerfile | 1 + 1 file changed, 1 insertion(+) diff --git a/Dockerfile b/Dockerfile index ea2a241c6..d1c407fc3 100644 --- a/Dockerfile +++ b/Dockerfile @@ -91,6 +91,7 @@ RUN cd grunt && npm install # Run grunt RUN cd grunt && grunt +ADD static/js/directives static/dist 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 From 6cf53848dd53f1db54167eb09382d2c3e654dd9d Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Mon, 24 Oct 2016 17:53:09 -0400 Subject: [PATCH 6/7] Add only subdirectory of static --- Dockerfile | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index d1c407fc3..7979a3177 100644 --- a/Dockerfile +++ b/Dockerfile @@ -77,7 +77,7 @@ RUN npm install RUN npm link typescript # Add static files -ADD static static +ADD static/js/directives static/dist # Run Webpack RUN npm run build @@ -91,7 +91,6 @@ RUN cd grunt && npm install # Run grunt RUN cd grunt && grunt -ADD static/js/directives static/dist 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 From 228fbb982ce50424e7b1fdd0b31c748e7efdbe7b Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Tue, 25 Oct 2016 15:36:21 -0400 Subject: [PATCH 7/7] Add only components --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 7979a3177..650fa52b9 100644 --- a/Dockerfile +++ b/Dockerfile @@ -77,7 +77,7 @@ RUN npm install RUN npm link typescript # Add static files -ADD static/js/directives static/dist +ADD static/js/directives/components static/dist/components # Run Webpack RUN npm run build