Nov 19, 2024

How to Set Up Your Development Environment

Follow these steps to set up your environment and begin contributing to our cutting-edge open-source projects.

Welcome to Reality AI Lab!

Getting started with Reality AI Lab is simple. We're excited to have you join our community of contributors working to enhance educational tools with smart AI solutions. This guide will help you set up your development environment, understand how our repositories relate, and get you started based on what you'd like to work on.

‍

Overview

The Marvel AI Platform consists of two main repositories:

  1. marvel-platform: Contains the frontend (FE) application and backend (BE) Firebase Functions.
  2. marvel-ai-backend: Houses the AI backend services (AI BE) responsible for AI functionalities.

Note: Depending on your focus, you might only need to set up one of these repositories.

‍

Getting Started

Step 1: Determine What You Need to Set Up

Before diving in, decide which part of the platform you'll be working on:

  • Frontend/UI Tasks: Set up the marvel-platform repository.
  • Backend/Firebase Functions: Set up the marvel-platform repository, focusing on backend functions.
  • AI Features/Services: Set up the marvel-ai-backend repository.
  • Full-stack Development or Integration Tasks: Set up both repositories and run them together.

‍

Setting Up the marvel-platform Repository (Frontend and Backend)

If your work involves the frontend or Firebase backend functions, follow these steps.

Prerequisites

  • Node.js (version 18 or later)
  • Firebase CLI (version 9.10.0 or later)
  • A Google Firebase Account
  • Git

Folder Structure

The marvel-platform repository has the following structure:

  • /functions: Houses the Firebase Functions, which are serverless functions responsible for backend processes such as the AI chatbot and tools communicators.

‍

Step 2: Clone the Repository

Open your terminal and run‍

git clone <https://github.com/marvelai-org/marvel-platform.git>
cd marvel-platform

‍

Step 3: Create a Firebase Project

  1. Visit the Firebase Console.
  2. Click Add project and follow the prompts to create a new project.
  3. After creation, navigate to Firestore Database in the left sidebar.
  4. Click Create database to enable it.

‍

Step 4: Configure Firebase in Your Project

  1. In the Firebase Console, go to Project settings (gear icon).
  2. Under Your apps, click the </> icon to add a new web app.
  3. Register your app to get the Firebase configuration object.
  4. In your local marvel-platform directory, create a .env file.
  5. Use sample.env as a reference for required variables.
    Note:     The default values in sample.env are configured to connect to the production MarvelAI server (app.marvelai.app). You can keep these values for production or update them to point to your Firebase project.
  6. Paste your Firebase configuration details into the .env file, matching the variable names.

‍

Step 5: Install Firebase CLI

If you haven't installed the Firebase CLI, run:

npm install -g firebase-tools

‍

Step 6: Log In to Firebase

Authenticate the Firebase CLI with your account

firebase login

‍

Step 7: Install Dependencies

Install all dependencies for the repository in one step:

npm run install:all

‍

Running the Frontend

Development Options

You can run the development environment in one of two ways:

  1. Frontend with Production Backend
    Run this command if you only need to test frontend changes while using the production backend:
npm run dev

Your frontend application should now be running at http://localhost:3000. Open this URL in your web browser to view the application.

  1. Full Local Development Environment
    Run this command to start both the frontend and Firebase emulators locally:
    ‍
npm run dev:all

This creates a completely isolated development environment for testing full-stack changes.

Logging In During Development

In development mode, you can register an account and log in automatically without email confirmation. Simply visit:

http://localhost:3000/

‍

Emulator Cleanup

If you experience issues with hanging emulator processes after stopping the development server, clean them up by running:

npm run kill-emulators

‍

‍

Setting Up the marvel-ai-backend Repository (AI Backend)

If you're working on AI features or services, set up the AI backend.

Prerequisites

  • Python (version 3.9 or later)
  • Google Cloud Account
  • Docker (for Dockerized setup)
  • Git

‍

Step 1: Clone the Repository

In your terminal, run:

git clone <https://github.com/marvelai-org/marvel-ai-backend.git>
cd marvel-ai-backend/app

‍

Step 2: Create a Google Cloud Project

  1. Go to the Google Cloud Console.
  2. Click Select a project and then New Project.
  3. Enter a name for your project and click Create.

‍

Step 3: Enable Vertex AI API

In your Google Cloud project:

  1. Navigate to APIs & Services > Library.
  2. Search for Vertex AI API.
  3. Click Enable.

‍

Step 4: Create an API Key

  1. In the Google Cloud Console, go to APIs & Services > Credentials.
  2. Click + CREATE CREDENTIALS and select API key.
  3. Copy the generated API key.

‍

Step 5: Set Up Environment Variables

cp .env.sample .env
  1. In your local marvel-ai-backend/app directory, copy the sample environment file above.
  2. Open the .env file in a text editor.
  3. Replace placeholder values with your Google Cloud Project ID and API key.
  4. Set ENV_TYPE to dev.

‍

Step 6: Create and Activate a Virtual Environment

Create a virtual environment:

python -m venv env

‍

Activate the virtual environment:

  • macOS/Linux:
source env/bin/activate
  • Windows:
env\\\\Scripts\\\\activate

‍

Step 7: Install Dependencies

With the virtual environment activated, install required packages:

pip install -r requirements.txt

‍

Running the AI Backend Locally

Step 8: Load Environment Variables

In the app directory, run:

  • macOS/Linux:
source load_env.sh
  • Windows:
    • Manually set the environment variables from the .env file or use a tool like python-dotenv.

‍

Step 9: Start the Application

Run the local start script:

./local-start.sh

The API should now be running at http://localhost:8000.

‍

Step 10: Access the API Documentation

Open your browser and navigate to:

<http://localhost:8000/docs>

Here, you can explore and test the API endpoints.

‍

Docker Setup Guide

Build the Docker image:

docker build -t <image_name>

‍

Run the container:

docker run -p 8000:8000 <image_name>
  1. Access the application at http://localhost:8000/docs.

‍

Running Both Repositories Together

Follow the instructions for each repository to ensure they are running simultaneously. Update frontend endpoints to point to http://localhost:8000 for API requests.

‍

Deploying to the Cloud

Ensure Firebase and Google Cloud configurations are correct, then deploy both repositories using their respective deployment commands:

  • marvel-platform
npm run deploy
  • marvel-ai-backend: Follow your organization's cloud deployment guidelines for Dockerized services.

Resources for Setup

Explore our collection of 200+ Premium Webflow Templates