KubestellarUI Setup Guide

Welcome to KubestellarUI! This guide will help you set up the KubestellarUI application on your local machine after cloning the repository for development. The application consists of two main parts:

1. Frontend: Built with React and TypeScript
2. Backend: Built with Golang using the Gin framework.

Prerequisites

Before you begin, ensure that your system meets the following requirements:

1. Golang

• Version: 1.23.4
• Download Link: Golang Downloads

2. Node.js and npm

• Node.js Version: ≥ 16.x.x
• npm Version: Comes bundled with Node.js
• Download Link: Node.js Downloads

3. Git

• Ensure Git is installed to clone the repository
• Download Link: Git Downloads

4. Kubernetes Clusters

• Ensure you have access to a Kubernetes clusters setup with Kubestellar Getting Started Guide & Kubestellar prerequisites installed

• Kubestellar guide: Guide

Installation Steps

1. Clone the Repository

git clone https://github.com/your-github-username/ui.git

cd ui

2. Create .env File for Frontend Configuration

To configure the frontend, rename the example.env file to .env in the project root directory (where package.json is located).

Example .env file:

VITE_BASE_URL=http://localhost:4000
VITE_APP_VERSION=0.1.0
VITE_GIT_COMMIT_HASH=$GIT_COMMIT_HASH

This is because .env files are intended to be a personal environment configuration file. The included example.env in the repo is a standard that most other node projects include for the same purpose. You rename the file to .env and then change its contents to align with your system and personal needs.

Tracking Application Version and Git Commit Hash

KubestellarUI uses environment variables to track the app version and the current Git commit hash.

Environment Variables

Variable	Purpose	Example
VITE_BASE_URL	Defines the base URL for API calls	http://localhost:4000
VITE_APP_VERSION	Defines the current application version	0.1.0
VITE_GIT_COMMIT_HASH	Captures the current Git commit hash	(Set during build)

---

Run Redis Container**

KubestellarUI uses Redis for caching real-time WebSocket updates to prevent excessive Kubernetes API calls.

Run Redis using Docker:

docker run --name redis -d -p 6379:6379 redis

Verify Redis is running:

docker ps | grep redis

---

Install and Run Backend

cd backend

go mod download

go run main.go

The backend server will start on port 4000. You should see output indicating the server is running.

Install and Run Frontend

Install Dependencies

From the project root directory:

npm install

Run Development Server

npm run dev

The frontend development server will start, typically on port 5173.

Run with Docker Compose

If you prefer to run the application using Docker Compose, follow these steps:

1. Ensure Docker is Installed

• Download Link: Docker Downloads

2. Run Docker Compose

From the project root directory:

docker-compose up --build

To stop the application:

docker-compose down

3. Use Docker Compose in Development Cycle

For ongoing development, use the following steps:

• Quit the Application:

  docker-compose down

• Pull the Latest Changes:

  git pull origin main

• Restart the Application:

  docker-compose up --build

This will:

• Stop the running containers.
• Pull the latest source code changes.
• Rebuild and restart the application.

Docker Image Versioning and Pulling

If you'd like to work with the Docker images for the KubestellarUI project, here's how you can use the latest and versioned tags:

1. Frontend Image:

   • Tag: quay.io/kubestellar/ui:frontend
   • Latest Version: latest
   • Specific Version (Commit Hash): frontend-<commit-hash>

2. Backend Image:

   • Tag: quay.io/kubestellar/ui:backend
   • Latest Version: latest
   • Specific Version (Commit Hash): backend-<commit-hash>

How to Pull the Latest Images:

• Frontend Image:

  docker pull quay.io/kubestellar/ui:frontend

• Backend Image:

  docker pull quay.io/kubestellar/ui:backend

How to Pull Specific Version (Commit Hash):

If you want to pull an image for a specific version (e.g., commit hash), use:

• Frontend Image with Version:

  docker pull quay.io/kubestellar/ui:frontend-abcd1234

• Backend Image with Version:

  docker pull quay.io/kubestellar/ui:backend-abcd1234

Accessing the Application

1. Backend API: http://localhost:4000
2. Frontend UI: http://localhost:5173

Contributors