[WIP] Feathers vuex

.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

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

.travis.yml

@@ -16,10 +16,9 @@ jobs:
     - 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,28 @@
-FROM node:8.9-alpine
+FROM node:alpine
 LABEL Description="This image is used to start the hc-frontend-nuxt" Vendor="Human-Connection gGmbH" Version="1.0" Maintainer="Human-Connection gGmbH ([email protected])"
 
-# 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
-
 # 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
+# optional git commit hash
+ARG BUILD_COMMIT
+ENV BUILD_COMMIT=$BUILD_COMMIT
+ENV NODE_ENV=production
 
-# copy the code to the docker image
-COPY . /var/www/
+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++
 
-# 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 yarn global add pm2
 
-# buld application
-# ENV NODE_ENV=production #we seam to have issues with the production flag on install && build
-RUN yarn build
+COPY package.json /WebApp/
+COPY yarn.lock /WebApp/
+RUN yarn install --production=false --frozen-lockfile --non-interactive
 
-ENV NODE_ENV=production
+RUN apk del build-dependencies
 
-# 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

@@ -19,7 +19,7 @@
 
 This is the nuxt + express version of our WebApp as nuxt.js seams to be more stable and we have better options for keeping it updated.
 
-## Build Setup
+## Local installation
 
 > we recommend to install the project locally for the best development ease and performance
 
@@ -34,6 +34,12 @@ $ yarn dev
 $ yarn start
 ```
 
+Create your individual set of environment variables:
+```sh
+$ cp .env.example .env
+# now open .env and change it according to your setup
+```
+
 For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
 
 ## Env Vars

docker-compose.override.yml

@@ -0,0 +1,68 @@
+version: '3'
+
+services:
+  webapp:
+    networks:
+      hc-network:
+        ipv4_address: 172.25.0.20
+    environment:
+      - NODE_ENV=development
+      - MAINTENANCE=${MAINTENANCE}
+      - WEBAPP_HOST=172.25.0.20
+      - WEBAPP_BASE_URL=http://172.25.0.20:3000
+      - API_HOST=172.25.0.11
+      - WEBAPP_PORT=3000
+      - API_PORT=3030
+      - MAPBOX_TOKEN=pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ
+      - 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}
+    depends_on:
+      - api
+  mongo:
+    image: mongo
+    networks:
+      - hc-network
+    command: "--smallfiles --logpath=/dev/null"
+  api:
+    image: humanconnection/api-feathers
+    depends_on:
+      - maildev
+      - thumbor
+      - mongo
+    environment:
+      - NODE_ENV=staging
+    ports:
+      - "3030:3030"
+    stdin_open: true
+    tty: true
+    networks:
+      hc-network:
+        ipv4_address: 172.25.0.11
+  thumbor:
+    networks:
+      - hc-network
+  maildev:
+    image: djfarrelly/maildev
+    networks:
+      - hc-network
+    ports:
+      - "1080:80"
+      - "1025:25"
+  thumbor:
+    image: apsl/thumbor
+    networks:
+      - hc-network
+    ports:
+      - "8000:8000"
+
+networks:
+  hc-network:
+    driver: bridge
+    ipam:
+      driver: default
+      config:
+      -
+        subnet: 172.25.0.0/16

docker-compose.yml

@@ -1,16 +1,13 @@
-version: '2'
+version: '3'
 
 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:
+  webapp:
+    image: humanconnection/frontend-nuxt
+    build:
+      context: .
+      args:
+        BUILD_COMMIT: ${BUILD_COMMIT}
     stdin_open: true
     tty: true
     ports:
-    - 3000:3000/tcp
+      - 3000:3000/tcp

helpers/createApiClient.js

@@ -0,0 +1,65 @@
+import feathers from '@feathersjs/feathers'
+import socketio from '@feathersjs/socketio-client'
+import io from 'socket.io-client'
+import authentication from '@feathersjs/authentication-client'
+import urlHelper from '~/helpers/urls'
+import Cookie from 'cookie-universal'
+
+const authKey = 'feathers-jwt'
+const endpoint = urlHelper.buildEndpointURL(process.env.API_HOST, { port: process.env.API_PORT })
+let socket
+if (process.env.ENV === 'production') {
+  socket = socketio(io(endpoint), { timeout: 20000 })
+  if (process.server) {
+    setTimeout(() => {
+      // close server connection as content was delivered already after 30 seconds at latest
+      try {
+        socket.close()
+      } catch (err) {
+        console.log(err)
+      }
+    }, 30000)
+  }
+} else {
+  socket = socketio(io(endpoint))
+}
+
+let createApiClient = ({req, res}) => {
+  const cookies = Cookie(req, res)
+  const storageMapping = {
+    getItem: (key) => {
+      const res = cookies.get(key)
+      // console.log(`## STORAGE: getItem(${key})`, res)
+      return res
+    },
+    setItem: (key, value, options) => {
+      const res = cookies.set(key, value, options)
+      // console.log(`## STORAGE: setItem(${key}, ${value}, ${options})`, res)
+      return res
+    },
+    removeItem: (key) => {
+      const res = cookies.remove(key)
+      // console.log(`## STORAGE: removeItem(${key})`, res)
+      return res
+    },
+    clear: () => {
+      const res = cookies.removeAll()
+      if (process.env.NODE_ENV === 'development') {
+        console.log(`## STORAGE: clear()`, res)
+      }
+      return res
+    }
+  }
+
+  let api = feathers()
+    .configure(socket)
+    .configure(authentication({
+      storage: storageMapping,
+      storageKey: authKey,
+      cookie: authKey
+    }))
+
+  return api
+}
+
+export default createApiClient

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/[email protected]/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/[email protected]/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/auth.js

@@ -0,0 +1,8 @@
+// If it's a private page and there's no payload, redirect.
+export default function (context) {
+  const { store, redirect, route } = context
+  const { auth } = store.state
+  if (!auth.publicPages.includes(route.name) && !auth.payload) {
+    return redirect('/auth/login')
+  }
+}