feat: Dockerize frontend project (#19)

* feat: dockerize frontend project

* fix: change Components directory to components

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:
+  caddy_data:
+  static_files:

frontend/.dockerignore

@@ -0,0 +1,5 @@
+.git
+.gitignore
+README.md
+dist
+node_modules

frontend/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.10.0
+
+WORKDIR /run
+
+COPY package*.json .
+RUN npm install
+
+COPY . .
+RUN npm run build

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 (

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';

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';
 

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";