rdrf #602 copied Tamas' changes into RDRF mutatis mutandum

.gitignore

@@ -38,5 +38,6 @@ startup
 *.po
 *.mo
 .ropeproject
+yarn_cache/
 
 

Dockerfile-node

@@ -0,0 +1,15 @@
+# Container used to build bpaotu
+FROM node:9.11.1
+MAINTAINER https://github.com/muccg/bpaotu
+
+RUN env | sort
+
+COPY docker-entrypoint-node.sh /app/docker-entrypoint-node.sh
+
+VOLUME ["/data"]
+
+ENV HOME /data
+WORKDIR /data
+
+ENTRYPOINT ["/app/docker-entrypoint-node.sh"]
+CMD ["build"]

Jenkinsfile

@@ -16,6 +16,7 @@ node {
             ./develop.sh build base
             ./develop.sh build builder
             ./develop.sh build dev
+            ./develop.sh build node
             ./develop.sh check-migrations
         ''')
     }
@@ -41,6 +42,9 @@ node {
         dockerStage('Prod build') {
             sh('''
                 ./develop.sh run-builder
+                ./develop.sh run-builder checkout
+                ./develop.sh run build node
+                ./develop.sh run-builder releasetarball
                 ./develop.sh build prod
             ''')
         }

docker-compose-build.yml

@@ -27,6 +27,20 @@ services:
     volumes:
       - ./build:/data
 
+  node:
+      build:
+          context: ./
+          dockerfile: Dockerfile-node
+      image: muccg/rdrf-node
+      working_dir: /data/app/rdrf/rdrf/frontend
+      command: build
+      environment:
+          YARN_CACHE_FOLDER: /opt/yarn_cache
+      volumes:
+        - ./build:/data
+        - ./yarn_cache:/opt/yarn_cache
+
+
   dev:
     build:
       context: ./

docker-compose.yml

@@ -34,6 +34,17 @@ services:
     depends_on:
       - uwsgi
 
+  node:
+    image: muccg/rdrf-node
+    command: "watch"
+    working_dir: /app/rdrf/rdrf/frontend
+    environment:
+        YARN_CACHE_FOLDER: /opt/yarn_cache
+    volumes:
+      - ./yarn_cache:/opt/yarn_cache
+    volumes_from:
+      - datadev
+
   runserver:
     extends:
       file: docker-compose-common.yml

docker-entrypoint-build.sh

@@ -7,6 +7,24 @@ info () {
 trap exit SIGHUP SIGINT SIGTERM
 env | grep -iv PASS | sort
 
+if [ "$1" = 'checkout' ]; then
+    info "[Run] Clone the source code"
+    info "BUILD_VERSION ${BUILD_VERSION}"
+    info "PROJECT_SOURCE ${PROJECT_SOURCE}"
+
+    set -e
+    rm -rf "/app/"
+    mkdir "/app/"
+
+    # clone and install the app
+    set -x
+    cd /app
+    git clone --depth=1 --branch="${GIT_BRANCH}" "${PROJECT_SOURCE}" .
+    git rev-parse HEAD > .version
+    cat .version
+    exit 0
+fi
+
 # prepare a tarball of build
 if [ "$1" = 'releasetarball' ]; then
     info "[Run] Preparing a release tarball"
@@ -19,8 +37,6 @@ if [ "$1" = 'releasetarball' ]; then
     # clone and install the app
     set -x
     cd /app
-    git clone --depth=1 --branch="${GIT_BRANCH}" "${PROJECT_SOURCE}" .
-    git rev-parse HEAD > .version
     cat .version
     pip install --upgrade "setuptools>=36.0.0,<=37.0.0"
     pip install -e "${PROJECT_NAME}"
@@ -35,6 +51,7 @@ if [ "$1" = 'releasetarball' ]; then
     TARBALL="/data/${PROJECT_NAME}-${BUILD_VERSION}.tar"
     # shellcheck disable=SC2037
     TAR_OPTS="--exclude-vcs
+              --exclude=app/rdrf/rdrf/frontend/*
               --verify
               --checkpoint=1000
               --checkpoint-action=dot
@@ -57,7 +74,7 @@ if [ "$1" = 'releasetarball' ]; then
     exit 0
 fi
 
-info "[RUN]: Builtin command not provided [releasetarball]"
+info "[RUN]: Builtin command not provided [checkout|releasetarball]"
 info "[RUN]: $*"
 
 exec "$@"

docker-entrypoint-node.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+info () {
+    printf "\r  [\033[00;34mINFO\033[0m] %s\n" "$1"
+}
+
+trap exit SIGHUP SIGINT SIGTERM
+env | grep -iv PASS | sort
+
+if [ "$1" = 'build' ]; then
+    info "[Run] Building frontend JS bundle"
+    info "BUILD_VERSION ${BUILD_VERSION}"
+    info "PROJECT_SOURCE ${PROJECT_SOURCE}"
+
+    set -x
+    yarn install --frozen-lockfile
+    npm run build
+
+    exit 0
+fi
+
+if [ "$1" = 'watch' ]; then
+    info "[Run] Watch source and recompile on change"
+
+    yarn install
+    npm run watch
+
+    exit 0
+fi
+
+info "[RUN]: Builtin command not provided [build|watch]"
+info "[RUN]: $*"
+
+exec "$@"

rdrf/rdrf/context_processors/context_processors.py

@@ -1,5 +1,9 @@
 from django.conf import settings
 
+def production(request):
+    return {'production': settings.PRODUCTION}
+
+
 
 def common_settings(request):
     return {

rdrf/rdrf/frontend/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rdrf",
+  "version": "1.0.0",
+  "description": "Frontend code for RDRF",
+  "main": "main.js",
+  "scripts": {
+    "build": "webpack --config webpack.prod.js --mode production",
+    "watch": "webpack --config webpack.dev.js --mode development --watch"
+  },
+  "sideEffects": false,
+  "repository": "https://github.com/muccg/rdrf",
+  "author": "Centre of Comparitive Genomics",
+  "license": "AGPL-3.0",
+  "private": false,
+  "devDependencies": {
+    "@types/datatables.net": "^1.10.9",
+    "@types/jquery": "^3.3.1",
+    "@types/lodash": "^4.14.108",
+    "bootstrap": "3",
+    "css-loader": "^0.28.11",
+    "datatables.net": "^1.10.16",
+    "datatables.net-bs": "^1.10.16",
+    "file-loader": "^1.1.11",
+    "jquery": "^3.3.1",
+    "lodash": "^4.17.10",
+    "popper.js": "^1.14.3",
+    "spin.js": "^4.0.0",
+    "style-loader": "^0.21.0",
+    "ts-loader": "^4.3.0",
+    "typescript": "^2.8.3",
+    "uglifyjs-webpack-plugin": "^1.2.5",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.8.1",
+    "webpack-bundle-analyzer": "^2.13.0",
+    "webpack-cli": "^2.1.3",
+    "webpack-merge": "^4.1.2"
+  }
+}

rdrf/rdrf/frontend/src/index.ts

@@ -0,0 +1,14 @@
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import * as search from './search';
+
+
+declare global {
+    interface Window {
+      otu_search_config: search.SearchConfig
+    }
+};
+
+// TODO revise if we should switch to multiple entry points instead.
+// ie. one entrypoint for each page
+export { init as init_tables } from './tables';

rdrf/rdrf/frontend/src/print.ts

@@ -0,0 +1,4 @@
+
+export function info(msg: string) {
+    console.log(msg);
+}

rdrf/rdrf/frontend/tsconfig.js

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "target": "es5",
+    "lib": ["es2015", "es2017", "dom"],
+    "jsx": "preserve",
+    "allowJs": true,
+  },
+  "files": [
+    "src/index.ts"
+  ]
+}

rdrf/rdrf/frontend/webpack.common.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index.ts',
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        options: {
+          configFile: path.resolve(__dirname, 'tsconfig.js')
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: 'url-loader'
+      }
+    ]
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ]
+  },
+  output: {
+    filename: '[name]-bundle.js',
+    path: path.resolve(__dirname, '../static/js'),
+    library: 'otu',
+    libraryTarget: 'var'
+  },
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+        chunks: 'all',
+        cacheGroups: {
+            default: {
+                enforce: true,
+                priority: 1
+            },
+            vendors: {
+                test: /[\\/]node_modules[\\/]/,
+                priority: 2,
+                name: 'vendors',
+                enforce: true,
+                chunks: 'all'
+            }
+        }
+    }
+  }
+};

rdrf/rdrf/frontend/webpack.dev.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  devtool: 'inline-source-map'
+});

rdrf/rdrf/frontend/webpack.prod.js

@@ -0,0 +1,25 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  output: {
+    filename: '[name]-bundle.min.js'
+  },
+  plugins: [
+    /*
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static'
+    }),
+    */
+    new UglifyJSPlugin({
+      sourceMap: true
+    }),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    })
+  ]
+});