UrgentNews Full-Stack Application

This project is a full-stack application for displaying urgent news. It consists of three main components:

• Database (MySQL): Stores news data.
• Backend (Express/Node.js): Provides a REST API to access the news data.
• Frontend (React): Displays news and interacts with the backend.

All components are containerized using Docker and orchestrated with Docker Compose. This README explains the project structure, Dockerfiles, and all necessary commands.

---

Project Structure

---

Docker Files Overview

1. Backend Dockerfile (backend/Dockerfile)

• Purpose: Build an image for the Express backend.
• Key Steps:
  • Use the Node.js 18 image.
  • Set the working directory.
  • Copy package*.json and install dependencies.
  • Copy all source files.
  • Expose port 5000.
  • Start the server with node server.js.

FROM node:18

WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the rest of your application code
COPY . .

# Expose port 5000 for the backend
EXPOSE 5000

# Start the Express server
CMD ["node", "server.js"]

2. Database Dockerfile (db/Dockerfile) Purpose: Build an image for the MySQL database. Key Steps: Use the latest MySQL image. Set environment variables for the root password and database name. Copy init.sql to the special directory /docker-entrypoint-initdb.d/ so that MySQL will run it on first startup. Expose the default MySQL port 3306.

FROM mysql:latest

ENV MYSQL_ROOT_PASSWORD=Mohammad111222333@
ENV MYSQL_DATABASE=urgentNewsDB

# Copy initialization SQL script to automatically set up the database
COPY init.sql /docker-entrypoint-initdb.d/

EXPOSE 3306

3. Frontend Dockerfile (frontend/news_fornt_app/Dockerfile) Purpose: Build and serve a production-ready React application. Multi-Stage Build: Stage 1 (Build Stage): Uses Node.js 18 to install dependencies and build the React app. Stage 2 (Runtime Stage): Uses an Nginx image to serve the static files generated by the build. Key Steps: Build the React application. Copy the build output into the Nginx container. Expose port 80 (Nginx default).

Stage 1: Build the React app

FROM node:18 AS build

WORKDIR /app

# Copy package files and install dependencies
COPY package*.json ./
RUN npm install

# Copy the entire React app source code and build the production files
COPY . .
RUN npm run build

# Stage 2: Serve the app using Nginx
FROM nginx:alpine

# Remove default Nginx static assets
RUN rm -rf /usr/share/nginx/html/*

# Copy the built React app from the previous stage to Nginx's directory
COPY --from=build /app/build /usr/share/nginx/html

# Expose port 80 (for Nginx)
EXPOSE 80

# Run Nginx in the foreground
CMD ["nginx", "-g", "daemon off;"]

Docker Compose Configuration

Overview

This project uses Docker Compose to manage multiple services, including a MySQL database, an Express backend, and a React frontend. The docker-compose.yml file defines these services, their configurations, and how they interact with each other.

Docker Compose Services

1. Database Service (MySQL)

  db:
    build: ./db
    container_name: mysql_container
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: Mohammad111222333@
      MYSQL_DATABASE: urgentNewsDB
    ports:
      - "3307:3306"  
    volumes:
      - mysql_data:/var/lib/mysql
    networks:  
      - urgent-news-network  

• build: ./db → Builds the MySQL container using the Dockerfile in the db/ directory.
• container_name: mysql_container → Assigns a custom name to the container.
• restart: always → Ensures the container restarts if it stops unexpectedly.
• environment → Sets MySQL credentials and database name.
• ports → Maps port 3306 (inside container) to 3307 (host machine).
• volumes → Persists MySQL data even if the container is removed.
• networks → Connects to urgent-news-network for communication with other services.

2. Backend Service (Express.js API)

  backend:
    build: ./backend
    container_name: express_backend
    restart: always
    depends_on:
      - db
    ports:
      - "5000:5000"
    environment:
      DB_HOST: db
      DB_USER: root
      DB_PASSWORD: Mohammad111222333@
      DB_NAME: urgentNewsDB
    networks:  
      - urgent-news-network  

• build: ./backend → Builds the backend service using Dockerfile in backend/.
• container_name: express_backend → Assigns a name to the backend container.
• restart: always → Ensures the container restarts if stopped.
• depends_on: - db → Ensures the database starts before the backend.
• ports → Maps port 5000 inside the container to 5000 on the host.
• environment → Configures database connection details.
• networks → Connects to the same network as the database.

3. Frontend Service (React App)

  frontend:
    build:
      context: ./frontend/news_fornt_app
    container_name: react_frontend
    restart: always
    depends_on:
      - backend
    ports:
      - "3000:80"
    networks:  
      - urgent-news-network  

• build: context: ./frontend/news_fornt_app → Builds the frontend using the specified directory.
• container_name: react_frontend → Assigns a custom name to the frontend container.
• restart: always → Ensures the container restarts if stopped.
• depends_on: - backend → Ensures the backend starts before the frontend.
• ports → Maps port 80 (inside container) to 3000 (host machine) to serve the React app.
• networks → Connects to the shared network for communication with backend services.

Volumes

volumes:
  mysql_data:

• mysql_data → Stores MySQL data persistently to prevent data loss when containers stop.

Networking Configuration

networks:
  urgent-news-network:
    driver: bridge

• urgent-news-network → A custom Docker network ensuring isolated communication between services.
• driver: bridge → Uses a bridge network, allowing containers to communicate while remaining isolated from other networks.

Running the Project

To build and run all services, use:

docker-compose up --build -d

To stop all running services:

docker-compose down

To check running containers:

docker ps

Commands Summary

docker-compose up --build -d
docker ps
docker logs express_backend
docker logs -f express_backend
docker-compose down
docker rm -f mysql_container express_backend react_frontend
docker login
docker tag urgentnews_db muhammadqzih/urgentnews_db:latest
docker tag urgentnews_backend muhammadqzih/urgentnews_backend:latest
docker tag react_frontend muhammadqzih/urgentnews_react_frontend:latest
docker push muhammadqzih/urgentnews_db:latest
docker push muhammadqzih/urgentnews_backend:latest
docker push muhammadqzih/urgentnews_react_frontend:latest
docker-compose pull
docker-compose up -d
docker-compose logs
docker-compose stop
docker-compose restart
docker exec -it express_backend bash
docker images
docker rmi <image_name>