UHSPACE Data Hub by HEX at UHM - Next.js with Firebase Hosting and AWS EC2

Overview

This project is a Next.js web application called UHSPACE Data Hub, which stands for "Unlocking Hawaii's Solutions for Personalized Analytics and Collaborative Engagement". This README will guide you through the development, build, and deployment process.

Final Deployed Website: https://uhspace.org

Temporary Administrator Access for Judging (Available Only on 11/11/2024):

• Go to the footer of the homepage, on the bottom right, and click on the 'Admin Portal' logo.
• Email: View Submitted Google Form
• Password: View Submitted Google Form

Important Notice: This login is exclusively for judges to review the project on 11/11/2024. Access will be removed promptly on 11/12/2024 to ensure the security and integrity of our systems. Please be assured that this temporary login does not compromise any sensitive data or system functionality. Thank you for your understanding and cooperation during the evaluation period.

---

Table of Contents

1. Installation
2. Development
3. Building the Project
4. Exporting Static Files
5. Deploying to Firebase Hosting

---

Prerequisites

Make sure you have the following installed on your system:

• Node.js (v16.x or later)
• Firebase CLI
• A Firebase project (You can create one at the Firebase Console)

---

1. Installation

To set up the project, follow these steps:

Clone the repository

git clone https://github.com/HACC2024/HEX.git
cd HEX

Install Dependencies

Run the following command to install the required dependencies:

npm install

This will install all dependencies listed in package.json.

---

2. Development

To run the project in development mode:

npm run dev

• The app will start on http://localhost:3000.
• Any changes you make in the code will automatically trigger hot-reloading.

---

3. Building the Project

To create a production build, run:

npm run build

This command will generate an optimized production build of your Next.js app.

---

4. Exporting Static Files

Next.js provides a feature to export your project as static files. This is crucial for deploying the app to Firebase Hosting. With the recent updates in Next.js, you do not need to run npm run export. Instead, the build process itself (using npm run build) automatically prepares your application for static export based on your configuration in next.config.mjs.

This will export your static site to the out directory.

---

5. Deploying to Firebase Hosting

Follow these steps to deploy the project on Firebase Hosting:

5.1. Initialize Firebase Hosting

If you haven't initialized Firebase Hosting for this project yet, run the following command:

firebase init hosting

During this step:

• Select your Firebase project.
• Set out as the public directory (the directory where static files are generated).
• Choose No for "Single-page app" configuration.

5.2. Deploy the Project

Once your static files are generated in the out directory and Firebase is initialized, deploy the project with:

firebase deploy

Firebase will deploy your application, and you will receive a URL where you can view the live project.

---

Additional Notes

• Firebase SDK: If you are using Firebase services (e.g., Authentication, Firestore), make sure to install and configure the Firebase SDK.
• Environment Variables: Ensure you are using .env files to manage sensitive information such as API keys, Firebase credentials, etc.

Example .env file:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id

GitHub Workflow: You can also set up automatic deployments to Firebase Hosting using GitHub Actions.

---

License

This project is licensed under the MIT License.

---

Contact

For any questions or issues, feel free to contact our team at [email protected].

---

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

Flask-Backend API

Backend Prod: https://uhspace.org

Backend Dev: http://127.0.0.1:5000

Note: If the Chatbot is giving CORS issues, visit:

• http://api.uhspace.org
• http://hex-chatbots-2141489768.us-east-2.elb.amazonaws.com/

The pages should display: "Welcome to the Flask Chatbot API!"

1) If not, check if the EC2 Instance is active:

• Log in to the AWS Console and connect to the instance through the console or via SSH.
• Run curl http://18.224.7.0:5000, replacing 18.224.7.0 with the instance’s public IP. It should return the Flask Chatbot API welcome message.

2) If the pages above do not render correctly, set up a new Load Balancer on the EC2 instance:

• Set up listeners on HTTP Port 80 and HTTPS Port 443.
• Create a Target Group for Port 5000.
• Assign the SSL/TLS Certificate for uhspace.org.
• Edit the Nginx configuration with sudo vim /etc/nginx/conf.d/uhspace.conf.
• Update the location /api block with proxy_pass http://new-load-balancer-DNS-name.
• Test the configuration with sudo nginx -t.
• If there are no errors, restart Nginx with sudo systemctl restart nginx.
• Check the status of Nginx with sudo systemctl status nginx. It should display an active status.