reformat; get_id in App.vue

api/Dockerfile

@@ -0,0 +1,4 @@
+FROM node:lts-alpine
+LABEL maintainer="joern-michael.miehe@lenaisten.de"
+
+CMD [ "tail", "-f", "/dev/null" ]

dev-proxy/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx:stable-alpine
+LABEL maintainer="joern-michael.miehe@lenaisten.de"
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf

dev-proxy/nginx.conf

@@ -0,0 +1,23 @@
+upstream ui {
+    server ui:8080;
+}
+
+upstream api {
+    server api:3000;
+}
+
+server {
+    listen 80 default_server;
+    server_name _;
+
+    error_log  /dev/stderr;
+    access_log /dev/stdout;
+
+    location / {
+        proxy_pass http://ui;
+    }
+    
+    location /api/ {
+        proxy_pass http://api;
+    }
+}

docker-compose.yml

@@ -4,12 +4,24 @@ volumes:
     frontend_home:
 
 services:
-    dev:
-        build: ./docker
-        restart: "no"
+    ui:
+        build: ui/docker
+        restart: 'unless-stopped'
         volumes: 
             - "frontend_home:/home/node"
-            - "${PWD}:/srv/vue/bday2020"
+            - "${PWD}/ui:/srv/vue/bday2020"
         ports: 
             - 8000:8000
-            - 8080:8080
+
+    api:
+        build: api
+        restart: 'no'
+
+    dev-proxy:
+        build: dev-proxy
+        restart: 'no'
+        ports: 
+            - 8080:80
+        depends_on: 
+            - ui
+            - api

src/components/BDay.vue

@@ -1,28 +0,0 @@
-<template>
-    <div class="bday">
-        <h1>Alles Gute zu Deinem Geburtstag!</h1>
-        <vue-plyr>
-            <video poster='../assets/poster.png' autoplay="true">
-                <source src='/api/part1_240.mp4' type='video/mp4' size='240'>
-                <source src='/api/part1_360.mp4' type='video/mp4' size='360'>
-                <source src='/api/part1_480.mp4' type='video/mp4' size='480'>
-            </video>
-        </vue-plyr>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'BDay',
-    mounted: () => {
-        document.title = 'Herzlichen Glückwunsch!'
-    }
-}
-</script>
-
-<style scoped>
-div.bday {
-    margin: auto;
-    max-width: 850px;
-}
-</style>

ui/src/App.vue

@@ -1,26 +1,33 @@
 <template>
   <div id="app">
-    <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png">
+    <img class="logo" alt="Lenaistenlogo" src="./assets/logo.png" />
     <BDay />
   </div>
 </template>
 
 <script>
-import BDay from './components/BDay.vue'
+import BDay from "./components/BDay.vue";
 
 export default {
-  name: 'App',
+  name: "App",
+
   components: {
-    BDay
-  }
-}
+    BDay,
+  },
+
+  computed: {
+    get_id: () => {
+      return window.location.pathname.substring(1);
+    },
+  },
+};
 </script>
 
 <style>
 html {
-	background-image: url('./assets/bg.jpg');
-	height: 100%; 
-	/* overflow:hidden; */
+  background-image: url("./assets/bg.jpg");
+  height: 100%;
+  /* overflow:hidden; */
 }
 
 #app {

ui/src/components/BDay.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="bday">
+    <h1>Alles Gute zu Deinem Geburtstag!</h1>
+    <vue-plyr>
+      <video poster="../assets/poster.png" autoplay="true">
+        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
+        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
+        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
+      </video>
+    </vue-plyr>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BDay",
+
+  mounted: () => {
+    document.title = "Herzlichen Glückwunsch!";
+  },
+};
+</script>
+
+<style scoped>
+div.bday {
+  margin: auto;
+  max-width: 850px;
+}
+</style>

ui/vue.config.js

@@ -0,0 +1,6 @@
+// vue.config.js
+module.exports = {
+    devServer: {
+        disableHostCheck: true
+    }
+}