React with NodeJS Backend and MongoDB - CI/CD Pipeline

React with NodeJS Backend and MongoDB

About

This project is a React application that connects to a NodeJS backend and utilizes MongoDB for data storage. The application is designed to showcase a full-stack setup with frontend and backend components, along with a database.

The project is integrated with a CI/CD pipeline using GitHub Actions , allowing automated building, testing, and deployment of both the frontend and backend applications to Docker Hub .

Features

• Frontend: Developed using React.js, provides the user interface for interacting with the application.
• Backend: Built using Node.js, handles API requests and communicates with the MongoDB database.
• Database: MongoDB is used to store the application's data.
• CI/CD Pipeline: Automatically builds and pushes Docker images for both frontend and backend applications to Docker Hub using GitHub Actions.

CI/CD Pipeline

This repository is equipped with a GitHub Actions CI/CD pipeline that automatically builds and deploys the frontend and backend Docker images whenever code is pushed to the main branch or a pull request is made to it.

CI/CD Workflow

• Triggers: The pipeline runs whenever a push or pull request is made to the main branch.
• Steps:
  • Build Frontend: The frontend React app is built and pushed to Docker Hub with the tag frontend:latest.
  • Build Backend: After the frontend build completes, the backend Node.js app is built and pushed to Docker Hub with the tag backend:latest.

The CI/CD workflow uses Docker, QEMU, and Docker Buildx to handle the building and pushing of Docker images.

Technologies Used

• Frontend: React.js
• Backend: Node.js
• Database: MongoDB
• CI/CD: GitHub Actions, Docker
• Containerization: Docker

Setting Up the Project Locally

1. Clone the repository

git clone https://github.com/Svetoslavss/devops-workshop.git

2. Install Dependencies

Frontend:

cd frontend
npm install

Backend:

cd backend
npm install

3. Set Up MongoDB

Ensure MongoDB is running locally or configure your backend to connect to a remote MongoDB service.

4. Running the Application

Frontend:

cd frontend
npm start

Backend:

cd backend
npm start

The application will be running at http://localhost:3000 for the frontend and the backend API will be available at http://localhost:5000.

Docker Setup

Both the frontend and backend applications have their respective Dockerfiles located in the ./frontend/Dockerfile and ./backend/Dockerfile directories. These files are used in the CI/CD pipeline to build Docker images for both components.

To build and run the application using Docker locally:

1. Frontend

docker build -t frontend:latest ./frontend
docker run -p 3000:3000 frontend:latest

2. Backend

docker build -t backend:latest ./backend
docker run -p 5000:5000 backend:latest

Docker Hub

After the CI/CD pipeline runs, the latest images will be pushed to Docker Hub with the tags:

• frontend:latest
• backend:latest

You can access the images directly from Docker Hub:

• Frontend Docker Hub Repository
• Backend Docker Hub Repository

Contributing

Contributions are welcome! Please fork this repository, create a new branch for your changes, and submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.