added docker file and compose file

.env

@@ -0,0 +1,18 @@
+# Database configuration for PostgreSQL
+DB_PG_HOST=chefsbeatz.postgres.database.azure.com
+DB_PG_PORT=5432
+DB_PG_USER=npm
+DB_PG_PASSWORD=npm
+DB_PG_NAME=npm
+
+# Nginx Proxy Manager application settings
+APP_HOST=0.0.0.0
+APP_PORT=8090
+WEB_HOST=proxy.thecloudgenius.com.ng
+WEB_PORT=8090
+API_HOST=nginx_proxy_manager.domain.com
+API_PORT=81
+
+# SSL configuration
+# Replace with your own Let's Encrypt details or SSL configuration
+[email protected]

.gitignore

@@ -0,0 +1,2 @@
+letsencrypt/
+data/

README.md

@@ -4,17 +4,125 @@ Welcome to the Full-Stack FastAPI and React template repository. This repository
 
 ## Project Structure
 
-The repository is organized into two main directories:
+This repository is organized into two main directories from the root folder:
 
-- **frontend**: Contains the ReactJS application.
-- **backend**: Contains the FastAPI application and PostgreSQL database integration.
+- **frontend**: this folder Contains the ReactJS application, including the docker file added after the fork.
+- **backend**: Contains the FastAPI application with the addition of a docker file for building a backend image
+- For this project, I will be using a remote DB on Azure for my database needs.
 
-Each directory has its own README file with detailed instructions specific to that part of the application.
 
-## Getting Started
-
-To get started with this template, please follow the instructions in the respective directories:
+Each directory has its own README file with detailed instructions to set up and run the application locally without a need for containers.
 
+## To run this application locally, please see the readme files below
 - [Frontend README](./frontend/README.md)
 - [Backend README](./backend/README.md)
 
+## Application Deployment with Docker.
+
+### Prerequisites
+- Docker
+- Docker Compose
+
+### Services needed to run and build this application in containers.
+- This repository contains a full-stack application setup using Docker Compose. 
+- The application consists of a FastAPI backend, a Node.js frontend, a PostgreSQL database, an Adminer database management tool, an Nginx Proxy Manager, and an Nginx web server.
+
+**Your DB can be self-hosted or a remote DB on a cloud service**
+
+- **backend**: FastAPI application serving the backend API.
+- **frontend**: Node.js application serving the frontend.
+- **Postgres db**: PostgreSQL database for storing application data.
+- **adminer**: Database management tool to interact with the PostgreSQL database.
+- **proxy**: Nginx Proxy Manager to handle SSL certificates and domain management.
+- **nginx**: Nginx web server to serve the frontend and reverse proxy requests to the backend.
+- **Docker files**:this will specify how the images will be built and run by docker
+
+## Application Deployment with Docker.
+
+**Clone the repository**:
+
+   ```sh
+   git clone https://github.com/Eben-DevOps/Full-Stack-Web-App
+   cd Full-Stack-Web-App
+   ```
+
+ **Build and start the services** (detached mode is optional):
+
+   ```sh
+   docker-compose build
+   docker-compose up -d
+   ```
+
+ **Verify the services are running**:
+   - **FastAPI Backend**: [http://localhost/api](http://localhost/api)
+   - **Node.js Frontend**: [http://localhost](http://localhost)
+   - **Azure PostgreSQL Database**: Accessible on port `5432` (no direct browser access)
+   - **Adminer**: [http://localhost:8080](http://localhost:8080) or [http://db.localhost](http://db.localhost)
+   - **Nginx Proxy Manager**: [http://localhost:8090](http://localhost:8090) or [http://proxy.localhost](http://proxy.localhost)
+
+## For my deployment my docker-compose file looks like this
+- **note that I used a remote db as you will not see a db service on this**
+```sh
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: frontend
+    ports:
+      - "5173:5173"
+    env_file:
+      - ./frontend/.env
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: backend
+    ports:
+      - "8000:8000"
+    env_file:
+      - ./backend/.env
+    environment:
+      PYTHONDONTWRITEBYTECODE: 1
+      PYTHONUNBUFFERED: 1
+      PYTHONPATH: /app
+    volumes:
+      - ./backend:/app
+
+  adminer:
+    image: adminer
+    container_name: adminer
+    ports:
+      - "8080:8080"
+
+  nginx-proxy-manager:
+    image: jc21/nginx-proxy-manager:latest
+    container_name: nginx-proxy-manager
+    ports:
+      - "80:80"
+      - "8090:81"
+      - "443:443"
+    env_file:
+      - .env
+    environment:
+      DB_PG_HOST: ${DB_PG_HOST}
+      DB_PG_PORT: ${DB_PG_PORT}
+      DB_PG_USER: ${DB_PG_USER}
+      DB_PG_PASSWORD: ${DB_PG_PASSWORD}
+      DB_PG_NAME: ${DB_PG_NAME}
+    volumes:
+      - ./data:/data
+      - ./letsencrypt:/etc/letsencrypt
+    restart: always
+```
+
+## Accessing the Application via browser
+
+- **Localhost**: You can access the application via `http://localhost`.
+- **Custom Domain**: You can set up your domain to connect to the application using the Nginx Proxy Manager.

backend/.env

@@ -9,10 +9,10 @@ PROJECT_NAME="Full Stack FastAPI Project"
 STACK_NAME=full-stack-fastapi-project
 
 # Backend
-BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173"
+BACKEND_CORS_ORIGINS="http://localhost,http://localhost:5173,https://localhost,https://localhost:5173,http://172.166.176.30:5173"
 SECRET_KEY=changethis123
 [email protected]
-FIRST_SUPERUSER_PASSWORD=devops#HNG11
+FIRST_SUPERUSER_PASSWORD="devops#HNG11"
 USERS_OPEN_REGISTRATION=True
 
 # Emails
@@ -25,9 +25,8 @@ SMTP_SSL=False
 SMTP_PORT=587
 
 # Postgres
-POSTGRES_SERVER=localhost
+POSTGRES_SERVER=chefsbeatz.postgres.database.azure.com
 POSTGRES_PORT=5432
 POSTGRES_DB=app
 POSTGRES_USER=app
-POSTGRES_PASSWORD=changethis123
-
+POSTGRES_PASSWORD=changethis123

backend/Dockerfile

@@ -0,0 +1,46 @@
+# Use an official Python runtime as a parent image
+FROM python:3.10.0-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+ENV PYTHONPATH=/app
+
+# Install system dependencies
+RUN apt-get update \
+    && apt-get install -y \
+        build-essential \
+        curl \
+        libpq-dev  # Example: PostgreSQL dependencies
+RUN rm -rf /var/lib/apt/lists/*
+
+# Install Poetry
+RUN curl -sSL https://install.python-poetry.org | python3 -
+
+# Set Poetry's bin directory in the PATH
+ENV PATH="/root/.local/bin:$PATH"
+
+# Verify Poetry installation
+RUN poetry --version
+
+# Install psycopg2-binary
+RUN pip install psycopg2-binary
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy only the dependencies definition files to cache them in Docker layer
+COPY poetry.lock pyproject.toml ./
+
+# Install dependencies
+RUN poetry config virtualenvs.create false \
+    && poetry install --no-dev
+
+COPY . .
+
+RUN chmod +x prestart.sh
+
+EXPOSE 8000
+
+# Command to run prestart.sh and the application using Poetry
+CMD ["bash", "-c", "poetry run bash ./prestart.sh && poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000"]

backend/README.md

@@ -3,42 +3,106 @@
 This directory contains the backend of the application built with FastAPI and a PostgreSQL database.
 
 ## Prerequisites
-
 - Python 3.8 or higher
 - Poetry (for dependency management)
 - PostgreSQL (ensure the database server is running)
 
 ### Installing Poetry
 
 To install Poetry, follow these steps:
-
 ```sh
 curl -sSL https://install.python-poetry.org | python3 -
 ```
 
 Add Poetry to your PATH (if not automatically added):
+```sh
+# Example for Bash shell
+export PATH="$HOME/.poetry/bin:$PATH"
+```
 
 ## Setup Instructions
 
-1. **Navigate to the backend directory**:
+ **Navigate to the backend directory**:
     ```sh
     cd backend
     ```
 
-2. **Install dependencies using Poetry**:
+ **Install dependencies using Poetry**:
     ```sh
     poetry install
     ```
 
-3. **Set up the database with the necessary tables**:
+ **Setup PostgreSQL**
+
+**Follow these instructions to install PostgreSQL on Linux and configure a user named app with password changethis123 and a database named app. Give all permissions of the app database to the app user.**
+
+## Install PostgreSQL on Linux (example for Ubuntu):
+
+```bash
+sudo apt update
+sudo apt install postgresql postgresql-contrib
+```
+
+## Switch to the PostgreSQL user and access the PostgreSQL shell:
+
+```bash
+sudo -i -u postgres
+psql
+```
+
+## Create a user app with password changethis123:
+
+```sql
+-- Create the database if it doesn't exist
+CREATE DATABASE app;
+
+-- Create the user if it doesn't exist, or update the password if it does
+DO
+$do$
+BEGIN
+   IF NOT EXISTS (
+      SELECT
+      FROM   pg_catalog.pg_user
+      WHERE  usename = 'app') THEN
+
+      CREATE USER app WITH PASSWORD 'changethis123';
+   ELSE
+      ALTER USER app WITH PASSWORD 'changethis123';
+   END IF;
+END
+$do$;
+
+-- Grant all privileges on the database to the user
+GRANT ALL PRIVILEGES ON DATABASE app TO app;
+```
+
+## Exit the PostgreSQL shell and switch back to your regular user.
+
+```bash
+exit
+```
+
+## Set database credentials
+
+## Edit the PostgreSQL environment variables located in the .env file. Make sure the credentials match the database credentials you just created.
+
+```bash
+POSTGRES_SERVER=localhost
+POSTGRES_PORT=5432
+POSTGRES_DB=app
+POSTGRES_USER=app
+POSTGRES_PASSWORD=changethis123
+```
+
+## Seed the database with the necessary tables and initial data:
     ```sh
     poetry run bash ./prestart.sh
     ```
 
-4. **Run the backend server**:
+## start the backend server:
     ```sh
     poetry run uvicorn app.main:app --reload
     ```
 
-5. **Update configuration**:
+## Update configuration:
    Ensure you update the necessary configurations in the `.env` file, particularly the database configuration.

backend/start.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+
+# Activate the Poetry environment
+poetry install --no-dev
+
+# Run any pre-start commands (if needed)
+bash ./prestart.sh
+
+# Start the FastAPI application using uvicorn
+poetry run uvicorn app.main:app --host 0.0.0.0 --port 8000