Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hacc2024/hex

UHSPACE Data Hub 2024
https://github.com/hacc2024/hex

aws-ec2 chatbot-framework codeql-enabled css database-management docker firebase flask groq-api nextjs nginx-proxy python recaptcha-v2 recharts-js ssl-certificates typescript user-management

Last synced: 3 days ago
JSON representation

UHSPACE Data Hub 2024

Host: GitHub
URL: https://github.com/hacc2024/hex
Owner: HACC2024
License: mit
Created: 2024-10-16T03:14:00.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-11-09T23:10:31.000Z (2 months ago)
Last Synced: 2024-11-10T00:18:06.594Z (2 months ago)
Topics: aws-ec2, chatbot-framework, codeql-enabled, css, database-management, docker, firebase, flask, groq-api, nextjs, nginx-proxy, python, recaptcha-v2, recharts-js, ssl-certificates, typescript, user-management
Language: TypeScript
Homepage: https://uhspace.org
Size: 76.4 MB
Stars: 4
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: docs/README.md
- License: LICENSE
- Code of conduct: docs/CODE_OF_CONDUCT.md
- Security: docs/SECURITY.md

Awesome Lists containing this project

README

        
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



  Installation

  Development

  Building the Project

  Exporting Static Files

  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](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - 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.