Merge pull request #11 from hppanpaliya/react-inject-env

Optimize Docker setup and build process

.github/workflows/build.yml

@@ -1,18 +1,98 @@
-# name: remote ssh command
-# on: [push]
-# jobs:
-
-#   build:
-#     name: Build React on remote server
-#     runs-on: ubuntu-latest
-#     steps:
-#     - name: executing remote ssh commands using password
-#       uses: appleboy/ssh-action@v1.0.0
-#       with:
-#         host: ${{ secrets.HOST }}
-#         username: ${{ secrets.USERNAME }}
-#         password: ${{ secrets.PASSWORD }}
-#         port: ${{ secrets.PORT }}
-#         script: |
-#           rm -r /home/harshal/React-TrashMail/mailserver/build
-#           cd /home/harshal/React-TrashMail/react && yarn && yarn build
+name: Build React App and Docker Image
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  DOCKER_REPOSITORY: hppanpaliya/react-trashmail
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        platform: [linux/amd64, linux/arm64]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install React dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: ./react
+
+      - name: Build React app
+        run: yarn build
+        working-directory: ./react
+
+      - name: Delete node_modules from React app
+        run: rm -rf ./node_modules
+        working-directory: ./react
+
+      - name: Install Mailserver dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: ./mailserver
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Extract platform short name
+        id: platform
+        run: |
+          if [[ "${{ matrix.platform }}" == "linux/amd64" ]]; then
+            echo "short=amd64" >> $GITHUB_OUTPUT
+          elif [[ "${{ matrix.platform }}" == "linux/arm64" ]]; then
+            echo "short=arm64" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: Dockerfile.prod
+          platforms: ${{ matrix.platform }}
+          push: true
+          tags: |
+            ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}
+            ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-${{ steps.platform.outputs.short }}
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: build-and-push
+
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_HUB_USERNAME }}
+          password: ${{ secrets.DOCKER_HUB_TOKEN }}
+
+      - name: Create and push Docker manifest
+        run: |
+          docker buildx imagetools create \
+            --tag ${{ env.DOCKER_REPOSITORY }}:latest \
+            --tag ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }} \
+            ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-amd64 \
+            ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}-arm64
+
+      - name: Inspect image
+        run: |
+          docker buildx imagetools inspect ${{ env.DOCKER_REPOSITORY }}:latest
+          docker buildx imagetools inspect ${{ env.DOCKER_REPOSITORY }}:${{ github.sha }}

Dockerfile

@@ -11,24 +11,39 @@ RUN apt-get update && \
 RUN npm install -g yarn
 
 # Install pm2 globally
-RUN npm install -g pm2
+RUN yarn global add pm2
 
-# Copy in package.json files and run install to allow docker to cache themc
+# Copy in package.json files and run install to allow docker to cache them
 COPY react/package.json /React-TrashMail/react/
+COPY react/yarn.lock /React-TrashMail/react/
 WORKDIR /React-TrashMail/react
-RUN yarn
+RUN yarn install
+
 COPY mailserver/package.json /React-TrashMail/mailserver/
+COPY mailserver/yarn.lock /React-TrashMail/mailserver/
 WORKDIR /React-TrashMail/mailserver
-RUN yarn
+RUN yarn install
 
+# Copy the rest of the application code
 COPY . /React-TrashMail
 
+WORKDIR /React-TrashMail/react
+RUN yarn build 
+RUN rm -rf ../mailserver/build/* && mkdir -p ../mailserver/build && cp -r build/* ../mailserver/build/
+
 # Define mountable volume
 VOLUME ["/React-TrashMail/mailserver/attachments"]
 
 # Copy startup script
 COPY docker_start.sh /docker_start.sh
 RUN chmod +x /docker_start.sh
 
+# Set the health check
+COPY healthcheck.sh /healthcheck.sh
+RUN chmod +x /healthcheck.sh
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD /healthcheck.sh
+
 # Set the command to start the application using the startup script
 CMD ["/docker_start.sh"]

Dockerfile.prod

@@ -0,0 +1,42 @@
+# Start with the official MongoDB image
+FROM mongo:latest
+
+# Install Node.js and Git
+RUN apt-get update && \
+    apt-get install -y curl gnupg git && \
+    curl -sL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs
+
+# Install yarn globally
+RUN npm install -g yarn
+
+# Install pm2 globally
+RUN yarn global add pm2
+
+# Copy in mailserver dependencies
+COPY mailserver/package.json /React-TrashMail/mailserver/
+COPY mailserver/yarn.lock /React-TrashMail/mailserver/
+COPY mailserver/node_modules /React-TrashMail/mailserver/node_modules
+
+# Copy the rest of the application code
+COPY . /React-TrashMail
+
+# Copy built React app to mailserver build directory
+COPY react/build /React-TrashMail/mailserver/build
+
+# Define mountable volume
+VOLUME ["/React-TrashMail/mailserver/attachments"]
+
+# Copy startup script
+COPY docker_start.sh /docker_start.sh
+RUN chmod +x /docker_start.sh
+
+# Set the health check
+COPY healthcheck.sh /healthcheck.sh
+RUN chmod +x /healthcheck.sh
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD /healthcheck.sh
+
+# Set the command to start the application using the startup script
+CMD ["/docker_start.sh"]

docker_start.sh

@@ -15,14 +15,16 @@ if [ ! -f "$FIRST_RUN_FLAG" ]; then
 
     pm2-runtime stop yarn -- start
 
-    # Build the React project
+    # Set environment variables in react
     cd /React-TrashMail/react
-    yarn run build
+
+    npx react-inject-env set
+    mv ./build/env.js ../mailserver/build/
 
     # Create the flag file to indicate completion of first run
     touch "$FIRST_RUN_FLAG"
 fi
 
 # Start the application
 cd /React-TrashMail/mailserver
-PM2_HOME=/React-Trashmail/mailserver pm2-runtime start yarn -- start:docker
+PM2_HOME=/React-TrashMail/mailserver pm2-runtime start yarn -- start:docker

healthcheck.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# Check MongoDB
+if ! mongosh --eval "db.adminCommand('ping')" > /dev/null 2>&1; then
+  echo "MongoDB is down"
+  exit 1
+fi
+
+# Check Backend
+if ! curl -f http://localhost:4000/ > /dev/null 2>&1; then
+  echo "Backend is down"
+  exit 1
+fi
+
+echo "All services are running"
+exit 0

mailserver/README.md

@@ -1,5 +1,3 @@
-I apologize for the duplicated response. Here's the corrected version of the README file:
-
 # Mail Server
 
 This is a Node.js-based mail server that provides SMTP (Simple Mail Transfer Protocol) and web server functionality. The server allows users to receive emails and store them in a MongoDB database. It also provides routes for retrieving and managing emails and their attachments.

react/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && mv build/ ../mailserver/",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -44,6 +44,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "react-inject-env": "^2.1.0"
   }
 }

react/public/index.html

@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>TrashMail</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>TrashMail</title>
+  <script src='/env.js'></script>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>

react/src/components/AllEmailList/index.js

@@ -7,6 +7,7 @@ import { useRef } from "react";
 import FiberNewOutlinedIcon from "@mui/icons-material/FiberNewOutlined";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ConfirmModal from "../ConfirmModal";
+import { env } from "../../env";
 
 const AllEmailList = () => {
   const [emailData, setEmailData] = useState([]);
@@ -37,7 +38,7 @@ const AllEmailList = () => {
   useEffect(() => {
     const fetchEmailData = async () => {
       try {
-        const response = await axios.get(`${process.env.REACT_APP_API_URL}/all-emails`);
+        const response = await axios.get(`${env.REACT_APP_API_URL}/all-emails`);
         setEmailData(response.data);
         console.log(response.data);
         setLoading(false);
@@ -79,7 +80,7 @@ const AllEmailList = () => {
 
   const handleDeleteEmail = async () => {
     try {
-      await axios.delete(`${process.env.REACT_APP_API_URL}/email/${emailToDelete[1]}/${emailToDelete[0]}`);
+      await axios.delete(`${env.REACT_APP_API_URL}/email/${emailToDelete[1]}/${emailToDelete[0]}`);
       // Refresh the email list after successful deletion
       setReload(!reload);
     } catch (error) {