From 8155761cf41aea2cff8c94113874c8d9f7d5d6a9 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Mon, 4 Dec 2023 17:09:14 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=B3=20Set=20up=20Docker=20config=20for?=
 =?UTF-8?q?=20new-frontend=20(#564)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/.env                                      |  1 +
 src/docker-compose.override.yml               | 12 ++++++++++-
 src/docker-compose.yml                        | 12 +++++++++++
 src/new-frontend/.dockerignore                |  2 ++
 src/new-frontend/Dockerfile                   | 21 +++++++++++++++++++
 src/new-frontend/nginx-backend-not-found.conf |  9 ++++++++
 src/new-frontend/nginx.conf                   | 11 ++++++++++
 7 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/new-frontend/.dockerignore
 create mode 100644 src/new-frontend/Dockerfile
 create mode 100644 src/new-frontend/nginx-backend-not-found.conf
 create mode 100644 src/new-frontend/nginx.conf

diff --git a/src/.env b/src/.env
index c422332..9ffb6a7 100644
--- a/src/.env
+++ b/src/.env
@@ -13,6 +13,7 @@ TRAEFIK_PUBLIC_TAG=traefik-public
 DOCKER_IMAGE_BACKEND=backend
 DOCKER_IMAGE_CELERYWORKER=celery
 DOCKER_IMAGE_FRONTEND=frontend
+DOCKER_IMAGE_NEW_FRONTEND=new-frontend
 
 # Backend
 BACKEND_CORS_ORIGINS="[\"http://localhost\", \"http://localhost:4200\", \"http://localhost:3000\", \"http://localhost:8080\", \"https://localhost\", \"https://localhost:4200\", \"https://localhost:3000\", \"https://localhost:8080\", \"http://local.dockertoolbox.tiangolo.com\", \"http://localhost.tiangolo.com\"]"
diff --git a/src/docker-compose.override.yml b/src/docker-compose.override.yml
index cb9b609..469caed 100644
--- a/src/docker-compose.override.yml
+++ b/src/docker-compose.override.yml
@@ -80,9 +80,19 @@ services:
     labels:
       - traefik.enable=true
       - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
-      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
+      # - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
+      - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=Host(`old-frontend.localhost.tiangolo.com`)
       - traefik.http.services.${STACK_NAME?Variable not set}-frontend.loadbalancer.server.port=80
 
+  new-frontend:
+    build:
+      context: ./new-frontend
+    labels:
+      - traefik.enable=true
+      - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
+      - traefik.http.routers.${STACK_NAME?Variable not set}-new-frontend-http.rule=PathPrefix(`/`)
+      - traefik.http.services.${STACK_NAME?Variable not set}-new-frontend.loadbalancer.server.port=80
+
 networks:
   traefik-public:
     # For local dev, don't expect an external Traefik network
diff --git a/src/docker-compose.yml b/src/docker-compose.yml
index 15b9282..7c8d1f4 100644
--- a/src/docker-compose.yml
+++ b/src/docker-compose.yml
@@ -190,6 +190,18 @@ services:
         - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
         - traefik.http.routers.${STACK_NAME?Variable not set}-frontend-http.rule=PathPrefix(`/`)
         - traefik.http.services.${STACK_NAME?Variable not set}-frontend.loadbalancer.server.port=80
+  
+  new-frontend:
+    image: '${DOCKER_IMAGE_NEW_FRONTEND?Variable not set}:${TAG-latest}'
+    build:
+      context: ./new-frontend
+    deploy:
+      labels:
+        - traefik.enable=true
+        - traefik.constraint-label-stack=${TRAEFIK_TAG?Variable not set}
+        - traefik.http.routers.${STACK_NAME?Variable not set}-new-frontend-http.rule=PathPrefix(`/`)
+        - traefik.http.services.${STACK_NAME?Variable not set}-new-frontend.loadbalancer.server.port=80
+
 
 volumes:
   app-db-data:
diff --git a/src/new-frontend/.dockerignore b/src/new-frontend/.dockerignore
new file mode 100644
index 0000000..76add87
--- /dev/null
+++ b/src/new-frontend/.dockerignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/src/new-frontend/Dockerfile b/src/new-frontend/Dockerfile
new file mode 100644
index 0000000..c676821
--- /dev/null
+++ b/src/new-frontend/Dockerfile
@@ -0,0 +1,21 @@
+# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
+FROM node:20 as build-stage 
+
+WORKDIR /app
+
+COPY package*.json /app/
+
+RUN npm install
+
+COPY ./ /app/
+
+RUN npm run build
+
+
+# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
+FROM nginx:1
+
+COPY --from=build-stage /app/dist/ /usr/share/nginx/html
+
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf
diff --git a/src/new-frontend/nginx-backend-not-found.conf b/src/new-frontend/nginx-backend-not-found.conf
new file mode 100644
index 0000000..f6fea66
--- /dev/null
+++ b/src/new-frontend/nginx-backend-not-found.conf
@@ -0,0 +1,9 @@
+location /api {
+    return 404;
+}
+location /docs {
+    return 404;
+}
+location /redoc {
+    return 404;
+}
diff --git a/src/new-frontend/nginx.conf b/src/new-frontend/nginx.conf
new file mode 100644
index 0000000..ed11d3a
--- /dev/null
+++ b/src/new-frontend/nginx.conf
@@ -0,0 +1,11 @@
+server {
+  listen 80;
+  
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+  
+  include /etc/nginx/extra-conf.d/*.conf;
+}