rebuild frontend app

- based on a webpack boilerplate
- remove jQuery
- update docker and jenkins

Jenkinsfile

@@ -29,7 +29,7 @@ pipeline {
 
   options {
     disableConcurrentBuilds()
-    buildsDiscarder(logRotator(numToKeepStr: '15'))
+    buildDiscarder(logRotator(numToKeepStr: '15'))
     ansiColor('xterm')
     timeout(time: 15, unit: 'MINUTES')
   }
@@ -69,7 +69,7 @@ pipeline {
 
         // Build image, here only express
         // TODO: check this
-        sh "docker-compose -f docker/docker-compose-CI.yml build"
+        sh "docker-compose -f docker-compose-CI.yml build"
       }
 
       post {
@@ -91,7 +91,7 @@ pipeline {
       steps {
         // Start application serivces (-d: run in background)
         // TODO: check this
-        sh "docker-compose -f docker/docker-compose-CI.yml up -d"
+        sh "docker-compose -f docker-compose-CI.yml up -d"
         sleep 15
         sh "docker ps -a"
       }
@@ -136,7 +136,7 @@ pipeline {
       post {
         always {
           echo "##### Remove stack #####"
-          sh "docker-compose -f docker/docker-compose-CI.yml down"
+          sh "docker-compose -f docker-compose-CI.yml down"
           sleep 10
         }
 
@@ -186,7 +186,7 @@ pipeline {
           sh """
             docker -H $IP_MANAGER_SWARM:2375 stack rm $REPO
             docker -H $IP_MANAGER_SWARM:2375 service ls
-            docker -H $IP_MANAGER_SWARM:2375 stack deploy -c docker/docker-compose-deploy.yml $REPO --with-registry-auth
+            docker -H $IP_MANAGER_SWARM:2375 stack deploy -c docker-compose-deploy.yml $REPO --with-registry-auth
             sleep 5
             docker -H $IP_MANAGER_SWARM:2375 stack ls
             docker -H $IP_MANAGER_SWARM:2375 service ls
@@ -309,8 +309,7 @@ def slackNotify(String buildStatus = 'STARTED') {
     colorCode = '#EB3831'
   }
 
-  // def msg = "${buildStatus}: `${env.JOB_NAME}` #${env.BUILD_NUMBER}:\n${env.BUILD_URL}"
-  def msg = "Here is the env: ${env}"
+  def msg = "${buildStatus}: `${env.JOB_NAME}` #${env.BUILD_NUMBER}:\n${env.BUILD_URL}"
 
   slackSend(color: colorCode, message: msg)
 }

docker-compose-CI.yml

@@ -5,5 +5,6 @@ services:
     image: majdigital/${COMPOSE_PROJECT_NAME}_frontend
     container_name: ${COMPOSE_PROJECT_NAME}_frontend
     build: ./frontend/
+    command: sh -c 'npm run build && npm run serve'
     ports:
-      - "8080:8080"
+      - "3000:8080"

docker-compose-deploy.yml

@@ -68,10 +68,10 @@ services:
       placement:
         constraints: [node.role == worker]
       labels:
-        traefik.port: ${PORT}
+        traefik.port: 8080
         traefik.docker.network: 'TRAEFIK_traefik-net'
         traefik.frontend.rule: 'Host:${DEPLOY_URL}'
-      command: sh -c 'yarn run build'
-      networks:
-        - default
-        - TRAEFIK_traefik-net
+    command: sh -c 'npm run build && npm run serve'
+    networks:
+      - default
+      - TRAEFIK_traefik-net

docker-compose.yml

@@ -59,12 +59,12 @@ services:
     networks:
       - app-tier
   frontend:
+    image: majdigital/bigworldgraph_frontend
+    container_name: bigworldgraph_frontend
     build: ./frontend/
-    image: bigworldgraph_frontend
+    command: sh -c 'npm run start'
     ports:
-        - "8080:8080"
-    networks:
-        - app-tier
+      - "8080:8080"
     volumes:
-        - ./frontend:/frontend
-        - /frontend/node_modules
+      - ./frontend:/usr/app/
+      - /usr/app/node_modules/

frontend/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.0.0"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

frontend/.browserslistrc

@@ -0,0 +1,10 @@
+[production staging]
+>5%
+last 2 versions
+Firefox ESR
+not ie < 11
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 edge version

frontend/.eslintignore

@@ -0,0 +1 @@
+src/scripts/vendor

frontend/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "semi": 2
+  }
+}

frontend/.gitignore

@@ -1 +1,14 @@
-node_modules
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+
+npm-debug.log
+yarn-error.log
+yarn.lock
+.yarnclean
+.vscode

frontend/.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "lts/*"
+  - "node"
+script: npm run build

frontend/Dockerfile

@@ -1,15 +1,9 @@
-FROM jmfirth/webpack:wheezy
+FROM node:10-alpine
 
-ENV NPM_CONFIG_LOGLEVEL warn
-# 2: create directory:
-RUN mkdir -p /frontend
-COPY . /frontend
+ENV HOST 0.0.0.0
 
-WORKDIR /frontend
+WORKDIR /usr/app/
 
-RUN yarn
-# 4: expose port
+COPY . .
 
-EXPOSE 8080
-
-CMD ["yarn", "start"]
+RUN npm ci

frontend/README.md

@@ -0,0 +1,30 @@
+# Bigworldgraph frontend
+
+Project based on [this boilerplate](https://github.com/wbkd/webpack-starter).
+
+
+### Installation
+
+```
+npm install
+```
+
+### Start Dev Server
+
+```
+npm start
+```
+
+### Build Prod Version
+
+```
+npm run build
+```
+
+### Features:
+
+* ES6 Support via [babel](https://babeljs.io/) (v7)
+* SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader)
+* Linting via [eslint-loader](https://github.com/MoOx/eslint-loader)
+
+When you run `npm run build` we use the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to move the css to a separate file. The css file gets included in the head of the `index.html`.