From 9015b0902601a79a5551ac94cfd81bab8798be86 Mon Sep 17 00:00:00 2001 From: Ian Minoso Date: Tue, 27 Sep 2016 14:06:28 -0400 Subject: [PATCH] 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;