From f629716647d23cf1bea3cf4b08c9d314724adfaf Mon Sep 17 00:00:00 2001
From: Amirhesam Adibinia <hesamadibi80@gmail.com>
Date: Mon, 27 Nov 2023 20:14:56 +0330
Subject: [PATCH] feat: Dockerize frontend project (#19)

* feat: dockerize frontend project

* fix: change Components directory to components
---
 docker-compose.yml                             | 18 ++++++++++++++++--
 frontend/.dockerignore                         |  5 +++++
 frontend/Dockerfile                            |  9 +++++++++
 .../pages/ForgotPassword/ForgotPassword.jsx    |  2 +-
 frontend/src/pages/Signup/Signup.jsx           |  2 +-
 frontend/src/pages/my-account/MyAccount.jsx    |  2 +-
 frontend/src/pages/workshops/WorkshopsPage.jsx |  4 ++--
 7 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 frontend/.dockerignore
 create mode 100644 frontend/Dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
index dc05008..f93fab2 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -32,20 +32,34 @@ services:
       timeout: 2s
       retries: 10
 
+  frontend:
+    image: aaissaut/aaiss:frontend
+    build:
+      context: ./frontend
+      cache_from:
+        - aaissaut/aaiss:frontend
+    volumes:
+      - static_files:/run/dist
+    ports:
+      - "8080:8080"
+
   caddy:
     depends_on:
       backend:
         condition: service_healthy
+      frontend:
+        condition: service_completed_successfully
     image: caddy:2.7.3
     volumes:
       - ./deployment/caddy:/etc/caddy
       - ./backend/static:/static
       - ./backend/media:/media
-      - ./dist:/dist
+      - static_files:/dist:ro
       - caddy_data:/data/caddy
     ports:
       - "80:80"
       - "443:443"
 
 volumes:
-  caddy_data:
\ No newline at end of file
+  caddy_data:
+  static_files:
\ No newline at end of file
diff --git a/frontend/.dockerignore b/frontend/.dockerignore
new file mode 100644
index 0000000..c4e72ca
--- /dev/null
+++ b/frontend/.dockerignore
@@ -0,0 +1,5 @@
+.git
+.gitignore
+README.md
+dist
+node_modules
\ No newline at end of file
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
new file mode 100644
index 0000000..c876095
--- /dev/null
+++ b/frontend/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:20.10.0
+
+WORKDIR /run
+
+COPY package*.json .
+RUN npm install
+
+COPY . .
+RUN npm run build
\ No newline at end of file
diff --git a/frontend/src/pages/ForgotPassword/ForgotPassword.jsx b/frontend/src/pages/ForgotPassword/ForgotPassword.jsx
index 3dff5d7..bf22b2a 100644
--- a/frontend/src/pages/ForgotPassword/ForgotPassword.jsx
+++ b/frontend/src/pages/ForgotPassword/ForgotPassword.jsx
@@ -1,6 +1,6 @@
 import { Button, FormControl } from '@mui/material'
 import React from 'react'
-import FormTextField from '../../Components/Form/FormTextField'
+import FormTextField from '../../components/Form/FormTextField'
 import '../../css/ForgotPassword.css'
 export default function ForgotPassword() {
   return (
diff --git a/frontend/src/pages/Signup/Signup.jsx b/frontend/src/pages/Signup/Signup.jsx
index 5f321b0..35b919c 100644
--- a/frontend/src/pages/Signup/Signup.jsx
+++ b/frontend/src/pages/Signup/Signup.jsx
@@ -3,7 +3,7 @@ import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
 import { Button, Checkbox, FormControl, FormControlLabel, FormHelperText, Stack, Typography } from '@mui/material';
 import ForgotPassModal from '../../components/forgot-pass-modal/forgot-pass-modal';
 import FormTextField from '../../components/Form/FormTextField';
-import Toast from '../../Components/toast/Toast.jsx';
+import Toast from '../../components/toast/Toast.jsx';
 import { useAPI } from '../../providers/APIProvider/APIProvider.jsx';
 import { useConfig } from '../../providers/config-provider/ConfigProvider.jsx';
 import ROUTES from '../../providers/config-provider/ROUTES.jsx';
diff --git a/frontend/src/pages/my-account/MyAccount.jsx b/frontend/src/pages/my-account/MyAccount.jsx
index 95cc22b..bd3a5e7 100644
--- a/frontend/src/pages/my-account/MyAccount.jsx
+++ b/frontend/src/pages/my-account/MyAccount.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Button, CircularProgress, Divider, Stack, Tab, Tabs, Typography } from '@mui/material';
 import ItemCard from '../../components/item-card/item-card.jsx';
-import Toast from '../../Components/toast/Toast.jsx';
+import Toast from '../../components/toast/Toast.jsx';
 import { Helper } from '../../utils/Helper.js';
 import useMyAccount from './useMyAccount.js';
 
diff --git a/frontend/src/pages/workshops/WorkshopsPage.jsx b/frontend/src/pages/workshops/WorkshopsPage.jsx
index 4626b36..2cb2c21 100644
--- a/frontend/src/pages/workshops/WorkshopsPage.jsx
+++ b/frontend/src/pages/workshops/WorkshopsPage.jsx
@@ -1,5 +1,5 @@
-import ItemCard from "../../Components/item-card/item-card.jsx";
-import Toast from "../../Components/toast/Toast.jsx";
+import ItemCard from "../../components/item-card/item-card.jsx";
+import Toast from "../../components/toast/Toast.jsx";
 import {Helper} from "../../utils/Helper.js";
 import useWorkshopsPage from "./useWorkshopsPage.js";