Fix docker setup

.dockerignore

@@ -5,5 +5,6 @@ node_modules/
 build/
 npm-debug.log
 Dockerfile
-.env
+docker-compose*.yml
 .env-secrets
+.env

.env.example

@@ -0,0 +1,18 @@
+# WEBAPP
+WEBAPP_HOST        = localhost
+WEBAPP_PORT        = 3000
+WEBAPP_BASE_URL    = http://localhost:3000
+
+# API
+API_HOST           = localhost
+API_PORT           = 3030
+
+# METAAPI
+EMBED_API_URL      = http://localhost:3050
+
+# 3rd party integrations
+SENTRY_DNS_PUBLIC  =
+MAPBOX_TOKEN       = pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ
+
+# MAINTENANCE
+MAINTENANCE        =

.gitignore

@@ -27,7 +27,6 @@ npm-debug.log
 /nbproject/private/
 /nbproject/
 
-# .env and .env-secrets
 .env
 .env-secrets
 

.travis.yml

@@ -1,25 +1,26 @@
 language: node_js
 node_js:
-  - "8"
+  - "10"
 services:
   - docker
 cache:
   yarn: true
   directories:
     - node_modules
 
-install:
-  # nothing
+# install current version of yarn
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
 
 jobs:
   include:
     - stage: Test and Build
       script:
       - yarn install --frozen-lockfile --non-interactive
-      - yarn test:env
-      - yarn test
+      - yarn run ci
     - script:
-      - docker build -t humanconnection/frontend-nuxt .
+      - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT -t humanconnection/frontend-nuxt .
 
 after_success:
   - if [ $TRAVIS_BRANCH == "master" ] && [ $TRAVIS_EVENT_TYPE == "push" ]; then

Dockerfile

@@ -1,46 +1,26 @@
-FROM node:8.9-alpine
-LABEL Description="This image is used to start the hc-frontend-nuxt" Vendor="Human-Connection gGmbH" Version="1.0" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
-
-# update unix packages
-RUN apk update && apk upgrade
-RUN apk add git
-RUN rm -rf /var/cache/apk/*
-
-# install global dependencies
-RUN yarn global add pm2 envsub
+FROM node:10-alpine
+LABEL Description="This image builds and runs the Human-Connection Frontend" Vendor="Human-Connection gGmbH" Version="1.0" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
 
 # expose the app port
 EXPOSE 3000
 
-# set environment variables
-ENV HOST=0.0.0.0
-ENV WEBAPP_HOST=0.0.0.0
-
-ENTRYPOINT ["./entrypoint.sh"]
-
-# create working directory
-RUN mkdir -p /var/www/
-WORKDIR /var/www/
-
-# install app dependencies
-COPY package.json /var/www/
-COPY yarn.lock /var/www/
-RUN yarn install --frozen-lockfile --non-interactive
-
-# copy the code to the docker image
-COPY . /var/www/
+# optional git commit hash
+ARG BUILD_COMMIT
+ENV BUILD_COMMIT=$BUILD_COMMIT
+ENV NODE_ENV=production
 
-# set execution rights on scripts and run the build script
-RUN chmod +x entrypoint.sh
-RUN chmod +x scripts/on-build.sh
-RUN chmod +x scripts/on-start.sh
-RUN sh scripts/on-build.sh
+RUN mkdir -p /WebApp/
+WORKDIR /WebApp/
+# --no-cache: download package index on-the-fly, no need to cleanup afterwards
+# --virtual: bundle packages, remove whole bundle at once, when done
+RUN apk --no-cache --virtual build-dependencies add git python make g++
 
-# buld application
-# ENV NODE_ENV=production #we seam to have issues with the production flag on install && build
-RUN yarn build
+RUN yarn global add pm2
 
-ENV NODE_ENV=production
+COPY package.json /WebApp/
+COPY yarn.lock /WebApp/
+RUN yarn install --production=false --frozen-lockfile --non-interactive
 
-# only keep production dependencies
-# RUN yarn install --frozen-lockfile --non-interactive
+COPY . /WebApp/
+RUN ["yarn", "run", "build"]
+CMD ["pm2", "start", "node", "build/main.js", "-n", "frontend", "-i", "2", "--attach"]

README.md

@@ -22,4 +22,4 @@ Connect with other developers over [Discord](https://discord.gg/NgVpvx9)<br />
 
 ## License 
 Copyright (c) 2018 [Human-Connection.org](https://human-connection.org)<br />
-Licensed under the [MIT](https://github.com/Human-Connection/WebApp/blob/develop/LICENSE.md) license.<br />
+Licensed under the [MIT](https://github.com/Human-Connection/WebApp/blob/develop/LICENSE.md) license.<br />

docker-compose.override.yml

@@ -0,0 +1,11 @@
+version: '3.5'
+
+services:
+  webapp:
+    environment:
+      - NODE_ENV=development
+    volumes:
+      - .:/WebApp/
+      - /WebApp/node_modules
+    command: yarn run dev
+    tty: true

docker-compose.staging.yml

@@ -0,0 +1,12 @@
+version: '3.5'
+
+services:
+  webapp:
+    environment:
+      - NODE_ENV=development # this is just `development` so https will not be enforced
+      - MAINTENANCE=${MAINTENANCE}
+      - SENTRY_DNS_PUBLIC=${SENTRY_DNS_PUBLIC}
+      - EMBED_API_URL=${EMBED_API_URL}
+        # these secrets should only be accessible on the server:
+      - SENTRY_DNS_PRIVATE=${SENTRY_DNS_PRIVATE}
+      - EMBED_API_TOKEN=${EMBED_API_TOKEN}

docker-compose.yml

@@ -1,16 +1,24 @@
-version: '2'
+version: '3.5'
 
 services:
-  frontend:
-    build: .
-    environment:
-      WEBAPP_HOST: localhost
-      WEBAPP_PORT: 3000
-      WEBAPP_BASE_URL: http://localhost:3000
-      API_HOST: http://localhost
-      API_PORT: 3030
-      MAPBOX_TOKEN:
-    stdin_open: true
-    tty: true
+  webapp:
+    image: humanconnection/frontend-nuxt:edge
     ports:
-    - 3000:3000/tcp
+      - "3000:3000"
+    build:
+      context: .
+      args:
+        BUILD_COMMIT: ${BUILD_COMMIT}
+    networks:
+      - hc-network
+    environment:
+      - WEBAPP_HOST=webapp
+      - WEBAPP_BASE_URL=http://localhost:3000
+      - API_HOST=api.127.0.0.1.xip.io
+      - WEBAPP_PORT=3000
+      - API_PORT=3030
+      - MAPBOX_TOKEN=pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ
+
+networks:
+  hc-network:
+    name: hc-network

layouts/blank.vue

@@ -38,7 +38,7 @@
         },
         title: 'loading...'
       }
-      if (process.env.NODE_ENV === 'development') {
+      if (this.$env.NODE_ENV === 'development') {
         head.script = [
           { src: 'https://cdn.jsdelivr.net/npm/tota11y@0.1.6/build/tota11y.min.js' }
         ]

layouts/default.vue

@@ -31,7 +31,7 @@
         },
         title: 'loading...'
       }
-      if (process.env.NODE_ENV === 'development') {
+      if (this.$env.NODE_ENV === 'development') {
         head.script = [
           { src: 'https://cdn.jsdelivr.net/npm/tota11y@0.1.6/build/tota11y.min.js' }
         ]

layouts/error.vue

@@ -38,7 +38,7 @@
       }
     },
     mounted () {
-      if (process.env.NODE_ENV === 'development') {
+      if (this.$env.NODE_ENV === 'development') {
         console.error(this.error.message)
       }
 

middleware/authenticated.js

@@ -1,7 +1,7 @@
 import { isEmpty } from 'lodash'
 
-export default async ({ store, route, redirect }) => {
-  let publicPages = process.env.publicPages
+export default async ({ store, env, route, redirect }) => {
+  let publicPages = env.publicPages
   publicPages.push('auth-logout')
   // only affect non public pages
   if (publicPages.indexOf(route.name) >= 0) {

nuxt.config.js

@@ -1,5 +1,17 @@
-require('dotenv').config()
 const path = require('path')
+const envWhitelist = [
+  'BUILD_COMMIT',
+  'NODE_ENV',
+  'WEBAPP_HOST',
+  'WEBAPP_PORT',
+  'WEBAPP_BASE_URL',
+  'API_HOST',
+  'API_PORT',
+  'EMBED_API_URL',
+  'SENTRY_DNS_PUBLIC',
+  'MAPBOX_TOKEN',
+  'MAINTENANCE'
+]
 
 module.exports = {
   env: {
@@ -93,7 +105,6 @@ module.exports = {
     }
   },
   plugins: [
-    {src: '~/plugins/env.js'},
     {src: '~/plugins/debug.js', ssr: false},
     {src: '~/plugins/raven-client.js', ssr: false},
     {src: '~/plugins/api.js'},
@@ -112,8 +123,9 @@ module.exports = {
     {src: '~/plugins/open-page-in-modal.js', ssr: false}
   ],
   modules: [
-    'cookie-universal-nuxt',
-    '@nuxtjs/dotenv'
+    ['@nuxtjs/dotenv', { only: envWhitelist }],
+    ['nuxt-env', { keys: envWhitelist }],
+    'cookie-universal-nuxt'
     // '@nuxtjs/pwa'
   ],
   router: {

package.json

@@ -24,25 +24,20 @@
   ],
   "engines": {
     "node": ">= 8.9.0",
-    "yarn": ">= 1.3.0"
+    "yarn": ">= 1.8.0"
   },
   "scripts": {
-    "dev": "yarn dev:env && backpack dev",
-    "dev:local": "sh scripts/run-local.sh",
-    "dev:debug": "yarn dev:env && backpack dev --inspect-brk=9229",
-    "dev:env": "sh scripts/on-dev.sh",
-    "build": "yarn build:env && nuxt build && backpack build",
-    "build:env": "sh scripts/on-build.sh",
-    "start": "yarn start:env && node build/main.js",
-    "start:pm2": "yarn start:env && pm2 start node build/main.js -n frontend -i 2 --attach",
-    "start:env": "sh scripts/on-start.sh",
-    "refresh": "rm -rf node_modules && yarn install && npm run dev",
+    "ci": "yarn run eslint && yarn run test",
+    "clean": "rm -rf build/*",
+    "dev": "backpack dev",
+    "dev:debug": "backpack dev --inspect=0.0.0.0:9229",
+    "build": "nuxt build && backpack build",
+    "start": "node build/main.js",
     "precommit": "yarn eslint",
     "eslint": "eslint --ext .js,.vue .",
     "styleguide": "vue-styleguidist server",
     "styleguide:build": "vue-styleguidist build",
     "test": "ava",
-    "test:env": "sh scripts/on-dev.sh",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "coverage": "nyc report --reporter=text-lcov > coverage.lcov && codecov"
@@ -52,7 +47,7 @@
     "@feathersjs/client": "^3.5.3",
     "@feathersjs/feathers": "^3.1.7",
     "@feathersjs/socketio": "^3.2.2",
-    "@nuxtjs/dotenv": "~1.1.0",
+    "@nuxtjs/dotenv": "^1.1.1",
     "@nuxtjs/pwa": "~2.0.5",
     "axios": "^0.18.0",
     "babel-eslint": "~8.2.5",
@@ -70,7 +65,6 @@
     "css-loader": "~0.28.10",
     "csv-parse": "~2.5.0",
     "emitter-js": "~2.0.1",
-    "envsub": "~3.1.0",
     "express": "~4.16.2",
     "express-healthcheck": "~0.1.0",
     "express-locale": "~1.0.5",
@@ -85,7 +79,8 @@
     "lodash": "~4.17.11",
     "mapbox-gl": "~0.45.0",
     "moment": "^2.22.2",
-    "nuxt": "~1.4.0",
+    "nuxt": "^1.4.2",
+    "nuxt-env": "^0.0.3",
     "parchment": "^1.1.4",
     "quill": "^1.3.6",
     "quill-delta": "^3.6.2",