Topics

#containers #devops #kubernetes #kubernetes-deployment #yaml #yaml-processor

Language breakdown

No language data available.

▸ Files click to expand

README

Kube Composer

A modern, intuitive Kubernetes YAML generator that simplifies deployment configuration for developers and DevOps teams.

🌐 Live Demo

🔗 Try Kube Composer Now

Generate your first Kubernetes deployment in under 2 minutes!

🐳 Quick Start with Docker

Run Kube Composer locally in seconds:

docker pull same7ammar/kube-composer && docker run -d -p 8080:80 same7ammar/kube-composer

Then open http://localhost:8080 in your browser.

🚀 Features

🎨 Visual Deployment Editor

Multi-Container Support - Configure multiple containers per deployment
Advanced Container Configuration - Resources, environment variables, volume mounts
Real-time Validation - Built-in configuration validation and error checking
Interactive Forms - Intuitive interface for complex Kubernetes configurations

📦 Comprehensive Resource Management

Deployments - Full deployment configuration with replica management
Services - ClusterIP, NodePort, and LoadBalancer service types
Ingress - Complete ingress configuration with TLS support
Namespaces - Custom namespace creation and management
ConfigMaps - Configuration data storage and management
Secrets - Secure storage for sensitive data (Opaque, TLS, Docker Config)
Volumes - EmptyDir, ConfigMap, and Secret volume types

🌐 Advanced Networking

Ingress Controllers - Support for multiple ingress classes
TLS/SSL Configuration - Automatic HTTPS setup with certificate management
Traffic Flow Visualization - Visual representation of request routing
Port Mapping - Flexible port configuration and service discovery

⚡ Real-time Features

Live YAML Generation - See your YAML output update as you configure
Architecture Visualization - Interactive diagrams showing resource relationships
Traffic Flow Diagrams - Visual representation of request routing from Ingress to Pods
Multi-Deployment Support - Manage multiple applications in a single project

🔧 Advanced Configuration

Environment Variables - Support for direct values, ConfigMap refs, and Secret refs
Resource Limits - CPU and memory requests/limits configuration
Volume Mounts - Flexible volume mounting with multiple volume types
Labels & Annotations - Custom metadata for all resources
Health Checks - Built-in configuration validation

📱 User Experience

Mobile Responsive - Works perfectly on all devices
No Registration Required - Start using immediately, no sign-up needed
Export & Download - Production-ready YAML files
Social Sharing - Share your configurations with the community

🎯 Perfect For

Developers learning Kubernetes and container orchestration
DevOps Engineers creating quick deployments and testing configurations
Platform Engineers standardizing deployment configurations across teams
Students understanding Kubernetes concepts and resource relationships
Teams collaborating on infrastructure as code
Anyone who wants to avoid writing YAML manually

🛠️ Supported Kubernetes Resources

Core Workloads

✅ Deployments - Application deployment and replica management
✅ Services - Network access and service discovery
✅ Ingress - External access and traffic routing

Configuration & Storage

✅ ConfigMaps - Configuration data management
✅ Secrets - Sensitive data storage (Opaque, TLS, Docker Config)
✅ Volumes - Persistent and ephemeral storage
✅ Namespaces - Resource organization and isolation

Advanced Features

✅ Multi-Container Pods - Sidecar patterns and complex applications
✅ Environment Variables - Direct values and resource references
✅ Resource Quotas - CPU and memory limits/requests
✅ TLS Termination - HTTPS and certificate management
✅ Ingress Rules - Path-based and host-based routing

🚀 Local Development

Prerequisites

Node.js 18+
npm or yarn

Installation

Clone the repository:

git clone https://github.com/same7ammar/kube-composer.git
cd kube-composer

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser:

Visit http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

🚀 Deployment

Automatic GitHub Pages Deployment

This project is configured for automatic deployment to GitHub Pages:

Push to main branch - GitHub Actions automatically builds and deploys
Live at: https://same7ammar.github.io/kube-composer/
Custom domain: https://kube-composer.com

Manual Deployment

npm run deploy

📁 Project Structure

src/
├── components/          # React components
│   ├── ArchitecturePreview.tsx    # Visual architecture with traffic flow
│   ├── DeploymentForm.tsx         # Multi-container deployment configuration
│   ├── DeploymentsList.tsx        # Deployment management interface
│   ├── NamespaceManager.tsx       # Namespace creation and management
│   ├── ConfigMapManager.tsx       # ConfigMap creation and management
│   ├── SecretManager.tsx          # Secret creation and management
│   ├── YamlPreview.tsx           # Syntax-highlighted YAML output
│   ├── ResourceSummary.tsx        # Resource overview and validation
│   ├── Footer.tsx                 # Enhanced footer with resources
│   ├── SocialShare.tsx            # Social media sharing
│   └── SEOHead.tsx               # SEO optimization
├── hooks/              # Custom React hooks
│   └── useUsageCounter.ts        # Usage statistics tracking
├── types/              # TypeScript definitions
│   └── index.ts                  # Comprehensive type definitions
├── utils/              # Utility functions
│   └── yamlGenerator.ts          # Advanced YAML generation logic
├── App.tsx             # Main application with tabbed interface
├── main.tsx           # Entry point
└── index.css          # Global styles with Tailwind CSS

🔧 Configuration Examples

Multi-Container Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  namespace: production
spec:
  replicas: 3
  template:
    spec:
      containers:
      - name: web-server
        image: nginx:1.21
        ports:
        - containerPort: 80
        env:
        - name: DATABASE_URL
          valueFrom:
            secretKeyRef:
              name: db-credentials
              key: url
      - name: sidecar-proxy
        image: envoyproxy/envoy:v1.20
        ports:
        - containerPort: 8080

Ingress with TLS

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: web-app-ingress
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  ingressClassName: nginx
  tls:
  - hosts:
    - example.com
    secretName: tls-secret
  rules:
  - host: example.com
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: web-app-service
            port:
              number: 80

ConfigMap and Secret Integration

apiVersion: v1
kind: ConfigMap
metadata:
  name: app-config
data:
  database.host: "localhost"
  database.port: "5432"

apiVersion: v1
kind: Secret
metadata:
  name: app-secrets
type: Opaque
data:
  database.password: <base64-encoded>
  api.key: <base64-encoded>

🤝 Contributing

We welcome contributions! Here's how:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow existing code style and TypeScript patterns
Add tests for new features and components
Update documentation for new Kubernetes resources
Ensure responsive design across all devices
Test YAML generation for various configurations
Validate Kubernetes resource compatibility

🔍 Keywords

kubernetes yaml generator deployment docker containers devops k8s kubernetes deployment yaml editor kubernetes tools free kubernetes tool visual editor deployment generator ingress configmap secrets namespaces multi-container microservices

🌟 What's New

Latest Features (v2.0)

✨ Multi-Container Support - Configure complex pod specifications
🌐 Advanced Ingress - Complete ingress configuration with TLS
🗂️ Namespace Management - Create and organize custom namespaces
🔧 ConfigMap & Secret Management - Centralized configuration storage
📊 Traffic Flow Visualization - See how requests flow through your architecture
🔗 Environment Variable References - Link to ConfigMaps and Secrets
📱 Enhanced Mobile Experience - Improved responsive design
🎨 Visual Architecture Diagrams - Interactive resource visualization