From ad117b4d2c4e0992ca6288dd885e9d3038fa3674 Mon Sep 17 00:00:00 2001
From: s-prechtl <stefan@tague.at>
Date: Tue, 31 Jan 2023 08:37:02 +0100
Subject: [PATCH] Dockerized frontend

---
 .env.example                      |  1 +
 docker-compose.yml                | 10 ++++++++++
 frontend/.dockerignore            |  3 +++
 frontend/Dockerfile               | 11 +++++++++++
 frontend/src/components/Login.vue |  2 +-
 5 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 frontend/.dockerignore
 create mode 100644 frontend/Dockerfile

diff --git a/.env.example b/.env.example
index 821e903..f46c8c7 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,6 @@
 POSTGRES_PORT=5432
 EXPRESS_PORT=3000
+FRONTEND_PORT=8080
 
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=postgres
diff --git a/docker-compose.yml b/docker-compose.yml
index f21adcc..96250c1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -21,3 +21,13 @@ services:
     ports:
       - "${EXPRESS_PORT}:3000"
 
+  vue:
+    build: frontend
+    container_name: frontend
+    ports:
+      - "${FRONTEND_PORT}:8080"
+
+
+    volumes:
+      - ./frontend:/app
+
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..3298622
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+.gitignore
+README.md
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..e8524c9
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,11 @@
+FROM node:18
+
+COPY . /app
+WORKDIR /app
+
+RUN npm install
+
+EXPOSE 8080
+
+ENTRYPOINT ["npm", "run", "serve"]
+
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index d5bf1d5..3be8534 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -1,7 +1,7 @@
 <template>
   <h2>Enter a username</h2>
   <div class="form-floating mb-3">
-    <input type="email" class="form-control" id="floatingInput" placeholder="example name" v-model="username">
+    <input class="form-control" id="floatingInput" placeholder="example name" v-model="username">
     <label for="floatingInput">Username</label>
     <RRButton @click="setUser()" text="Confirm"></RRButton>
   </div>