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..650fa52b9 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/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/ 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 52f533cb3..fd78efa2f 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 @@ -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 diff --git a/local-run.sh b/local-run.sh index d606624a7..84679d83d 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 +goreman start 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..b59f05101 --- /dev/null +++ b/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); +}); + 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
- -
-
+ +
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;