PIMS-633 Dockerize react-app (#2053)

Co-authored-by: GrahamS-Quartech <112989452+GrahamS-Quartech@users.noreply.github.com>

docker-compose.yml

@@ -33,27 +33,6 @@ services:
     networks:
       - pims
 
-  ####################### Express API #######################
-  express-api:
-    restart: 'no'
-    container_name: express-api
-    build:
-      context: express-api
-      target: Prod
-    env_file:
-      - .env
-    ports:
-      - ${API_HTTP_PORT:-5000}:5000
-    depends_on:
-      - postgres
-    healthcheck:
-      test: ['CMD', 'curl', '-f', 'http://localhost:5000/api/v2/health']
-      interval: 300s
-      timeout: 10s
-      retries: 3
-    networks:
-      - pims
-
   ####################### Frontend #######################
   frontend:
     profiles: ['prod']
@@ -96,6 +75,43 @@ services:
     networks:
       - pims
 
+  ####################### React App #######################
+  react-app:
+    tty: true
+    restart: 'no'
+    container_name: react-app
+    build:
+      context: react-app
+      target: prod
+    ports:
+      - ${APP_HTTP_PORT:-3000}:3000
+    depends_on:
+      - express-api
+    env_file: .env
+    networks:
+      - pims
+
+  ####################### Express API #######################
+  express-api:
+    restart: 'no'
+    container_name: express-api
+    build:
+      context: express-api
+      target: Prod
+    env_file:
+      - .env
+    ports:
+      - ${API_HTTP_PORT:-5000}:5000
+    depends_on:
+      - postgres
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:5000/api/v2/health']
+      interval: 300s
+      timeout: 10s
+      retries: 3
+    networks:
+      - pims
+
   ####################### Postgres #######################
   postgres:
     container_name: postgres

react-app/Dockerfile

@@ -0,0 +1,45 @@
+#############################################
+#                Base Build                 #
+#############################################
+FROM node:18.17.1-bullseye-slim as base
+
+# Set the working directory to /app
+WORKDIR /app
+
+# Copy files
+COPY ./src ./src
+COPY package.json .
+COPY tsconfig.json .
+COPY vite.config.ts .
+COPY ./index.html .
+
+# Npm install packages. Omits dev dependencies when NODE_ENV=production
+RUN npm set progress=false
+RUN npm i
+
+# Build the project.
+RUN npm run build
+
+#############################################
+#                NGINX Build                #
+#############################################
+## Stage 2: Nginx state for serving content
+FROM nginx:alpine-slim as prod
+
+# copy custom nginx configuration from host to container
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Set working directory to nginx asset directory
+WORKDIR /usr/share/nginx/html
+
+# Remove default nginx static assets
+RUN rm -rf ./*
+
+# Copy static assets from builder stage
+COPY --from=base /app/dist .
+
+# Provide nginx directory the required permissions
+RUN chmod g+rwx /var/cache/nginx /var/run /var/log/nginx
+
+# Run nginx with global directives and daemon off
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

react-app/nginx.conf

@@ -0,0 +1,10 @@
+server {
+  listen 3000;
+  location / {
+    root   /usr/share/nginx/html;
+    try_files $uri /index.html;
+  }
+  location /api/ {
+    proxy_pass "http://express-api:5000/";
+  }
+}