hhftechnology/dock-dploy repository overview

A web-based tool for building, managing, and converting Docker Compose files, configuration files, and schedulers.

⁠Table of Contents

• Features⁠
• Quick Start⁠
• Deployment Options⁠
• Usage Guide⁠
• Tech Stack⁠
• Contributing⁠
• License⁠

⁠Features

⁠Docker Compose Builder

Build and manage Docker Compose files with a powerful visual interface:

⁠Core Functionality

• Visual Service Builder - Create and configure Docker services with an intuitive UI
• Marketplace Integration - Browse and import popular self-hosted services from GitHub Marketplace⁠
• YAML Validation - Real-time validation and formatting of Compose files
• Live Preview - See YAML output as you build with CodeMirror editor

⁠Service Configuration

• Container Settings: Image, name, restart policies, user, working directory
• Networking: Ports (host/container mapping), expose, network modes, DNS, extra hosts
• Storage: Volumes (bind mounts & named volumes), tmpfs, devices
• Environment: Variables (array/dict syntax), env files
• Resources: CPU/memory limits and reservations, health checks
• Security: Privileged mode, capabilities (cap_add/cap_drop), security options, sysctls
• Advanced: Dependencies, labels, commands, entrypoints, ulimits, IPC/PID modes

⁠VPN Integration

Built-in support for containerized VPN solutions:

• Tailscale - Zero-config VPN with serve config support
• Newt - Lightweight VPN with Pangolin integration
• Cloudflared - Cloudflare Tunnel support
• WireGuard - Custom WireGuard configurations
• ZeroTier - Software-defined networking
• Netbird - Modern VPN alternative

Configure services to route through VPN containers with automatic network_mode settings.

⁠Network Management

• Create and configure Docker networks (bridge, host, overlay, macvlan)
• IPAM configuration (driver, subnet, gateway)
• Network driver options
• External network support
• Attachable and internal network flags

⁠Volume Management

• Named volumes with driver configurations
• Driver options (type, device, o flags)
• External volume support
• Volume labels

⁠Conversion Tools

Convert your Docker Compose files to various formats:

1. Docker Run Commands

   • Convert services to docker run equivalents
   • Automatically generates all flags and options
   • Perfect for debugging or manual deployment

2. Systemd Service Files

   • Generate systemd unit files for services
   • Auto-start containers with system boot
   • Service management with systemctl

3. .env Files

   • Extract environment variables to .env format
   • Optional: Clear environment variables from compose after extraction
   • Separate sensitive data from compose files

4. Redact Sensitive Data

   • Automatically redact passwords, secrets, tokens, and API keys
   • Safe sharing of compose files for troubleshooting
   • Pattern-based detection of sensitive values

5. Komodo .toml Configuration

   • Convert Docker Compose to Komodo deployment format
   • Supports Portainer stack imports
   • Environment variable extraction

⁠Config Builder

Generate configuration files for popular self-hosted applications:

⁠Homepage Dashboard (gethomepage.dev)

• Create services configuration YAML
• Define service name, description, icon, URL
• Organize with categories and tags
• Visual editor with live preview
• Copy or download generated config

⁠Custom Configurations

• Extensible system for additional config types
• YAML-based output
• Template system for common configurations

⁠Scheduler Builder

Create schedulers and automation tasks in multiple formats:

⁠Supported Formats

1. Cron Jobs

   • Traditional cron syntax
   • User and working directory support
   • Command scheduling with full flexibility

2. GitHub Actions

   • Automated workflow generation
   • Cron-based scheduling
   • Ready-to-use YAML workflow files

3. Systemd Timers

   • Modern alternative to cron
   • Service and timer unit files
   • OnCalendar syntax support
   • Persistent scheduling

⁠Features

• Visual cron expression builder
• Command testing and validation
• Description and metadata support
• Download or copy generated files
• Multi-format export

⁠Quick Start

⁠Prerequisites

• Node.js v18 or higher
• npm or yarn
• Optional: Docker (for containerized deployment)

⁠Local Development

1. Clone the repository

   git clone https://github.com/hhftechnology/Dock-Dploy.git
   cd Dock-Dploy
   

   Copy

2. Install dependencies

   npm install
   

   Copy

3. Start development server

   npm run dev
   

   Copy

4. Open in browser

   http://localhost:3000
   

   Copy

⁠Build for Production

npm run build

Preview the production build:

npm run serve

⁠Deployment Options

⁠Option 1: Docker Compose (Recommended)

Quick Deploy

# Clone the repository
git clone https://github.com/hhftechnology/Dock-Dploy.git
cd Dock-Dploy

# Deploy with Docker Compose
docker-compose up -d

Access at: http://localhost:3000

docker-compose.yml configuration:

services:
  dock-dploy:
    image: hhftechnology/dock-dploy:latest
    container_name: dock-dploy
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
    healthcheck:
      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:3000/"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s
    deploy:
      resources:
        limits:
          cpus: '1'
          memory: 512M
        reservations:
          cpus: '0.5'
          memory: 256M

Custom Port:

# Edit docker-compose.yml and change port mapping
ports:
  - "8080:3000"  # Access on port 8080

⁠Option 2: Docker (Standalone)

Using Pre-built Image (when available)

# Pull from Docker Hub
docker pull hhftechnology/dock-dploy:latest

# Run container
docker run -d \
  --name dock-dploy \
  --restart unless-stopped \
  -p 3000:3000 \
  -e NODE_ENV=production \
  hhftechnology/dock-dploy:latest

Build and Run Locally

# Build image
docker build -t dock-dploy .

# Run container
docker run -d \
  --name dock-dploy \
  --restart unless-stopped \
  -p 3000:3000 \
  -e NODE_ENV=production \
  dock-dploy

Container Management:

# View logs
docker logs dock-dploy

# Stop container
docker stop dock-dploy

# Start container
docker start dock-dploy

# Remove container
docker rm -f dock-dploy

⁠Option 3: Vercel (Serverless)

One-Click Deploy

Manual Deploy

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Configuration:

• The vercel.json is pre-configured for SPA routing
• Automatic HTTPS and CDN
• Global edge network deployment

⁠Option 4: Traditional Web Server

With Nginx

1. Build the project

   npm run build
   

   Copy

2. Copy dist folder to web root

   sudo cp -r dist/* /var/www/html/dock-dploy/
   

   Copy

3. Configure Nginx

   server {
       listen 80;
       server_name dock-dploy.yourdomain.com;
       root /var/www/html/dock-dploy;
       index index.html;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
           expires 1y;
           add_header Cache-Control "public, immutable";
       }
   }
   

   Copy

4. Reload Nginx

   sudo nginx -t
   sudo systemctl reload nginx
   

   Copy

With Apache

1. Build the project

   npm run build
   

   Copy

2. Copy dist folder

   sudo cp -r dist/* /var/www/html/dock-dploy/
   

   Copy

3. Create .htaccess

   <IfModule mod_rewrite.c>
       RewriteEngine On
       RewriteBase /dock-dploy/
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /dock-dploy/index.html [L]
   </IfModule>
   

   Copy

4. Enable mod_rewrite

   sudo a2enmod rewrite
   sudo systemctl restart apache2
   

   Copy

⁠Option 5: Static Hosting

Netlify

# Build
npm run build

# Drag and drop 'dist' folder to Netlify
# Or use Netlify CLI
npm install -g netlify-cli
netlify deploy --prod --dir=dist

GitHub Pages

# Build
npm run build

# Deploy to gh-pages branch
npx gh-pages -d dist

Cloudflare Pages

1. Connect your GitHub repository
2. Build command: npm run build
3. Output directory: dist
4. Deploy

⁠Usage Guide

⁠Docker Compose Builder

⁠Creating a New Compose File

1. Navigate to Docker Compose Builder from the sidebar
2. Add a Service:
   • Click "Add Service" button
   • Enter service name and image
   • Configure ports, volumes, environment variables
3. Browse Marketplace (optional):
   • Click "Browse Compose Marketplace"
   • Search for popular services (e.g., Nginx, PostgreSQL, Redis)
   • Click "Add All Services" to import
4. Configure Networks and Volumes as needed
5. Download YAML or copy to clipboard

⁠Using VPN Integration

1. Scroll to VPN Configuration section
2. Enable VPN toggle
3. Select VPN Type (Tailscale, WireGuard, etc.)
4. Configure VPN Settings:
   • For Tailscale: Auth key, hostname, routes
   • For WireGuard: Config path, interface
   • For others: Respective configuration options
5. Select Services to Route Through VPN
6. VPN service is automatically added to your compose file

⁠Converting to Other Formats

1. Build your compose file
2. Click "Utilities" dropdown in the YAML editor
3. Select conversion type:
   • Docker Run - Get docker run commands
   • Systemd Service - Generate unit files
   • .env File - Extract environment variables
   • Redact Sensitive Data - Safe sharing version
   • Komodo .toml - Komodo deployment format
4. Copy or Download the generated output

⁠Validation and Reformatting

• Validate YAML: Click "Validate YAML" button
• Reformat: Click "Reformat YAML" for consistent formatting
• Real-time syntax highlighting with CodeMirror

⁠Config Builder

⁠Creating Homepage Configuration

1. Navigate to Config Builder
2. Select "Homepage" config type
3. Add Services:
   • Name: Service display name
   • Description: Service description
   • Icon: Icon URL or icon name
   • URL: Service URL
   • Category (optional): Group services
   • Tags (optional): Service tags
4. Click "Add Item"
5. Download or Copy the generated YAML

⁠Scheduler Builder

⁠Creating a Cron Job

1. Navigate to Scheduler Builder
2. Select "Cron" type
3. Enter Details:
   • Name: Job identifier
   • Schedule: Cron expression (e.g., 0 */6 * * *)
   • Command: Command to execute
   • User: User to run as (default: root)
   • Working Dir: Path to execute from
4. Download or Copy the cron entry

⁠Creating GitHub Actions Workflow

1. Select "GitHub Actions" type
2. Configure:
   • Name: Workflow name
   • Schedule: Cron expression
   • Command: Steps to execute
3. Download .github/workflows/scheduled.yml

⁠Creating Systemd Timer

1. Select "Systemd Timer" type
2. Configure:
   • Name: Service name (e.g., backup)
   • Schedule: Cron or OnCalendar format
   • Command: Command to execute
   • User: Service user
   • Working Dir: Execution path
3. Download both .service and .timer files
4. Install:

   sudo cp *.service /etc/systemd/system/
   sudo cp *.timer /etc/systemd/system/
   sudo systemctl daemon-reload
   sudo systemctl enable --now backup.timer
   

   Copy

⁠Tech Stack

⁠Frontend

• React 19 - UI library
• TypeScript 5.7 - Type safety
• Vite 6 - Build tool and dev server
• TanStack Router - Type-safe routing
• Tailwind CSS 4 - Utility-first CSS
• Radix UI - Accessible component primitives
• Lucide React - Icon library

⁠Editor & Parsing

• CodeMirror - Code editor with YAML syntax highlighting
• js-yaml - YAML parsing and generation
• Zod 4 - Schema validation

⁠Testing

• Vitest - Unit testing framework
• Testing Library - React testing utilities

⁠Build & Deployment

• Vite - Lightning-fast builds
• TypeScript - Strict type checking
• Docker - Containerization
• Nginx - Production web server

⁠Contributing

Contributions are welcome! Here's how you can help:

⁠Reporting Bugs

1. Check existing issues
2. Create a new issue with:
   • Clear description
   • Steps to reproduce
   • Expected vs actual behavior
   • Screenshots (if applicable)

⁠Feature Requests

1. Open an issue with the enhancement label
2. Describe the feature and use case
3. Discuss implementation approach

⁠Pull Requests

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature
   

   Copy
3. Make your changes
4. Test thoroughly

   npm test
   npm run build
   

   Copy
5. Commit with descriptive messages

   git commit -m "Add amazing feature"
   

   Copy
6. Push to your fork

   git push origin feature/amazing-feature
   

   Copy
7. Open a Pull Request

⁠Development Guidelines

• Follow existing code style
• Add TypeScript types
• Update documentation
• Write tests for new features
• Keep commits focused and atomic

⁠Acknowledgments

• Marketplace Services - hhftechnology/Marketplace⁠
• Shadcn UI - Beautiful, accessible components
• Radix UI - Accessible component primitives
• TanStack - Type-safe routing
• Vite - Next generation frontend tooling

⁠Support

• Issues: GitHub Issues⁠
• Discussions: GitHub Discussions⁠

⁠Roadmap

• Multi-file compose project support
• Import from existing compose files
• Template library
• Docker Swarm support
• Kubernetes manifest generation
• Visual network diagram
• Service health monitoring
• Compose file diff viewer
• More config builder types
• Advanced VPN configurations

Made with ❤️ for the self-hosting community

⁠Star History

If you find this project useful, please consider giving it a star on GitHub!