Stage 2 – Development environment and CI/CD

.github/workflows/frontend.yml

@@ -0,0 +1,67 @@
+name: Frontend CI
+
+on:
+  pull_request:
+    paths:
+      - 'react-frontend/**'
+
+jobs:
+  dependencies:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: react-frontend/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('react-frontend/package-lock.json') }}
+      - run: npm install
+        working-directory: react-frontend
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: dependencies
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - uses: actions/cache@v3
+        with:
+          path: react-frontend/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('react-frontend/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-
+      - run: npm run lint
+        working-directory: react-frontend
+
+  build:
+    runs-on: ubuntu-latest
+    needs: lint
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+      - uses: actions/cache@v3
+        with:
+          path: react-frontend/node_modules
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('react-frontend/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-
+      - run: npm run build
+        working-directory: react-frontend
+      - name: Archive artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: react-frontend/dist

docker-compose.yml

@@ -1,20 +1,49 @@
-version: '3.1'
+version: '3.8'
 
 services:
-  app:
-    build: .
-    container_name: flask_app
+  backend:
+    build:
+      context: /flask_backend
+      dockerfile: Dockerfile-backend
+    container_name: auction_backend
+    env_file:
+      - ./.env
     ports:
       - "5000:5000"
-    links:
+    depends_on:
       - mongo
-    environment:
-      - MONGO_URI=${MONGO_URI}
     volumes:
-      - .:/app
+      - ./flask_backend:/app
+    networks:
+      - auction_network
+
+  frontend:
+    build:
+      context: /react-frontend
+      dockerfile: Dockerfile-frontend
+    container_name: react_frontend
+    ports:
+      - "3000:80"
+    depends_on:
+      - backend
 
   mongo:
     image: mongodb/mongodb-community-server:latest
-    container_name: mongo_db
+    container_name: auction_mongo
     ports:
       - "27017:27017"
+    volumes:
+      - mongo_data:/data/db
+    networks:
+      - auction_network
+
+networks:
+  auction_network:
+
+volumes:
+  mongo_data:
+
+
+
+
+

flask_backend/Dockerfile-backend

@@ -0,0 +1,24 @@
+# Use the official Python image from the Docker Hub
+FROM python:3.12-slim
+
+# Set the working directory
+WORKDIR /flask_backend
+
+# Copy the requirements.txt file into the image
+COPY requirements.txt .
+
+# Install the Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code into the image
+COPY . .
+
+# Expose the port that the app runs on
+EXPOSE 5000
+
+# Set environment variables
+ENV FLASK_APP=starter.py
+ENV FLASK_ENV=production
+
+# Run the application
+CMD ["flask", "run", "--host=0.0.0.0"]

app/models/auction_listing.py → flask_backend/models/auction_listing.py

@@ -1,6 +1,3 @@
-from datetime import datetime
-
-
 class AuctionListing:
     def __init__(self, listing):
         self.id = str(listing['_id'])

flask_backend/starter.py

@@ -0,0 +1,6 @@
+from flask_backend import create_app
+
+flask_app = create_app()
+
+if __name__ == "__main__":
+    flask_app.run(host="0.0.0.0", port=5000)

react-frontend/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

react-frontend/Dockerfile-frontend

@@ -0,0 +1,45 @@
+# Build Stage
+FROM node:18 as build-stage
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files to the working directory
+COPY . .
+
+# Build the React application for production
+RUN npm run build
+
+# Production Stage
+FROM nginx:latest
+
+# Copy the NGINX configuration file
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy the build artifacts from the build stage to NGINX web server
+COPY --from=build-stage /app/dist/ /usr/share/nginx/html
+
+# We need to make sure not to run the container as a non root user
+# for better security
+WORKDIR /app
+RUN chown -R nginx:nginx /app && chmod -R 755 /app && \
+        chown -R nginx:nginx /var/cache/nginx && \
+        chown -R nginx:nginx /var/log/nginx && \
+        chown -R nginx:nginx /etc/nginx/conf.d
+RUN touch /var/run/nginx.pid && \
+        chown -R nginx:nginx /var/run/nginx.pid
+
+
+# Ensure nginx runs as non-root for better security
+USER nginx
+
+# Expose port 80 for the NGINX server
+EXPOSE 80
+
+# Command to start NGINX when the container is run
+CMD ["nginx", "-g", "daemon off;"]

react-frontend/nginx/nginx.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+
+    location /health {
+            return 200;
+        }
+}

react-frontend/package.json

@@ -4,12 +4,13 @@
   "description": "- react@18",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --env dev",
-    "dev": "webpack serve --env dev",
+    "start": "webpack serve --config ./webpack.config.js --mode development",
+    "predeploy": "npm run build",
     "lint:fix": "eslint --fix",
     "lint": "eslint ./src/*",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build": "webpack --mode production"
   },
   "author": "",
   "license": "ISC",