Skip to main content

Frontend Setup

This guide covers the setup and deployment of the Rhea Agripad frontend application.

Local Development Setup​

Prerequisites​

  • Node.js (v14 or later)
  • Yarn or npm

Installation​

  1. Clone the repository:
git clone https://github.com/Rhea-Africa/agripad-frontend.git
cd agripad-frontend
  1. Install dependencies:
yarn install
# or
npm install
  1. Create environment variables:

Create a .env.local file in the root directory with the necessary environment variables.

  1. Start the development server:
yarn dev
# or
npm run dev

The application will be available at http://localhost:3000.

Production Deployment​

For detailed deployment instructions, please refer to the Agripad Frontend Repository.

Integration with Backend​

The frontend communicates with the backend through REST API endpoints and WebSocket connections for real-time data updates.

ENV API Configuration​

Update the API base URL in the environment variables to point to your backend instance:

NEXT_PUBLIC_DEFAULT_API_ROOT="https://api.rhea-agripad.xyz/api"
NEXT_PUBLIC_CUSTOM_API_ROOT="https://rhea.api.rhea-agripad.xyz/api"
NEXT_PUBLIC_APP_NAME="Rhea Agripad"
NEXT_PUBLIC_THEME_COOKIE_NAME="rhea-agripad-theme"
NEXT_PUBLIC_APP_KEY="RHEA_AGRIPAD"
NEXT_PUBLIC_DEFAULT_APP_URL="https://rhea.dashboard.rhea-agripad.xyz"
SENTRY_AUTH_TOKEN=SENTRY_TOKEN

You create different environment variables for different clients. Ie for Rhea, Main and Kilimo

For Main

NEXT_PUBLIC_DEFAULT_API_ROOT="https://api.rhea-agripad.xyz/api"
NEXT_PUBLIC_CUSTOM_API_ROOT="https://main.api.rhea-agripad.xyz/api"
NEXT_PUBLIC_APP_NAME="Main Agripad"
NEXT_PUBLIC_THEME_COOKIE_NAME="main-agripad-theme"
NEXT_PUBLIC_APP_KEY="MAIN_AGRIPAD"
NEXT_PUBLIC_DEFAULT_APP_URL="https://main.dashboard.rhea-agripad.xyz"
SENTRY_AUTH_TOKEN=SENTRY_TOKEN

For Rhea

NEXT_PUBLIC_DEFAULT_API_ROOT="https://api.rhea-agripad.xyz/api"
NEXT_PUBLIC_CUSTOM_API_ROOT="https://rhea.api.rhea-agripad.xyz/api"
NEXT_PUBLIC_APP_NAME="Rhea Agripad"
NEXT_PUBLIC_THEME_COOKIE_NAME="rhea-agripad-theme"
NEXT_PUBLIC_APP_KEY="RHEA_AGRIPAD"
NEXT_PUBLIC_DEFAULT_APP_URL="https://rhea.dashboard.rhea-agripad.xyz"
SENTRY_AUTH_TOKEN=SENTRY_TOKEN

For Kilimo

NEXT_PUBLIC_DEFAULT_API_ROOT="https://api.rhea-agripad.xyz/api"
NEXT_PUBLIC_CUSTOM_API_ROOT="https://kilimo.api.rhea-agripad.xyz/api"
NEXT_PUBLIC_APP_NAME="Kilimo Agripad"
NEXT_PUBLIC_THEME_COOKIE_NAME="kilimo-agripad-theme"
NEXT_PUBLIC_APP_KEY="KILIMO_AGRIPAD"
NEXT_PUBLIC_DEFAULT_APP_URL="https://kilimo.dashboard.rhea-agripad.xyz"
SENTRY_AUTH_TOKEN=SENTRY_TOKEN