Skip to content

Latest commit

 

History

History

website

README.md

AirQo Website

Table of Contents

Overview

AirQo Website is a web application built with Django (backend) and React (frontend). This README provides instructions for setting up the development environment, running the application, and managing the project.

Prerequisites

  • Python 3.7 or higher
  • Node.js v12 or higher
  • npm
  • Git
  • PostgreSQL 13.x
  • Docker (optional)

Development Setup

Clone the Repository

git clone https://github.com/airqo-platform/AirQo-frontend.git
cd AirQo-frontend/website

Environment Setup

OSX

  1. Install Homebrew:

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

  2. Install direnv:

    brew install direnv

  3. Add direnv hook to your shell configuration file (~/.zshrc or ~/.bash_profile):

    eval "$(direnv hook zsh)"  # or bash

  4. Install PostgreSQL:

    brew install postgresql@13

  5. Start PostgreSQL service:

    brew services start postgresql@13

Linux

  1. Install required packages:

    sudo apt-get update
sudo apt-get install python3-pip postgresql

  2. Install pipenv:

    pip install --user pipenv

  3. Start PostgreSQL service:

    sudo systemctl start postgresql

Windows

  1. Install PostgreSQL from the official website.

  2. Install virtualenv:

    pip install virtualenv

  3. Create and activate a virtual environment:

    virtualenv env
.\env\Scripts\activate

Database Setup

  1. Access PostgreSQL:

    sudo -u postgres psql

  2. Create a new user and database:

    CREATE USER yourusername WITH PASSWORD 'yourpassword' CREATEDB;
CREATE DATABASE airqo_db OWNER yourusername;

  3. Exit PostgreSQL:

    \q

Environment Variables

  1. Create .envrc and .env files in the project root:

    cp .env.sample .env

  2. Add the following to .envrc:

    layout python python3
PATH_add node_modules/.bin
dotenv

  3. Populate the .env file with necessary environment variables (refer to .env.sample).

Running the Application

Backend (Django)

  1. Install Python dependencies:

    pip install -r requirements.txt

  2. Run migrations:

    python manage.py migrate

  3. Start the Django development server:

    python manage.py runserver

Frontend (React)

  1. Install Node.js dependencies:

    npm install

  2. Start the React development server:

    npm run standalone

The application should now be accessible at http://localhost:8000/ (Django) and http://localhost:8081/ (React).

Database Management

  1. Create a superuser:

    python manage.py createsuperuser

  2. Access the admin panel at http://localhost:8000/admin/

Development Commands

  • Run Django server: inv run-web
  • Run webpack dev-server: inv webpack-server
  • Run JS lint checks: inv lint-js
  • Auto-fix JS lint issues: inv prettier-js
  • Run webpack build (production): inv run-build

Docker Setup

  1. Build the Docker image:

    docker build . \
    --build-arg REACT_WEB_STATIC_HOST=<value> \
    --build-arg REACT_NETMANAGER_BASE_URL=<value> \
    --build-arg REACT_APP_BASE_AIRQLOUDS_URL=<value> \
    --build-arg REACT_APP_BASE_NEWSLETTER_URL=<value> \
    --build-arg REACT_APP_WEBSITE_BASE_URL=<value> \
    --build-arg REACT_APP_AUTHORIZATION_TOKEN=<value> \
    --build-arg REACT_APP_GEO_LOCATION_URL=<value> \
    --tag airqo-website:latest

  2. Run the Docker container:

    docker run -d -p 8080:8080 --env-file=.env airqo-website:latest

The application should be accessible at http://localhost:8080/

Troubleshooting

  • If you encounter any issues with direnv, make sure it's properly set up in your shell configuration.
  • For Windows users, ensure that the node_modules/.bin directory is added to your system's PATH.

Contributing

Please read our Contributing Guidelines for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License.