Create Custom Templates in Monokle
Tags: devops, kubernetes, beginners
Published: 2022-02-20 15:36:42

## What is Kubernetes? ☸ 
👉🏻 Kubernetes, often abbreviated as K8s, is a popular open-source tool for modern infrastructure automation. It is used to deploy, scale, and manage containerized applications in an distributed system. 

For More info: https://kubernetes.io/docs/home/

## What is Monokle? :speech_balloon:
👉🏻 Monokle helps you to:

- Quickly get a high-level view of your manifests, their contained resources and relationships.
- Easily edit resources without having to learn or look up yaml syntax.
- Refactor resources with maintained integrity of names and references.
- Preview and debug resources generated with Kustomize or Helm.
- Diff resources against your cluster and apply changes immediately.
- Visualize and navigate resources in your clusters.

For More Info: https://kubeshop.github.io/monokle/

:cyclone: **Let's explore how we can use Monokle for writing templates for a Kubernetes Service**

## What are Monokle Templates? :speech_balloon:
👉🏻 A Monokle Template is a mechanism for creating visual forms and interpolating the data from those forms into one or multiple manifests.

For each form, we must define the JSON schema of the data to use as an input and a UI-schema for customizing the visuals of the forms (for example, specifying which widgets should be used).

For More info: https://kubeshop.github.io/monokle/templates/

## Prerequisites:
- Any Code Editor (I am using VSCode)
- Monokle : [Download](https://monokle.kubeshop.io/)

:cyclone: **Let's Start**

👉🏻 **Step 1:** Create a `package.json` file

```
{
	"name": "Templates plugin",
	"description": "Custom templates plugin",
	"version": "1.0.0",
	"author": "Hitesh Kowdiki",
	"repository": "https://github.com/kkhitesh/monokle-templates-plugin",
	"monoklePlugin": {
		"id": "com.github.kkhitesh.plugin.templates",
		"helpUrl": "https://github.com/kkhitesh/monokle-templates-plugin",
		"modules": [{
			"type": "template",
			"path": "basic-pod-template"
		}]
	}
}
```
:cyclone: In this `path` specifies where we have the template, basic-pod-template

👉🏻 **Step 2: ** Create a folder name `basic-pod-template` and add following content:

**1. Create `monokle-template.json` and add the following:**

```
{
  "name": "Basic Kubernetes Pod",
  "id": "com.github.kkhitesh.plugin.templates.basic-pod-template",
  "author": "Hitesh Kowdiki",
  "version": "1.0.0",
  "description": "Creates a Pod for a specified Image",
  "repository": "",
  "type": "vanilla",
  "forms": [
    {
      "name": "Pod Settings",
      "description": "Specify the settings for your Pod",
      "schema": "form-schema.json",
      "uiSchema": "form-ui-schema.json"
    }
  ],
  "manifests": [
    {
      "filePath": "template.yaml"
    }
  ],
  "resultMessage": "Pod resource created successfully!",
  "helpUrl": "https://github.com/kkhitesh/monokle-templates-plugin"
}
```

**2. Create `form-schema.json` and add the following:**

```
{
  "type": "object",
  "required": [
    "name",
    "image"
  ],
  "properties": {
    "name": {
      "type": "string",
      "default": "my-pod"
    },
    "namespace": {
      "type": "string"
    },
    "image": {
      "type": "string"
    }
  }
}
```

**3. Create `form-ui-schema.json` and add the following:**

```
{
  "name": {
    "ui:title": "Name",
    "ui:help": "The name of the Pod"
  },
  "namespace": {
    "ui:title": "Namespace",
    "ui:help": "The target namespace for the Pod",
    "ui:widget": "namespaceSelection"
  },
  "image": {
    "ui:title": "Image",
    "ui:help": "The image name to use for the Pod, for example nginx-ingress:latest"
  }
}
```

**4. Create `template.yaml` and add the following:**

```
apiVersion: v1
kind: Pod
metadata:
  name: [[forms[0].name]]
[[ forms[0].namespace ? "  namespace: " + forms[0].namespace + "\n" : ""]]
spec:
  containers:
    - image: [[forms[0].image]]
      name: [[forms[0].name]]
      resources: {}
```

:cyclone: **Push the code to GitHub**: https://github.com/kkhitesh/monokle-templates-plugin

Time to use our custom-template

👉🏻 **Step 1:** Run Monokle
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9ga45auwx24n1mml93b.png)

👉🏻 **Step 2:** Install Plugin
There is a plugin button at top right corner
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kefeet4diroyvvivvp3g.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxp696fghrskkjabhlbw.png)

:cyclone: _Click Install a Plugin and add GitHub URL_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzaydmab2d8s2iv5sd9m.png)
 
👉🏻 **Step 3:** From Dashboard Create a Project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osrhp5eajs0qxyzpbgd3.png)

:cyclone: _Select a Template_ 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umhw54bck39kr7s8v0fn.png)

:cyclone: Create Project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyleku9qksrhi14fj8tf.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldmrvhkalakrn5mk5zs2.png)
   
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svj7xy7cexrtokfltqxa.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1jwel7bae3kbp9fuzer.png)
 
**We have Successfully created our Custom Template 🥳🥳**

_Thanks For Reading_ 🙌🏻🙌🏻

:rocket: Connect With Me:
- [LinkedIn](https://www.linkedin.com/in/hitesh-kowdiki/)
- [Twitter](https://twitter.com/HiteshKowdiki)
- [Github](https://github.com/kkhitesht)