DEV Community

Rudhra Bharathy G
Rudhra Bharathy G

Posted on

Unleashing Cyclops: A Beginner's Runthrough

cyclops-logo

Cyclops is an innovative web-based tool designed to simplify distributed systems management, specifically focusing on the widely used Kubernetes platform. By providing a user-friendly interface, Cyclops abstracts complex Kubernetes configuration files into intuitive web forms, making it easier for developers to deploy applications and manage Kubernetes environments. It offers predefined fields and graphical representations of deployments, enhancing visibility and reducing the learning curve associated with Kubernetes. Cyclops aims to empower IT operations teams, DevOps teams, developers, and business owners, enabling them to streamline processes, increase productivity, and achieve cost savings in managing Kubernetes clusters.

Let us dive deep into Cyclops run-through:

Installation Guide:

Prerequisite for starting Cyclops:

  1. Docker Desktop / Docker Engine - 📥 Link
  2. Kubernetes - 📥 Link
  3. Minikube - 📥 Link
  4. Helm Charts - 📥 Link

- Starting Minikube: Using Docker

  • Start the docker engine
  • To start minikube paste this command into the terminal
  • minikube start --driver docker

You may wonder why we need Minikube, Minikube is a tool that allows you to run a single-node Kubernetes cluster locally on your machine.

cyclops

while installing the minikube if you encounter this error:

🚨Exiting due to GUEST_START: wait 6m0s for node: wait for healthy API server: apiserver healthz never reported healthy: timed out waiting for the condition🚨

Better try installing with VirtualBox - Refer to this link for installation

Check Minikube status

cyclops

After installing all the above things, let's see how we can start Cyclops-UI:

  • Starting Cyclops using Kubernetes:

Use the commands below to install Cyclops in your cluster

kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.8.2/install/cyclops-install.yaml && kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.8.2/install/demo-templates.yaml

cyclops

kubectl port-forward svc/cyclops-ui 3000:3000 -n cyclops

cyclops

After deploying your Cyclops instance locally, you may use Cyclops to deploy an application onto the cluster, open localhost:3000 in the web browser

cyclops

There are three different sections in Cyclops-UI Modules, Nodes, and Templates:

  • Modules: We wish to declare our new module at this point. We added several predefined templates that are available with every Cyclops instance. You may select the preconfigured templates you wish to use from the dropdown menu under Module template. For this runthrough, app-template will be utilized.

cyclops

  • Nodes: It will show all the nodes that are currently running.

cyclops

  • Templates: Cyclops uses your Helm templates as a basis for rendering the New Module form. We have made a few charts that you may use in our public templates repository. An alternative is to make your Helm charts and utilize them as models.

cyclops

Now let's run my ToDo React Application using Cyclops-UI

Let's go step by step...

  • Defining a new module in Module section by clicking New Module
  • Enter Module template in the dropdown - app-template
  • Enter Module Name: As per your wish, I'm keeping as todo-react-app
  • Then Module defining part will updated and it has three sections as per the app-template General, Scaling, Networking

cyclops

  • In the General section, Enter the App image as rudhrabharathy/todo-clientside You can use your image and the Image version as alpine and enter Environment variables if any

cyclops

  • In the Networking section we will be defining that we need to create a Service for your application that will be a yes or no switch then the port value, in my case, I'm giving as 5173

cyclops

After that, the react application server pod will be run successfully...

cyclopsn

Then we can also check the pod logs in the Resource section.

cyclops

To get all the details about the pod can be shown in the terminal using the kubectl describe get <pod-name> in my case pod name is todo-react-app

To get the pod URL using Minikube:

minikube service todo-react-app

This is the ToDo React Application:

cyclops

I know this is very basic. I made this blog because I'm a newbie in this part, so it can be very useful for new bloomers, and I've also faced some problems running the minikube that I have addressed above. Thank you, Cyclops, for this wonderful developer-friendly application.👍

Top comments (0)