A web-based tool for building, managing, and converting Docker Compose files, configuration files, and schedulers.
[](https://hub.docker.com/r/hhftechnology/dock-dploy)
[](https://discord.gg/HDCt9MjyMJ)
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://vitejs.dev/)
## Table of Contents
- [Features](#-features)
- [Quick Start](#-quick-start)
- [Deployment Options](#-deployment-options)
- [Usage Guide](#-usage-guide)
- [Tech Stack](#-tech-stack)
- [Contributing](#-contributing)
- [License](#-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](https://github.com/hhftechnology/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**
```bash
git clone https://github.com/hhftechnology/Dock-Dploy.git
cd Dock-Dploy
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
4. **Open in browser**
```
http://localhost:3000
```
### Build for Production
```bash
npm run build
```
Preview the production build:
```bash
npm run serve
```
---
## Deployment Options
### Option 1: Docker Compose (Recommended)
**Quick Deploy**
```bash
# 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:**
```yaml
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:**
```bash
# 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)
```bash
# 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**
```bash
# 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:**
```bash
# 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**
[](https://vercel.com/new/clone?repository-url=https://github.com/hhftechnology/Dock-Dploy)
**Manual Deploy**
```bash
# 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**
```bash
npm run build
```
2. **Copy dist folder to web root**
```bash
sudo cp -r dist/* /var/www/html/dock-dploy/
```
3. **Configure Nginx**
```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";
}
}
```
4. **Reload Nginx**
```bash
sudo nginx -t
sudo systemctl reload nginx
```
**With Apache**
1. **Build the project**
```bash
npm run build
```
2. **Copy dist folder**
```bash
sudo cp -r dist/* /var/www/html/dock-dploy/
```
3. **Create .htaccess**
```apache
RewriteEngine On
RewriteBase /dock-dploy/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /dock-dploy/index.html [L]
```
4. **Enable mod_rewrite**
```bash
sudo a2enmod rewrite
sudo systemctl restart apache2
```
---
### Option 5: Static Hosting
**Netlify**
```bash
# 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**
```bash
# 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:**
```bash
sudo cp *.service /etc/systemd/system/
sudo cp *.timer /etc/systemd/system/
sudo systemctl daemon-reload
sudo systemctl enable --now backup.timer
```
---
## 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**
```bash
git checkout -b feature/amazing-feature
```
3. **Make your changes**
4. **Test thoroughly**
```bash
npm test
npm run build
```
5. **Commit with descriptive messages**
```bash
git commit -m "Add amazing feature"
```
6. **Push to your fork**
```bash
git push origin feature/amazing-feature
```
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](https://github.com/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](https://github.com/hhftechnology/Dock-Dploy/issues)
- **Discussions**: [GitHub Discussions](https://github.com/hhftechnology/Dock-Dploy/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!