add FTP account configuration for deployment

Author: bryanmax9

.htaccess

@@ -1,6 +1,12 @@
+# Node.js App Configuration
 RewriteEngine On
-RewriteBase /
-RewriteRule ^index\.html$ - [L]
+
+# Handle Next.js routing
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
-RewriteRule . /index.html [L]
+RewriteRule ^(.*)$ /index.html [QSA,L]
+
+# Security headers
+Header always set X-Frame-Options DENY
+Header always set X-Content-Type-Options nosniff
+Header always set X-XSS-Protection "1; mode=block"

deploy.sh

@@ -0,0 +1,81 @@
+#!/bin/bash
+
+# Automated Node.js Deployment Script for cPanel
+# This script automates the deployment process as much as possible
+
+echo "🚀 Starting automated Node.js deployment..."
+
+# Configuration
+APP_DIR="/home/csulb/public_html"
+NODE_APP_NAME="acm-website"
+
+# Function to check if Node.js app exists
+check_node_app() {
+    echo "📋 Checking if Node.js app exists..."
+    # This would check cPanel API - placeholder for now
+    return 0
+}
+
+# Function to install dependencies
+install_dependencies() {
+    echo "📦 Installing dependencies..."
+    cd $APP_DIR
+    npm install --production
+    if [ $? -eq 0 ]; then
+        echo "✅ Dependencies installed successfully"
+    else
+        echo "❌ Failed to install dependencies"
+        exit 1
+    fi
+}
+
+# Function to build the application
+build_app() {
+    echo "🔨 Building application..."
+    cd $APP_DIR
+    npm run build
+    if [ $? -eq 0 ]; then
+        echo "✅ Application built successfully"
+    else
+        echo "❌ Failed to build application"
+        exit 1
+    fi
+}
+
+# Function to restart the Node.js app
+restart_app() {
+    echo "🔄 Restarting Node.js application..."
+    # This would use cPanel API to restart the app
+    echo "⚠️  Manual step required: Please restart your Node.js app in cPanel"
+    echo "   1. Go to cPanel → Node.js Apps"
+    echo "   2. Find your app and click 'Restart'"
+}
+
+# Main deployment process
+main() {
+    echo "🎯 Starting deployment process..."
+    
+    # Check if app directory exists
+    if [ ! -d "$APP_DIR" ]; then
+        echo "❌ App directory not found: $APP_DIR"
+        exit 1
+    fi
+    
+    # Install dependencies
+    install_dependencies
+    
+    # Build application
+    build_app
+    
+    # Restart app (manual step)
+    restart_app
+    
+    echo "🎉 Deployment process completed!"
+    echo "📝 Next steps:"
+    echo "   1. Restart your Node.js app in cPanel"
+    echo "   2. Check your application logs"
+    echo "   3. Test your website"
+}
+
+# Run main function
+main

deploy.yml

@@ -1,8 +1,8 @@
-name: Build & Deploy Next.js to cPanel via FTP
+name: Build & Deploy Next.js to cPanel (Dynamic)
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   workflow_dispatch:
 
 jobs:
@@ -14,26 +14,44 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install deps
         run: npm ci
 
-      - name: Build (Next static export)
+      - name: Build Next.js app
         env:
           NEXT_PUBLIC_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
-        run: npm run build     # produces out/
+          MONGODB_URI: ${{ secrets.MONGODB_URI }}
+          JWT_SECRET: ${{ secrets.JWT_SECRET }}
+          BREVO_API_KEY: ${{ secrets.BREVO_API_KEY }}
+        run: npm run build
 
       - name: Deploy via FTP to cPanel
         uses: SamKirkland/FTP-Deploy-Action@v4
         with:
           server: ${{ secrets.FTP_HOST }}
           username: ${{ secrets.FTP_USER }}
           password: ${{ secrets.FTP_PASS }}
-          local-dir: out/
-          server-dir: public_html/
+          local-dir: ./
+          server-dir: public_html/acm/
           exclude: |
             **/.git*
             **/.github*
             **/node_modules/**
             **/*.map
+            **/.next/cache/**
+            **/out/**
+            **/.env*
+            **/README.md
+            **/deploy.yml
+            **/deploy.sh
+
+      - name: Notify deployment completion
+        run: |
+          echo "🚀 Deployment completed!"
+          echo "📝 Manual steps required:"
+          echo "   1. Go to cPanel → Node.js Apps"
+          echo "   2. Click 'Install Dependencies'"
+          echo "   3. Click 'Build Application'"
+          echo "   4. Click 'Start Application'"

next.config.mjs

@@ -1,10 +1,20 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export',          // static export
-  images: { unoptimized: true }, // needed when exporting
-  // If deploying to a subfolder like /app:
-  // basePath: '/app',
-  // assetPrefix: '/app/',
-  // trailingSlash: true,
+  // Dynamic deployment - no static export
+  // output: "export", // static export
+  // images: { unoptimized: true }, // needed when exporting
+
+  // Enable image optimization for better performance
+  images: {
+    domains: ["localhost", "csulb.acm.org"], // Add your domain here
+  },
+
+  // Configure for subfolder deployment
+  basePath: "/acm",
+  assetPrefix: "/acm/",
+
+  // If deploying to root:
+  // basePath: '/',
+  // assetPrefix: '/',
 };
 export default nextConfig;

package.json

@@ -5,9 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "export": "next export"
+    "start": "node server.js",
+    "lint": "next lint"
   },
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "^6.6.0",

server.js

@@ -0,0 +1,35 @@
+const { createServer } = require("http");
+const { parse } = require("url");
+const next = require("next");
+
+const dev = process.env.NODE_ENV !== "production";
+const hostname = "localhost";
+const port = process.env.PORT || 3000;
+
+// when using middleware `hostname` and `port` must be provided below
+const app = next({ dev, hostname, port });
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  createServer(async (req, res) => {
+    try {
+      // Be sure to pass `true` as the second argument to `url.parse`.
+      // This tells it to parse the query portion of the URL.
+      const parsedUrl = parse(req.url, true);
+      const { pathname, query } = parsedUrl;
+
+      await handle(req, res, parsedUrl);
+    } catch (err) {
+      console.error("Error occurred handling", req.url, err);
+      res.statusCode = 500;
+      res.end("internal server error");
+    }
+  })
+    .once("error", (err) => {
+      console.error(err);
+      process.exit(1);
+    })
+    .listen(port, () => {
+      console.log(`> Ready on http://${hostname}:${port}`);
+    });
+});

src/app/about/page.js

@@ -1,10 +1,10 @@
 "use client";
 
-import { useState, useEffect } from 'react';
-import { motion } from 'framer-motion';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLinkedin, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope, faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLinkedin, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faEnvelope, faGlobe } from "@fortawesome/free-solid-svg-icons";
 
 export default function About() {
   const [officers, setOfficers] = useState([]); // Initialize as an empty array
@@ -15,19 +15,19 @@ export default function About() {
     const fetchOfficers = async () => {
       try {
         // Fetch from the correct endpoint to get all officers
-        const response = await fetch('/api/about/officers');
-        if (!response.ok) throw new Error('Failed to fetch officers data');
+        const response = await fetch("/api/about/officers");
+        if (!response.ok) throw new Error("Failed to fetch officers data");
 
         const data = await response.json();
 
         if (Array.isArray(data)) {
           setOfficers(data); // Set officers data if it's an array
           setIsLoaded(true); // Set loaded state to true after data is fetched
         } else {
-          throw new Error('Unexpected data format');
+          throw new Error("Unexpected data format");
         }
       } catch (error) {
-        console.error('Error fetching officers:', error);
+        console.error("Error fetching officers:", error);
         setError(error.message);
       }
     };
@@ -38,8 +38,12 @@ export default function About() {
   return (
     <div className="min-h-screen bg-white">
       {/* About Header with Animated Background */}
-      <div className="relative area"> {/* Wrapper for animated background */}
-        <ul className="circles"> {/* Floating circles */}
+      <div className="relative area">
+        {" "}
+        {/* Wrapper for animated background */}
+        <ul className="circles">
+          {" "}
+          {/* Floating circles */}
           <li></li>
           <li></li>
           <li></li>
@@ -51,7 +55,6 @@ export default function About() {
           <li></li>
           <li></li>
         </ul>
-
         <motion.section
           className="relative z-10 text-white py-20 text-center"
           initial={{ opacity: 0, y: -50 }}
@@ -61,7 +64,10 @@ export default function About() {
           <div className="container mx-auto">
             <h1 className="text-5xl font-extrabold">About ACM at CSULB</h1>
             <p className="text-xl mt-4 max-w-3xl mx-auto">
-              ACM at CSULB is dedicated to advancing computing as a science and profession. We organize regular events, workshops, and hackathons to foster learning, collaboration, and innovation among our members.
+              ACM at CSULB is dedicated to advancing computing as a science and
+              profession. We organize regular events, workshops, and hackathons
+              to foster learning, collaboration, and innovation among our
+              members.
             </p>
           </div>
         </motion.section>
@@ -71,12 +77,15 @@ export default function About() {
       <motion.section
         className="container mx-auto py-12 text-center text-black"
         initial={{ opacity: 0 }}
-        animate={{opacity: 1}}
+        animate={{ opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
         <h2 className="text-3xl font-bold">Our Mission</h2>
         <p className="text-lg mt-4 max-w-2xl mx-auto mb-4">
-          Our mission is to empower students with knowledge, resources, and opportunities to thrive in the field of computing. We aim to build a bridge between students and industry professionals by hosting workshops, networking events, and technical challenges.
+          Our mission is to empower students with knowledge, resources, and
+          opportunities to thrive in the field of computing. We aim to build a
+          bridge between students and industry professionals by hosting
+          workshops, networking events, and technical challenges.
         </p>
       </motion.section>
 
@@ -91,9 +100,16 @@ export default function About() {
           <h2 className="text-3xl font-bold text-black">Meet Our Officers</h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8 text-gray-900 text-xl">
             {officers.map((officer, index) => (
-              <div key={index} className="our-team border-solid border-2 border-black shadow-lg">
+              <div
+                key={index}
+                className="our-team border-solid border-2 border-black shadow-lg"
+              >
                 <div className="picture">
-                  <img className="img-fluid" src={officer.image} alt={officer.name} />
+                  <img
+                    className="img-fluid"
+                    src={officer.image}
+                    alt={officer.name}
+                  />
                 </div>
                 <div className="team-content">
                   <h3 className="name">{officer.name}</h3>
@@ -102,28 +118,43 @@ export default function About() {
                 <ul className="social flex justify-center mt-4 space-x-4">
                   {officer.linkedin && (
                     <li>
-                      <a href={officer.linkedin} target="_blank" className="text-blue-600 hover:text-blue-800">
+                      <a
+                        href={officer.linkedin}
+                        target="_blank"
+                        className="text-blue-600 hover:text-blue-800"
+                      >
                         <FontAwesomeIcon icon={faLinkedin} size="lg" />
                       </a>
                     </li>
                   )}
                   {officer.email && (
                     <li>
-                      <a href={`mailto:${officer.email}`} className="text-blue-600 hover:text-blue-800">
+                      <a
+                        href={`mailto:${officer.email}`}
+                        className="text-blue-600 hover:text-blue-800"
+                      >
                         <FontAwesomeIcon icon={faEnvelope} size="lg" />
                       </a>
                     </li>
                   )}
                   {officer.github && (
                     <li>
-                      <a href={officer.github} target="_blank" className="text-blue-600 hover:text-blue-800">
+                      <a
+                        href={officer.github}
+                        target="_blank"
+                        className="text-blue-600 hover:text-blue-800"
+                      >
                         <FontAwesomeIcon icon={faGithub} size="lg" />
                       </a>
                     </li>
                   )}
                   {officer.website && (
                     <li>
-                      <a href={officer.website} target="_blank" className="text-blue-600 hover:text-blue-800">
+                      <a
+                        href={officer.website}
+                        target="_blank"
+                        className="text-blue-600 hover:text-blue-800"
+                      >
                         <FontAwesomeIcon icon={faGlobe} size="lg" />
                       </a>
                     </li>