|
| 1 | +--- |
| 2 | +title: "From Helm Chart to Developer UI in 5 Minutes" |
| 3 | +authors: [jurajk] |
| 4 | +--- |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +> *Helm is great…* |
| 9 | +> |
| 10 | +> *…until you give it to a developer.* |
| 11 | +
|
| 12 | +The fact is, Helm was made for people who understand Kubernetes. As a DevOps engineer, you can define complex deployments, manage environment-specific configs, and reuse logic with templating. Beautiful. |
| 13 | + |
| 14 | +But for most developers, Helm charts are just confusing. Helm assumes a certain level of Kubernetes fluency that many developers simply don’t have. And that’s okay. They should be focused on building and shipping products, not worry about the underlying infrastructure. |
| 15 | + |
| 16 | +This, however, causes friction since developers become overly reliant on DevOps engineers for every small change and deployment. |
| 17 | + |
| 18 | +Helm **is** great, just not as a user interface. |
| 19 | + |
| 20 | +But let’s fix that! In this post, I’ll show you how to turn *any* Helm chart into a simple UI that your devs (or even non-tech folks) can actually use. It won’t take longer than 5 minutes. |
| 21 | + |
| 22 | +Ready, set, go ⏳ |
| 23 | + |
| 24 | +## #1 Cyclops 👁️ |
| 25 | + |
| 26 | +[**Cyclops**](https://github.com/cyclops-ui/cyclops) is an **open-source tool** that allows you to build internal developer platforms from your Helm charts. Basically, **you import a Helm chart**, and **Cyclops spits out a UI** based on it. |
| 27 | + |
| 28 | +From there, developers can use this UI to configure, deploy and manage their applications running in a Kubernetes cluster. |
| 29 | + |
| 30 | +The setup is straightforward and just consists of two commands to get you started. You can find it on our webpage or the repository, but I’m also putting it here for easy access: |
| 31 | + |
| 32 | +```bash |
| 33 | +kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.18.2/install/cyclops-install.yaml && |
| 34 | +kubectl apply -f https://raw.githubusercontent.com/cyclops-ui/cyclops/v0.18.2/install/demo-templates.yaml |
| 35 | +``` |
| 36 | + |
| 37 | +To access the cyclops-ui you can just port-forward its service, but for production usage you can expose it via an ingress or a load balancer. |
| 38 | + |
| 39 | +```bash |
| 40 | +kubectl port-forward svc/cyclops-ui -n cyclops 3000:3000 |
| 41 | +``` |
| 42 | + |
| 43 | +You can now access Cyclops at http://localhost:3000/. |
| 44 | + |
| 45 | +> *While you are at our repo, consider supporting us with a star!* |
| 46 | +> |
| 47 | +> ⭐ [***Star Cyclops on GitHub***](https://github.com/cyclops-ui/cyclops) ⭐ |
| 48 | +
|
| 49 | +## #2 Grab your Helm chart 🗃️ |
| 50 | + |
| 51 | +You probably have some Helm charts lying around; they will do just fine. If not, [**you can use mine**](https://github.com/KaradzaJuraj/helm-to-idp)! I created a chart using the `helm create` command and haven’t made any changes to it **yet**. |
| 52 | + |
| 53 | +Let’s take a moment and get a closer look at the chart. It consists of 5 resources: a deployment, a service, a service account, an ingress, and a horizontal pod autoscaler. The HPA and ingress are disabled by default, but you can turn them on in the `values.yaml`. |
| 54 | + |
| 55 | +The values file is pretty small here, but, even though this is just the “default” Helm chart, it is enough to turn away most developers. |
| 56 | + |
| 57 | +```bash |
| 58 | +my-chart/ |
| 59 | +├── Chart.yaml # Metadata about the chart (name, version, etc.) |
| 60 | +├── values.yaml # Default configuration values |
| 61 | +├── **values.schema.json** # Generated from the values.yaml |
| 62 | +├── templates/ |
| 63 | +│ ├── deployment.yaml |
| 64 | +│ ├── hpa.yaml # Off in default values |
| 65 | +│ ├── serviceaccount.yaml. |
| 66 | +│ ├── service.yaml |
| 67 | +│ ├── ingress.yaml # Off in default values |
| 68 | +└── .helmignore |
| 69 | +``` |
| 70 | + |
| 71 | +I will be using and playing around with this chart, but you can do the same with any of your existing charts. |
| 72 | + |
| 73 | +I’m going to **add one more thing to the chart** - [**a schema file**](https://helm.sh/docs/topics/charts/#schema-files). While my Helm chart did not come with a schema file, your chart may already have it (you can see it in the structure above as the `values.schema.json`). I [**autogenerated mine**](https://cyclops-ui.com/docs/templates/#generating-helm-chart-schema) and removed the excess lines I didn’t need. You can see the final version [here](https://github.com/KaradzaJuraj/helm-to-idp/blob/add-schema/my-chart/values.schema.json). |
| 74 | + |
| 75 | +## #3 Magic 🧚 |
| 76 | + |
| 77 | +Now comes the fun part. |
| 78 | + |
| 79 | +If you have Cyclops set up, open it up in your browser. You will be greeted by the empty Modules screen, but we should first go to the **Templates tab.** |
| 80 | + |
| 81 | +Out of the box, Cyclops comes with a bunch of templates to help you get started, but let’s add our own so that we can play around with it. |
| 82 | + |
| 83 | +Click the `Add template reference` button and input the fields so it points to your Helm chart. |
| 84 | + |
| 85 | +> ⚠️ *If you are using a Helm chart that is stored in a private repository, you can find here* [*how to enable access*](https://cyclops-ui.com/docs/templates/private_templates) ⚠️ |
| 86 | +> |
| 87 | +
|
| 88 | + |
| 89 | + |
| 90 | +After you have added your chart, go back to the **modules tab**. It is still an empty screen, but let’s use our new template to deploy a module! |
| 91 | + |
| 92 | +The first step of deploying a module is choosing a template. In the dropdown, find the template that you imported and click on it. Remember the **`value.schema.json` from before**? That’s precisely what Cyclops uses to render the UIs. |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | +As you can see, the fields here correlate with the fields defined in the `value.schema.json`. Changing the schema in the Helm chart, for example [removing a couple of fields like here](https://github.com/KaradzaJuraj/helm-to-idp/blob/edited-schema/my-chart/values.schema.json), will result in a different UI as well. |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | +Cyclops is not just a pretty UI for your Helm charts, though. Once you fill in the form your template renders, you can deploy it as a module! Cyclops can either deploy it directly to your cluster or, if you are more of a GitOps enjoyer, [push the configuration to git](https://cyclops-ui.com/docs/installation/git-write). The end goal is the same: you will have deployed your Helm chart to the cluster using the values provided in the UI. |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | +From here, a developer can easily access everything they might need: restarting their applications, accessing their logs, checking their status, editing the configuration, and much more… |
| 105 | + |
| 106 | +## You’re a Platform Engineer, Harry 🧙♂️ |
| 107 | + |
| 108 | +While the Helm chart might have been a turn-off for most developers, a simple UI will be far better received. By abstracting away the complexity of Kubernetes and surfacing only the relevant configuration options through a UI, you’ve enabled a safer, faster, and more autonomous workflow for developers. |
| 109 | + |
| 110 | +No more back-and-forth with DevOps for routine changes. No more context-switching to learn Helm. Instead, developers get a streamlined, focused experience that lets them ship their code with confidence. This is the core idea behind **Platform Engineering**: providing a standardized, self-service infrastructure that empowers development teams. |
| 111 | + |
| 112 | +If you want to learn more about platform engineering and building internal developer platforms, join our [Discord community](https://discord.com/invite/8ErnK3qDb3) and come talk to us! |
| 113 | + |
| 114 | +> ⭐ [***Star Cyclops on GitHub***](https://github.com/cyclops-ui/cyclops) ⭐ |
0 commit comments