Frontend docker

README.md

@@ -84,33 +84,18 @@ To run tests locally:
 
     https://support.google.com/mail/answer/185833?hl=en#zippy=
 
-3. Install requirements:
-    ```
-    cd backend
-    pip install -r requirements.txt
-    ```
-
-3. Run FastAPI to create database:
-
-
-    ```
-    uvicorn app.main:app --reload
-    ```
-
-
-    After seeing "test.db" in db/ press CTRL + C to close the server.
 
-4. Run with Docker
+3. Run with Docker
 
     ```
     docker compose up --build
     ```
 
 
 The app will be available at:
-    - Frontend: http://localhost:5173
-    - Backend API: http://localhost:8000
-    - API Docs: http://localhost:8000/docs
+- Frontend: http://localhost:5173
+- Backend API: http://localhost:8000
+- API Docs: http://localhost:8000/docs
 
 
 ## Project Structure

docker-compose.yml

@@ -56,3 +56,18 @@ services:
     depends_on:
       - backend
       - redis
+
+  frontend:
+      image: node:20-alpine   # My imange
+      container_name: react_frontend
+      working_dir: /app
+      ports:
+        - "5173:5173"
+      volumes:
+        - ./frontend:/app
+        - /app/node_modules # Docker uses its own packages
+      env_file:
+        - .env
+      command: sh -c "npm install && npm run dev -- --host"   # Host makes server avaliable out of container
+      depends_on:
+        - backend   # Waits for backend to start

frontend/src/index.css

@@ -37,6 +37,7 @@ h1 {
 }
 
 button {
+  color: #ffffff;
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
@@ -55,7 +56,7 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-@media (prefers-color-scheme: light) {
+/* @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
@@ -66,4 +67,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+} */