Skip to content

(1) How to Setup

Jump to bottom
David Mang edited this page Aug 30, 2024 · 1 revision

Prequesites

Ensure you have the following installed on your machine:

Client Setup (React + Vite)

  1. Clone the respository
https://github.com/ls1intum/Thaii.git
cd thaii
  1. Navigate to client directory
cd client
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev

The client development server should now be running at http://localhost:5173.

Server Setup (Django)

  1. Navigate to the server directory:
cd ../server
  1. Create a virtual environment:
virtualenv venv
  1. Activate the virtual environment:
  • On Windows:
venv\Scripts\activate
  • On macOS/Linux:
source venv/bin/activate
  1. Install dependencies:
pip install -r requirements.txt
  1. Run database migrations:
python manage.py migrate
  1. Create a superuser:
python manage.py createsuperuser
  • Follow the prompts to set up your superuser account.
  • Superusers can log in to the system without being whitlisted first.
  • Superusers can access the admin panel at http://localhost:8000/api/admin and manage the stored data.
  1. Start the development server:
python manage.py runserver

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

Environment Variables

Ensure you have the necessary environment variables set up for both the frontend and backend. You can create a .env file in the root of each directory and add the required variables.

Client .env Example

VITE_API_URL=http://localhost:8000/
VITE_ENABLE_TRACKING=true/false
  • VITE_ENABLE_TRACKING: Enables or disables tracking of user interactions with the webapplication.

Server .env Example

OPENAI_API_KEY=your_open_ai_key
DEBUG=True
SECRET_KEY=your_secret_key
POSTGRES_DB=your_db_name
POSTGRES_USER=your_db_user
POSTGRES_PASSWORD=your_db_password
POSTGRES_HOST=your_db_host
EMAIL_USE_TLS=True
EMAIL_HOST=your_email_host
EMAIL_HOST_USER=your_email_host_user
EMAIL_HOST_PASSWORD=your_email_host_user_password
DEFAULT_FROM_EMAIL=your_default_email_host
EMAIL_PORT=587
DJANGO_SUPERUSER_USERNAME=your_django_superuser
DJANGO_SUPERUSER_PASSWORD=your_django_superuser_password
DJANGO_SUPERUSER_EMAIL=your_django_superuser_email
  • OPENAI_API_KEY: Key for an OpenAI project to leverage the OpenAI API
  • POSTGRES_DB, POSTGRES_USER, POSTGRES_PASSWORD, POSTGRES_HOST: Variables to setup and connect to a PostgreSQL database used to store the data created. The POSTGRES_HOST name is 'localhost' for the local development and 'db' when using docker to run it locally or for deloyment
  • EMAIL_HOST, EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, DEFAULT_FROM_EMAIL: Email configurations to send activation emails for the register flow of users
  • DJANGO_SUPERUSER_USERNAME, DJANGO_SUPERUSER_PASSWORD, DJANGO_SUPERUSER_EMAIL: Only important for the productive environment. When deployed a superuser with these credentials is created if it does not exist already.

Running Application with Docker

When you only want to run the application locally without setting up the client and server you can use Docker.

  1. Prerequisites:
  • Make sure you installed and run Docker on your local machine
  • Make sure you created an .env file with the variables above for the server in the root directory. Set 'db' as POSTGRES_HOST.
  1. Build and run the containers: To build the Docker images and start the services defined in the Docker Compose file, run the following command:
docker-compose -f compose.dev.yml up --build
  1. Access the web application: Once the containers are up and running, you can access the web application in your browser at:
http://localhost:80
  1. Stopping the containers: To stop the running containers, press Ctrl + C in the terminal where Docker Compose is running, or run:
docker-compose -f compose.dev.yml down

Running Application

With both the client and server running, you should be able to access the web application at http://localhost:5173 (client and server setup) or http://localhost:80 (docker setup).

Additional Information

  • Client Build: To create a production build of the frontend, run:
npm run build
  • Server Management: You can use standard Django management commands for additional backend tasks.
  • Data Management: You can access the data using the admin panel at http://localhost:8000/api/admin (client and server setup) or http://localhost:80/api/admin (docker setup) with your superuser account or connect to the local database with pgAdmin.
Clone this wiki locally