BACK EMAIL HOME GROUP 4 UPDATES BY HOME GROUP 3

README.md

@@ -1,96 +1,85 @@
-# Final Design Plan
+# UPDATES EMAIL HOME GROUP 4
 
-This is the Design Plan for our Swift Email. We will provide a description of how we abstracted the project and solved it based on our technical skills and teamwork. For this project, we utilized HTTP's methods. To get or receive a message, we used the `GET` method, and to send a message, we used `POST`. Additionally, for the login process, we employed a `POST` method to save the new user information in the database and then a `GET` method to retrieve all information about this user, such as received emails.
+This document provides an overview of the updates to the Home Group 4 project made by Home Group 3. See [Frontend](https://github.com/G3-VER-TECH-FELLOWS/email-G4/blob/main/front-email-g4-main/README.md), [Backend](https://github.com/G3-VER-TECH-FELLOWS/email-G4/blob/main/back-email-g4-main/README.md) and [IAC](https://github.com/G3-VER-TECH-FELLOWS/email-G4/blob/main/iac-email-g4-main/README.md) for more detailed updates and implementations.
 
-## Technologies and Frameworks
+## Owners
 
-### Backend
+### Frontend Owners
 
-For the backend, we used Python with Django, and for the databases, PostgreSQL. The following APIs were created for the email service:
+- Jacobo was chosen as the Front-End owner due to his expertise in architecture, coding best practices, and dockerization.
+- Miguel was chosen as the CI/CD Front-End owner due to his eagerness to learn this area, which was new to him.
 
-- Get in the admin console of the PostgreSQL database. (`admin/`)
+### Backend Owners
+- Daniel was chosen as the Back-End owner due to his critical knowledge of Django, which was essential for understanding the other team's code.
+- Miguel was chosen as the CI/CD Back-End owner due to his eagerness to learn this area, which was new to him.
+### IAC Owners
 
-- Register the user. (`api/register/ [name='register']`)
+- Daniel and Juan were selected as the IAC owners because of their eagerness to learn in this new area.
 
-- Login user to the email service. (`api/login/ [name='login']`)
+## Frontend Changes Overview
 
-- Logout the user when they want to stop using the service. (`api/logout/ [name='logout']`)
+- Removed `.dockerignore` file, which included various Python, Git, and environment-specific files to ignore during Docker builds.
+- Added a new ESLint configuration file `.eslintrc.cjs` focusing on TypeScript and React rules.
+- Introduced Continuous Deployment (CD) and Continuous Integration (CI) pipelines with GitHub Actions, specified in `.github/workflows/cd.yml` and `.github/workflows/ci.yml`.
+- Updated the Docker configuration, introducing a multi-stage build in `Dockerfile` for optimizing the build process.
+- Added a `docker-compose.yml` file for defining and running multi-container Docker applications, setting up the project with specific ports and environment variables.
+- Configured Nginx for serving the application through a new `default.conf` file.
+- Updated `index.html` to serve as the entry point for the web application, including references to the main JavaScript file and the project's title.
+- Significant updates to `package.json`, including changes to the project name, version, scripts, dependencies, and development dependencies.
+- Introduced `postcss.config.js` for PostCSS configuration, enabling plugins like Tailwind CSS and Autoprefixer.
+- Refactored code across various components (`ComposeView.tsx`, `InboxView.tsx`, `Message.tsx`, etc.) for improvements and removal of unused imports.
+- Adjustments in context files (`SelectedEmailContext.tsx`, `UserContext.tsx`, etc.) and icon components to clean up imports and code structure.
+- API configuration changes in `src/api.ts` to point to new backend endpoints.
+- File structure changes, including the renaming of `src/index.tsx` to `src/main.tsx` and the addition of `src/vite-env.d.ts` for Vite-specific types.
+- Created a startup script `start.sh` for setting up environment variables and starting Nginx in Docker containers.
+- Updated Tailwind CSS configuration in `tailwind.config.js` to simplify the setup.
+- Overhauled TypeScript configuration in `tsconfig.json` and added `tsconfig.node.json` for specific settings related to Node.js environments.
+- Introduced a Vite configuration file `vite.config.ts` for customizing the build process and integrating React with SWC.
 
-- Send an email from one user to another. (`api/send-email/ [name='send_email']`)
+## Backend Changes Overview
 
-- Get the emails sent to the current user. (`api/receive-email/<str:email>/ [name='received_email']`)
+- Code is modified `MyUserManager` class to encrypt the password.
+- The views are separated into a module with independent files as controllers.
+- The code that calls the actions in the database in the login and send_email.
+- Controllers are organized into service modules.
+- The `service_send_email` code is simplified by validating the code with try and except
+- APIs are documented using swagger, modifying the project setting.
+- Changing the connection from Postgres to MySQL to an RDS instance in AWS.
+- `Docker compose` is updated and the creation of the db is skipped
+- .env folder is created to hold sensitive keys
+- `python `decouple` is installed to manage the environmental variables
+- `.dockerignore` is updated with .env file
+- `Setting` update to add the new DNS and connections to the database located in AWS
 
-## Frontend
+## IAC Implementation Overview
 
-### Technologies and Frameworks
+Infrastructure as Code (IAC) implementation with Terraform and Ansible offers numerous benefits for businesses, including streamlined deployment, enhanced performance, and cost savings. By automating infrastructure provisioning and management, organizations can achieve greater efficiency, scalability, and agility in their operations. Regular monitoring and optimization are essential for maximizing the effectiveness of the implemented solution and ensuring ongoing success.
 
-- TypeScript
-- Jest
-- Axios
-- React
+## C4 Diagram
+### Container diagram
 
-In the frontend, we utilized TypeScript with React. The design was crafted based on the following color palette (specified with color codes).
+![Container_diagram](./md-assets/diagram_g4_container.jpg)
 
-### Color Palette
+### Component diagram
 
-- Primary Color: `#5858B9`
-- Secondary Color: `#A459E1`
-- Accent Color: `#182468`
+![Container_diagram](./md-assets/diagram_g4_component.jpg)
 
-![App color pallete](./md-assets/pallete.png)
+### New architecture
 
-### User Interface Design
+This AWS architecture utilizes EC2 for hosting both frontend and backend services, with an RDS MySQL database. CI/CD pipelines are implemented using GitHub Actions for automated building, and deployment. Terraform is employed for Infrastructure as Code (IAC) to provision and configure resources like EC2 instances and RDS. Ansible is used to further configure EC2 instances post-provisioning. This setup ensures efficient management and automation of the infrastructure, facilitating continuous integration and deployment processes.
 
-The features implemented can be described as follows:
+### Why this architecture?
 
-#### Login 
+- Decoupling Frontend and Backend: By separating the frontend and backend concerns, you create a more modular architecture. This separation allows for easier maintenance and scalability because changes or updates to one part of the system are less likely to impact the other.
+- AWS: In the previous architecture, the project utilized two AWS EC2 instances to accommodate the size of the Docker images. Consequently, the previous team encountered difficulties deploying their Frontend and Backend services. Therefore, we opted to optimize the EC2 architecture by refining the Docker images of both the Backend and Frontend services. This optimization enabled us to streamline operations and utilize only a single AWS EC2 instance.
+- Efficient CI/CD Pipeline: Improvements in CI/CD processes and reduced Docker image sizes result in a more agile deployment pipeline. Faster deployments and smaller image sizes lead to faster iteration cycles and less downtime, ultimately improving overall system maintainability.
+- Improved Frontend Performance: Utilizing Vite for the front end improves performance due to its fast build times and hot module replacement. This allows for quicker development iterations and a smoother user experience. Additionally, optimizing React hooks can further enhance performance by reducing unnecessary re-renders and improving component efficiency.
+- Structured Backend Organization: The backend's transition from a monolithic structure to a more organized setup with models, routes, controllers and services enhances maintainability. Separating concerns into distinct components makes the codebase more readable, easier to debug, and simpler to extend or modify as requirements change.
 
-![App login](./md-assets/login.png)
+## Summary
 
-The user can login with their email address and password. That information will be verified so the user can use the service. If the user is not registered can do it clicking in the bottom “Don’t you have an account?”
+- Frontend: The project has undergone significant updates, including the removal of certain files, the introduction of new configurations for ESLint, Docker, Nginx, GitHub Actions CI/CD pipelines, and updates to package dependencies and scripts. Code refactoring was performed across various components and contexts to improve maintainability and performance. Additionally, the build and deployment processes have been optimized with the introduction of Vite and updated Docker configurations.
+- Backend: Relevant changes were made to some modules, finding a way to solve some important technical issues, as well as efforts to standardize some files and modules so that they could be read more easily.
+- IAC: As businesses grow and evolve, the demand for scalable, reliable, and efficient infrastructure becomes increasingly crucial. Manual infrastructure provisioning and configuration are prone to errors, inconsistencies, and inefficiencies. Therefore, automating these processes using IAC tools like Terraform and Ansible can significantly improve operational efficiency, reduce downtime, and enhance agility.
 
-#### Register
-
-![App login](./md-assets/register.png)
-
-If the user does not have an existing account, they can create a new account providing data like Full Name, Email Adress and Password.
-
-#### Receive emails
-
-![App login](./md-assets/app.png)
-
-The main page of the service has two bottoms Inbox and Compose, the inbox bottom shows all the received emails so the user can see them.
-
-#### Compose email
-
-![App login](./md-assets/email.png)
-
-When a user wants to send an email, they can click on the Compose bottom and a form is shown. Then they fill the boxes Subject, Email and Body.
-
-## CI/CD, QA
-
-For CI/CD pipelines we decided to use Github Actions because of its facility to create a workflow and it is easy to deploy on AWS. Every time a push is made to the main branch of the repository two images of docker are created and uploaded to Docker Hub so the EC2 instances can run these images in its own containers.
-
-With GitHub Actions every time a push is made to the main branch. A series of tests run that evaluate the performance of backend and frontend, meaning the Django biuld, Node build and the production branch.
-
-### Deployment
-
-For the development of Swift Email two AWS services were used.
-
-#### RDS
-The Postgres databased is saved in an RDS. First was created locally and then all the information was migrated to the AWS service.
-
-#### EC2
-Two instances of this service were used for this project due the big necessity of resources power that were needed.
-
-  - An EC2 was used for the backend. It is running in the public IP 18.228.223.130 in the port 8000. The configuration for this EC2 is composed by a t2.micro, a storage of 8GiB and Ubuntu as the OS. Here its running a docker container with the image of the backend downloaded from the Docker Hub repository. It has Inbound rules that uses the TCP protocol to enable ports and the correct work of these instance, in this case the ports allowed are 8000, 443, 80, 22, 3000. All with 0.0.0.0/0 as the source, because we are interested that anybody can use it.
-
-  - An EC2 was used for the frontend. It is running in the public IP 54.207.91.204 in the port 3000. The configuration for this EC2 is composed by a t2.micro and a storage of 8GiB Ubuntu as the OS. Here its running a docker container with the image of the frontend downloaded from the Docker Hub repository. It has Inbound rules that uses the TCP protocol to enable ports and the correct work of these instance, in this case the ports allowed are 443, 80, 22, 3000. All with 0.0.0.0/0 as the source, because we are interested that anybody can use it.
-
-## Security
-
-With Github Actions we are going to use secrets, in this case for database access, AWS credentials and Docker Hub credentials.
-
-Also, the backend uses cookies so the user can be sure their information is not going to be shared with anyone.
-
-In fact, as this project is basic, we just put our efforts in the integration between the backend and frontend its CI/CD and deployment on AWS. So, we choose those options to learn as much as we can and to have an “email” functional and usable.
+<img width="1434" alt="Screenshot 2024-03-23 at 9 12 29 PM" src="https://github.com/G3-VER-TECH-FELLOWS/email-G4/assets/114515007/69f22436-e03b-4ef6-be7f-07fb6c6753a7">

back-email-g4-main/.github/workflows/cd.yml

@@ -0,0 +1,64 @@
+name: CD Pipeline
+
+on:
+  workflow_dispatch:
+  workflow_run:
+    workflows: ["CI Pipeline"]
+    branches: [main]
+    types: [completed]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    steps:
+      - name: Set short git commit SHA
+        id: commit
+        uses: prompt/actions-commit-hash@v3
+
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up SSH connection
+        uses: webfactory/ssh-agent@v0.5.3
+        with:
+          ssh-private-key: ${{ secrets.EC2_SSH_KEY }}
+
+      - name: Deploy to EC2
+
+        run: |
+          ssh -o StrictHostKeyChecking=no -l ubuntu 54.202.119.143 <<EOF
+
+          IMAGE=\$(echo ghcr.io/\${{ github.repository }}:\${{ steps.commit.outputs.short }} | tr '[:upper:]' '[:lower:]')
+
+          # Stop and remove the running container
+
+          CONTAINER_ID=\$(sudo docker ps --filter "publish=2000" -q)
+
+          echo "Stopping container \$CONTAINER_ID"
+
+          sudo docker stop \$CONTAINER_ID
+
+          echo "Removing unused Docker images..."
+
+          sudo docker image prune -a -f
+
+          # Pull the latest image
+
+          echo "Pulling image \$IMAGE"
+
+          sudo docker pull \$IMAGE
+
+          # Run the new container with environment variables
+          echo "Running container \$IMAGE"
+
+          sudo docker run -d -p 2000:2000 \\
+            -e DB_USER=\${{ secrets.DB_USERNAME }} \\
+            -e DB_PASSWORD=\${{ secrets.DB_PASSWORD }} \\
+            -e DB_HOST=\${{ secrets.DB_HOST }} \\
+            -e DB_PORT=\${{ secrets.DB_PORT }} \\
+            -e DB_NAME=\${{ secrets.DB_NAME }} \\
+            -e SECRET_KEY='${{ secrets.SECRET_KEY }}' \\
+            \$IMAGE
+
+          EOF

back-email-g4-main/.github/workflows/ci.yml

@@ -0,0 +1,56 @@
+name: CI Pipeline
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Set short git commit SHA
+        id: commit
+        uses: prompt/actions-commit-hash@v3
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v2
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        env:
+          SHORT_SHA: ${{ steps.commit.outputs.short }}
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            ${{ steps.commit.outputs.short }}
+
+      - name: Build, tag and push Docker image
+        env:
+          IMAGE_TAG: ${{ steps.commit.outputs.short }}
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}

back-email-g4-main/.gitignore

@@ -0,0 +1,2 @@
+.env
+/env

backend/emailbackend/Dockerfile.back → back-email-g4-main/Dockerfile

@@ -7,6 +7,14 @@ ENV PYTHONUNBUFFERED 1
 #Set the workdir as /backend_code
 WORKDIR /backend_code
 
+# Add the libraries for mysqlclient / MariaDB / pakg-config / gcc
+RUN apt-get update && apt-get install -y \
+    default-libmysqlclient-dev \
+    libmariadb-dev-compat \
+    libmariadb-dev \
+    pkg-config \
+    gcc
+
 #copy dependencies into /backend_code directory
 COPY requirements.txt /backend_code/
 
@@ -16,9 +24,12 @@ RUN pip install --upgrade pip && pip install -r requirements.txt
 #Copy the rest of the files
 COPY . /backend_code/
 
-#Expose the port 8000 to use it
-EXPOSE 8000
+# Give permissions to the start.sh file
+RUN chmod +x start.sh
+
+#Expose the port 2000 to use it
+EXPOSE 2000
 
 #Command to start the backend
-CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
+CMD ["./start.sh"]