Dockerized

.env.example

@@ -0,0 +1,6 @@
+# Backend
+MONGO_URI=mongodb://mongo:27017/clockify
+JWT_SECRET=replace-with-strong-secret
+
+# Frontend
+REACT_APP_API_URL=http://localhost:5000/api

README.md

@@ -22,6 +22,19 @@ To run this application on your local system
 - Authorise 
 - Use the application 
 
+## Docker (one-command setup)
+1. Copy the environment template and adjust values as needed:
+   ```bash
+   cp .env.example .env
+   ```
+2. Build and start everything:
+   ```bash
+   docker compose up --build
+   ```
+3. Open the app:
+   - Frontend: http://localhost:3006
+   - Backend: http://localhost:5000
+
 ## Features 
 <!-- --- -->
 - There is login and logout functionality.

clockify/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.env

clockify/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+EXPOSE 3006
+
+CMD ["npm", "start"]

clockify/package.json

@@ -29,7 +29,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "set PORT=3006 && react-scripts start",
+    "start": "PORT=3006 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

clockify/src/Redux/Auth/Auth.actions.js

@@ -2,7 +2,9 @@ import axios from "axios";
 import { error, loading, register } from "./Auth.types";
 import { toast } from "react-toastify";
 
-const API_URL = `https://clcok2.onrender.com/api/users/`;
+const API_BASE_URL =
+  process.env.REACT_APP_API_URL || "https://clcok2.onrender.com/api";
+const API_URL = `${API_BASE_URL}/users/`;
 
 const toastOptions = {
   position: "bottom-left",

clockify/src/Redux/Tasks/Task.actions.js

@@ -9,7 +9,9 @@ import {
 } from "./Task.types";
 import axios from "axios";
 
-const API_URL = `https://clcok2.onrender.com/api/goals/`;
+const API_BASE_URL =
+  process.env.REACT_APP_API_URL || "https://clcok2.onrender.com/api";
+const API_URL = `${API_BASE_URL}/goals/`;
 
 export const startTask = (payload) => (dispatch) => {
   dispatch({ type: start, payload: payload });

docker-compose.yml

@@ -0,0 +1,39 @@
+version: "3.9"
+
+services:
+  mongo:
+    image: mongo:6
+    restart: unless-stopped
+    volumes:
+      - mongo_data:/data/db
+    ports:
+      - "27017:27017"
+
+  server:
+    build:
+      context: ./server
+    restart: unless-stopped
+    env_file:
+      - ./.env
+    environment:
+      - PORT=5000
+      - MONGO_URI=${MONGO_URI:-mongodb://mongo:27017/clockify}
+    depends_on:
+      - mongo
+    ports:
+      - "5000:5000"
+
+  client:
+    build:
+      context: ./clockify
+    restart: unless-stopped
+    environment:
+      - PORT=3006
+      - REACT_APP_API_URL=${REACT_APP_API_URL:-http://localhost:5000/api}
+    depends_on:
+      - server
+    ports:
+      - "3006:3006"
+
+volumes:
+  mongo_data:

server/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.env

server/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+COPY . .
+
+EXPOSE 5000
+
+CMD ["node", "index.js"]