mirror of
https://github.com/Dokploy/website.git
synced 2026-06-15 20:25:25 +02:00
feat: add comparison pages for CapRover and Dokku
- Introduced new comparison pages for Dokploy vs. CapRover and Dokploy vs. Dokku, highlighting key features, deployment processes, and user experiences. - Updated the footer and header components to include links to the new comparison pages, improving site navigation and user access to alternative options.
This commit is contained in:
Mauricio Siu
169
apps/website/app/comparison/page.tsx
Normal file
169
apps/website/app/comparison/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import { Container } from "@/components/Container";
|
||||
import { CallToAction } from "@/components/CallToAction";
|
||||
import { Testimonials } from "@/components/Testimonials";
|
||||
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, GitBranch, Activity, Users, Gauge } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Dokploy Vs. and PaaS Comparison Pages | Dokploy",
|
||||
description:
|
||||
"How does Dokploy compare to other application deployment, database management, and PaaS solutions? Learn on our \"Dokploy vs.\" alternative comparison pages.",
|
||||
};
|
||||
|
||||
const competitors = [
|
||||
{
|
||||
name: "Coolify",
|
||||
href: "/dokploy-vs-coolify",
|
||||
description:
|
||||
"See how Dokploy's polished UI, monitoring, and automation compare to Coolify's indie-dev approach.",
|
||||
},
|
||||
{
|
||||
name: "Portainer",
|
||||
href: "/dokploy-vs-portainer",
|
||||
description:
|
||||
"Compare Dokploy's full deployment platform against Portainer's container management focus.",
|
||||
},
|
||||
{
|
||||
name: "CapRover",
|
||||
href: "/dokploy-vs-caprover",
|
||||
description:
|
||||
"Discover why teams choose Dokploy over CapRover for monitoring, backups, and team collaboration.",
|
||||
},
|
||||
{
|
||||
name: "Dokku",
|
||||
href: "/dokploy-vs-dokku",
|
||||
description:
|
||||
"See how Dokploy's visual dashboard and built-in tooling compare to Dokku's CLI-first workflow.",
|
||||
},
|
||||
];
|
||||
|
||||
const whyDokploy = [
|
||||
{
|
||||
icon: GitBranch,
|
||||
title: "Deploy straight from your repo",
|
||||
description:
|
||||
"Dokploy is built for actual application deployment, not just container management. You connect your repo, push code, and Dokploy handles builds, containers, routing, and SSL without the extra scripts or side tools you end up stitching together elsewhere.",
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Monitor and back up by default",
|
||||
description:
|
||||
"Dokploy gives you real-time metrics, alerts, and scheduled S3-compatible backups in the same product from day one. That means less setup, fewer moving parts, and a much shorter path from learning that something's wrong to fixing the problem.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Scale across teams and servers",
|
||||
description:
|
||||
"Dokploy fits the way teams actually work once a project stops being a solo side build. With multi-user support, RBAC, project grouping, and multi-server deployments, it gives you room to grow without forcing a platform switch later.",
|
||||
},
|
||||
{
|
||||
icon: Gauge,
|
||||
title: "Move faster in a polished UI",
|
||||
description:
|
||||
"Dokploy keeps the workflow clean, responsive, and predictable, which has a big impact when you're deploying often. It also combines lightweight resource usage with a more refined interface, so you get less friction in the day-to-day and less overhead on the server side.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function ComparisonPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<AnimatedGridPattern
|
||||
numSquares={30}
|
||||
maxOpacity={0.1}
|
||||
height={40}
|
||||
width={40}
|
||||
duration={3}
|
||||
repeatDelay={1}
|
||||
className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)] absolute inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
|
||||
/>
|
||||
<Container className="relative z-10">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
|
||||
Dokploy vs.
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
Read our comparison pages to discover why so many people are
|
||||
choosing Dokploy.
|
||||
</p>
|
||||
|
||||
<Button className="mt-10 rounded-full" asChild>
|
||||
<Link
|
||||
href="https://app.dokploy.com/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Competitor comparison cards */}
|
||||
<section className="border-b border-border/30 py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto grid max-w-5xl gap-6 sm:grid-cols-2">
|
||||
{competitors.map((competitor) => (
|
||||
<Link
|
||||
key={competitor.name}
|
||||
href={competitor.href}
|
||||
className="group rounded-xl border border-border/50 bg-card p-8 transition hover:border-border hover:bg-muted/30"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-white">
|
||||
Dokploy vs. {competitor.name}
|
||||
</h2>
|
||||
<ArrowRight className="h-5 w-5 text-muted-foreground transition-transform group-hover:translate-x-1" />
|
||||
</div>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
{competitor.description}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Why Dokploy is the best PaaS solution */}
|
||||
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Why Dokploy is the best PaaS solution for scaling teams
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 grid max-w-6xl gap-8 sm:grid-cols-2">
|
||||
{whyDokploy.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="group rounded-2xl border border-border/30 bg-gradient-to-b from-gray-900/50 to-black p-8 transition hover:border-border/60"
|
||||
>
|
||||
<div className="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 transition group-hover:bg-primary/20">
|
||||
<item.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-semibold text-white">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="leading-relaxed text-muted-foreground">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* Final CTA */}
|
||||
<CallToAction />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
356
apps/website/app/dokploy-vs-caprover/page.tsx
Normal file
356
apps/website/app/dokploy-vs-caprover/page.tsx
Normal file
@@ -0,0 +1,356 @@
|
||||
import { Container } from "@/components/Container";
|
||||
import { CallToAction } from "@/components/CallToAction";
|
||||
import { Testimonials } from "@/components/Testimonials";
|
||||
import { ComparisonStats } from "@/components/comparison-stats";
|
||||
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
|
||||
import { Check, X, Zap, Bell, Users, LayoutDashboard } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Dokploy vs. CapRover Comparison | Dokploy",
|
||||
description:
|
||||
"Dokploy vs. CapRover: Compare self-hosted PaaS platforms for app deployment, database management, monitoring, and team collaboration.",
|
||||
};
|
||||
|
||||
type FeatureValue = boolean | "limited";
|
||||
|
||||
interface FeatureRow {
|
||||
feature: string;
|
||||
dokploy: FeatureValue;
|
||||
caprover: FeatureValue;
|
||||
section?: string;
|
||||
}
|
||||
|
||||
const featureComparisonRows: FeatureRow[] = [
|
||||
// Setup & Installation
|
||||
{ feature: "One-command installation", dokploy: true, caprover: true, section: "Setup & Installation" },
|
||||
{ feature: "Installation feedback and progress logs", dokploy: true, caprover: false },
|
||||
{ feature: "Works with firewall and TailScale out of the box", dokploy: true, caprover: false },
|
||||
{ feature: "Lightweight CPU usage while idle", dokploy: true, caprover: false },
|
||||
{ feature: "Built with Next.js / TypeScript", dokploy: true, caprover: false },
|
||||
// Deployment
|
||||
{ feature: "Deploy from GitHub, GitLab, Bitbucket", dokploy: true, caprover: "limited", section: "Deployment" },
|
||||
{ feature: "Auto-deploy on git push", dokploy: true, caprover: true },
|
||||
{ feature: "Docker Compose support", dokploy: true, caprover: "limited" },
|
||||
{ feature: "Deploy from custom Docker images", dokploy: true, caprover: true },
|
||||
{ feature: "Nixpacks and Buildpack support", dokploy: true, caprover: false },
|
||||
{ feature: "Preview deployments (review apps)", dokploy: true, caprover: false },
|
||||
{ feature: "One-click app templates", dokploy: true, caprover: true },
|
||||
// Networking & Domains
|
||||
{ feature: "Built-in reverse proxy (Dokploy: Traefik, CapRover: Nginx)", dokploy: true, caprover: true, section: "Networking & Domains" },
|
||||
{ feature: "Automatic SSL via Let's Encrypt", dokploy: true, caprover: true },
|
||||
{ feature: "Custom domain management", dokploy: true, caprover: true },
|
||||
// Infrastructure
|
||||
{ feature: "Multi-server deployment", dokploy: true, caprover: "limited", section: "Infrastructure" },
|
||||
{ feature: "Docker Swarm clustering", dokploy: true, caprover: true },
|
||||
{ feature: "Scheduled database backups (S3)", dokploy: true, caprover: false },
|
||||
{ feature: "Back up arbitrary Docker volumes", dokploy: true, caprover: false },
|
||||
// Monitoring & Alerts
|
||||
{ feature: "Real-time monitoring (CPU, RAM, disk)", dokploy: true, caprover: false, section: "Monitoring & Alerts" },
|
||||
{ feature: "Metrics enabled by default", dokploy: true, caprover: false },
|
||||
{ feature: "Automated alerts from metrics", dokploy: true, caprover: false },
|
||||
// Teams & Access
|
||||
{ feature: "Teams and multi-user support", dokploy: true, caprover: false, section: "Teams & Access" },
|
||||
{ feature: "Role-based access control (RBAC)", dokploy: true, caprover: false },
|
||||
{ feature: "Projects grouping", dokploy: true, caprover: false },
|
||||
{ feature: "API and CLI access", dokploy: true, caprover: true },
|
||||
{ feature: "AI-assisted deployments", dokploy: true, caprover: false },
|
||||
];
|
||||
|
||||
const whyChooseItems = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Go beyond simple app hosting",
|
||||
description:
|
||||
"CapRover is great for getting a single app online fast, but Dokploy handles the full deployment lifecycle. From git-connected builds with Nixpacks and Buildpacks to Docker Compose orchestration, preview deployments, and multi-server scaling—Dokploy grows with your project instead of hitting a ceiling.",
|
||||
image: {
|
||||
src: "/images/dokploy-deployment-log.png",
|
||||
alt: "Dokploy deployment panel showing build and deployment logs",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: "Monitor, alert, and back up without plugins",
|
||||
description:
|
||||
"CapRover doesn't include built-in monitoring or backup tools—you'd need to bolt on Prometheus, Grafana, or custom scripts. Dokploy ships with real-time CPU, memory, and disk metrics, automated alerting, and scheduled S3-compatible backups for databases and volumes, all in one dashboard.",
|
||||
image: {
|
||||
src: "/images/dokploy-monitoring-dashboard.png",
|
||||
alt: "Dokploy monitoring dashboard showing CPU, memory, disk and I/O metrics",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Collaborate with your team from day one",
|
||||
description:
|
||||
"CapRover is designed for single-user setups with no built-in team management, RBAC, or project organization. Dokploy supports multiple users, role-based permissions, and project grouping out of the box—making it ready for teams and agencies, not just solo side projects.",
|
||||
image: {
|
||||
src: "/images/dokploy-projects-dashboard.png",
|
||||
alt: "Dokploy projects dashboard with services grid and environment selector",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: LayoutDashboard,
|
||||
title: "Work in a modern, polished interface",
|
||||
description:
|
||||
"Dokploy's UI is built with Next.js and TypeScript, offering a fast, consistent experience with predictable workflows. CapRover's captain dashboard is functional but dated, and many operations require CLI commands or manual configuration. Dokploy keeps everything accessible in the browser.",
|
||||
image: {
|
||||
src: "/images/dokploy-provider-settings.png",
|
||||
alt: "Dokploy deploy settings with provider and domain configuration",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const integrationRows = [
|
||||
{
|
||||
category: "Git providers",
|
||||
dokploy: "GitHub, GitLab, Bitbucket, Gitea, Git Generic",
|
||||
caprover: "GitHub (via webhook), custom Git",
|
||||
},
|
||||
{
|
||||
category: "Build and deployment systems",
|
||||
dokploy: "Docker, Docker Compose, Nixpacks, Heroku Buildpacks, Paketo Buildpacks, Railpack",
|
||||
caprover: "Docker, Captain Definition file",
|
||||
},
|
||||
{
|
||||
category: "Notifications and communication",
|
||||
dokploy: "Slack, Telegram, Discord, Lark, Email (SMTP), Resend, Gotify, Ntfy, Pushover, Webhook",
|
||||
caprover: "None built-in",
|
||||
},
|
||||
];
|
||||
|
||||
function FeatureCell({ value }: { value: FeatureValue }) {
|
||||
if (value === true) return <Check className="mx-auto h-5 w-5 text-green-500" />;
|
||||
if (value === "limited") return <span className="text-xs text-amber-500">Limited</span>;
|
||||
return <X className="mx-auto h-5 w-5 text-muted-foreground/50" />;
|
||||
}
|
||||
|
||||
export default function DokployVsCapRoverPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<AnimatedGridPattern
|
||||
numSquares={30}
|
||||
maxOpacity={0.1}
|
||||
height={40}
|
||||
width={40}
|
||||
duration={3}
|
||||
repeatDelay={1}
|
||||
className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)] absolute inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
|
||||
/>
|
||||
<Container className="relative z-10">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
|
||||
Dokploy vs. CapRover
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
Both platforms let you self-host applications on your own server.
|
||||
But they take very different approaches to deployment, monitoring,
|
||||
and team workflows—here's how they compare.
|
||||
</p>
|
||||
|
||||
<div className="mt-16 grid gap-8 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
|
||||
<h3 className="text-xl font-semibold text-white">Dokploy</h3>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
For teams that want a modern, polished deployment platform
|
||||
with built-in monitoring, automated backups, multi-server
|
||||
support, and a clean UI designed for productivity—choose
|
||||
Dokploy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
|
||||
<h3 className="text-xl font-semibold text-white">CapRover</h3>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
For solo developers who want a simple, Heroku-like PaaS with
|
||||
one-click apps and a straightforward captain dashboard
|
||||
that's easy to get started with—choose CapRover.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="mt-10 rounded-full" asChild>
|
||||
<Link
|
||||
href="https://app.dokploy.com/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Get started with Dokploy
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Dokploy vs CapRover at a glance */}
|
||||
<section className="border-b border-border/30 py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
|
||||
Dokploy vs. CapRover at a glance
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Read our comprehensive Dokploy vs. CapRover comparison before you
|
||||
make your decision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-12 max-w-5xl overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-4 text-left font-semibold">Feature</th>
|
||||
<th className="px-4 py-4 text-center font-semibold">Dokploy</th>
|
||||
<th className="px-4 py-4 text-center font-semibold">CapRover</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{featureComparisonRows.map((row) => (
|
||||
<>
|
||||
{row.section && (
|
||||
<tr key={`section-${row.section}`} className="border-b border-border bg-muted/20">
|
||||
<td
|
||||
colSpan={3}
|
||||
className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{row.section}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr
|
||||
key={row.feature}
|
||||
className="border-b border-border/50 hover:bg-muted/30"
|
||||
>
|
||||
<td className="px-4 py-3 text-sm">{row.feature}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<FeatureCell value={row.dokploy} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<FeatureCell value={row.caprover} />
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Why you should go with Dokploy */}
|
||||
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Why you should go with Dokploy
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 max-w-6xl space-y-20">
|
||||
{whyChooseItems.map((item, index) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className={`flex flex-col gap-8 md:flex-row md:items-center ${
|
||||
index % 2 === 1 ? "md:flex-row-reverse" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
|
||||
<item.icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
|
||||
<Image
|
||||
src={item.image.src}
|
||||
alt={item.image.alt}
|
||||
fill
|
||||
className="object-cover object-top"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Dokploy integrates with the leading solutions */}
|
||||
<section className="border-b border-border/30 py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
|
||||
Dokploy integrates with the leading solutions
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
When it comes to a Dokploy vs. CapRover comparison, you want the
|
||||
deployment platform that syncs with the tools in your workflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-12 max-w-4xl overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-4 text-left font-semibold">Category</th>
|
||||
<th className="px-4 py-4 text-left font-semibold">Dokploy</th>
|
||||
<th className="px-4 py-4 text-left font-semibold">CapRover</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{integrationRows.map((row) => (
|
||||
<tr
|
||||
key={row.category}
|
||||
className="border-b border-border/50"
|
||||
>
|
||||
<td className="px-4 py-3 font-medium">{row.category}</td>
|
||||
<td className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{row.dokploy}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{row.caprover}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Why Dokploy is perfect for teams */}
|
||||
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Why Dokploy is perfect for teams of any size
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
Whether you're outgrowing CapRover's single-user setup or planning
|
||||
a production deployment from the start, Dokploy gives you the team
|
||||
features, monitoring, and automation that CapRover leaves
|
||||
out—without sacrificing the simplicity of self-hosted deployments.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<ComparisonStats />
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* Final CTA */}
|
||||
<CallToAction />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
357
apps/website/app/dokploy-vs-dokku/page.tsx
Normal file
357
apps/website/app/dokploy-vs-dokku/page.tsx
Normal file
@@ -0,0 +1,357 @@
|
||||
import { Container } from "@/components/Container";
|
||||
import { CallToAction } from "@/components/CallToAction";
|
||||
import { Testimonials } from "@/components/Testimonials";
|
||||
import { ComparisonStats } from "@/components/comparison-stats";
|
||||
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
|
||||
import { Check, X, Zap, Globe, Bell, Users } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { Metadata } from "next";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Dokploy vs. Dokku Comparison | Dokploy",
|
||||
description:
|
||||
"Dokploy vs. Dokku: Compare self-hosted PaaS platforms. See how Dokploy's UI-first approach stacks up against Dokku's CLI-based workflow for deployments.",
|
||||
};
|
||||
|
||||
type FeatureValue = boolean | "limited";
|
||||
|
||||
interface FeatureRow {
|
||||
feature: string;
|
||||
dokploy: FeatureValue;
|
||||
dokku: FeatureValue;
|
||||
section?: string;
|
||||
}
|
||||
|
||||
const featureComparisonRows: FeatureRow[] = [
|
||||
// Setup & Installation
|
||||
{ feature: "One-command installation", dokploy: true, dokku: true, section: "Setup & Installation" },
|
||||
{ feature: "Web-based UI dashboard", dokploy: true, dokku: false },
|
||||
{ feature: "Works with firewall and TailScale out of the box", dokploy: true, dokku: false },
|
||||
{ feature: "Lightweight CPU usage while idle", dokploy: true, dokku: true },
|
||||
// Deployment
|
||||
{ feature: "Deploy from GitHub, GitLab, Bitbucket", dokploy: true, dokku: "limited", section: "Deployment" },
|
||||
{ feature: "Auto-deploy on git push", dokploy: true, dokku: true },
|
||||
{ feature: "Docker Compose support", dokploy: true, dokku: "limited" },
|
||||
{ feature: "Deploy from custom Docker images", dokploy: true, dokku: true },
|
||||
{ feature: "Nixpacks and Buildpack support", dokploy: true, dokku: true },
|
||||
{ feature: "Preview deployments (review apps)", dokploy: true, dokku: false },
|
||||
{ feature: "One-click app templates", dokploy: true, dokku: false },
|
||||
// Networking & Domains
|
||||
{ feature: "Built-in reverse proxy", dokploy: true, dokku: true, section: "Networking & Domains" },
|
||||
{ feature: "Automatic SSL via Let's Encrypt", dokploy: true, dokku: true },
|
||||
{ feature: "Custom domain management via UI", dokploy: true, dokku: false },
|
||||
// Data & Backups
|
||||
{ feature: "Database deployment (Postgres, MySQL, Redis, etc.)", dokploy: true, dokku: true, section: "Data & Backups" },
|
||||
{ feature: "Scheduled database backups (S3)", dokploy: true, dokku: "limited" },
|
||||
{ feature: "Back up arbitrary Docker volumes", dokploy: true, dokku: false },
|
||||
// Monitoring & Alerts
|
||||
{ feature: "Real-time monitoring (CPU, RAM, disk)", dokploy: true, dokku: false, section: "Monitoring & Alerts" },
|
||||
{ feature: "Metrics enabled by default", dokploy: true, dokku: false },
|
||||
{ feature: "Automated alerts from metrics", dokploy: true, dokku: false },
|
||||
{ feature: "Application log viewer in UI", dokploy: true, dokku: false },
|
||||
// Teams & Access
|
||||
{ feature: "Teams and multi-user support", dokploy: true, dokku: false, section: "Teams & Access" },
|
||||
{ feature: "Role-based access control (RBAC)", dokploy: true, dokku: false },
|
||||
{ feature: "Projects grouping", dokploy: true, dokku: false },
|
||||
{ feature: "Multi-server deployment", dokploy: true, dokku: false },
|
||||
{ feature: "API access", dokploy: true, dokku: true },
|
||||
{ feature: "AI-assisted deployments", dokploy: true, dokku: false },
|
||||
];
|
||||
|
||||
const whyChooseItems = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Skip the CLI, ship from a dashboard",
|
||||
description:
|
||||
"Dokku requires SSH access and CLI commands for every operation—deploying, scaling, configuring domains, managing databases. Dokploy puts all of that in a visual dashboard. Connect your repo, configure your service, and deploy—all without touching a terminal. You still get full Docker access when you need it.",
|
||||
image: {
|
||||
src: "/images/dokploy-deployment-log.png",
|
||||
alt: "Dokploy deployment panel showing build and deployment logs",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: Bell,
|
||||
title: "Get monitoring and backups out of the box",
|
||||
description:
|
||||
"Dokku has no built-in monitoring or backup system—you'd need to set up separate tools and cron jobs. Dokploy includes real-time CPU, memory, and disk metrics, automated alerts, and scheduled S3-compatible backups for both databases and Docker volumes from day one.",
|
||||
image: {
|
||||
src: "/images/dokploy-monitoring-dashboard.png",
|
||||
alt: "Dokploy monitoring dashboard showing CPU, memory, disk and I/O metrics",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Built for teams, not just solo operators",
|
||||
description:
|
||||
"Dokku is fundamentally a single-server, single-user tool. Dokploy supports multi-user access with role-based permissions, project organization, and multi-server deployments. When your project grows from a solo effort to a team operation, Dokploy scales with you.",
|
||||
image: {
|
||||
src: "/images/dokploy-projects-dashboard.png",
|
||||
alt: "Dokploy projects dashboard with services grid and environment selector",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Manage everything in one place",
|
||||
description:
|
||||
"With Dokku, databases, SSL, and domains each require separate plugins and CLI commands. Dokploy integrates database management, domain configuration, SSL certificates, Docker Compose, and deployment pipelines into a single, cohesive interface—reducing context-switching and operational overhead.",
|
||||
image: {
|
||||
src: "/images/dokploy-provider-settings.png",
|
||||
alt: "Dokploy deploy settings with provider and domain configuration",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const integrationRows = [
|
||||
{
|
||||
category: "Git providers",
|
||||
dokploy: "GitHub, GitLab, Bitbucket, Gitea, Git Generic",
|
||||
dokku: "Git push via SSH",
|
||||
},
|
||||
{
|
||||
category: "Build and deployment systems",
|
||||
dokploy: "Docker, Docker Compose, Nixpacks, Heroku Buildpacks, Paketo Buildpacks, Railpack",
|
||||
dokku: "Docker, Heroku Buildpacks (via plugins)",
|
||||
},
|
||||
{
|
||||
category: "Notifications and communication",
|
||||
dokploy: "Slack, Telegram, Discord, Lark, Email (SMTP), Resend, Gotify, Ntfy, Pushover, Webhook",
|
||||
dokku: "None built-in",
|
||||
},
|
||||
];
|
||||
|
||||
function FeatureCell({ value }: { value: FeatureValue }) {
|
||||
if (value === true) return <Check className="mx-auto h-5 w-5 text-green-500" />;
|
||||
if (value === "limited") return <span className="text-xs text-amber-500">Limited</span>;
|
||||
return <X className="mx-auto h-5 w-5 text-muted-foreground/50" />;
|
||||
}
|
||||
|
||||
export default function DokployVsDokkuPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<AnimatedGridPattern
|
||||
numSquares={30}
|
||||
maxOpacity={0.1}
|
||||
height={40}
|
||||
width={40}
|
||||
duration={3}
|
||||
repeatDelay={1}
|
||||
className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)] absolute inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
|
||||
/>
|
||||
<Container className="relative z-10">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
|
||||
Dokploy vs. Dokku
|
||||
</h1>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
Both platforms let you self-host applications on your own server.
|
||||
But they take fundamentally different approaches—GUI-first vs.
|
||||
CLI-first—and that shapes everything about the experience.
|
||||
</p>
|
||||
|
||||
<div className="mt-16 grid gap-8 sm:grid-cols-2">
|
||||
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
|
||||
<h3 className="text-xl font-semibold text-white">Dokploy</h3>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
For teams that want a visual, full-featured deployment
|
||||
platform with a polished UI, built-in monitoring, database
|
||||
management, multi-server support, and team
|
||||
collaboration—choose Dokploy.
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
|
||||
<h3 className="text-xl font-semibold text-white">Dokku</h3>
|
||||
<p className="mt-3 text-sm text-muted-foreground">
|
||||
For experienced developers who prefer a CLI-driven,
|
||||
Heroku-like PaaS that's minimal and scriptable, with a
|
||||
plugin ecosystem for extending functionality—choose Dokku.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="mt-10 rounded-full" asChild>
|
||||
<Link
|
||||
href="https://app.dokploy.com/register"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Get started with Dokploy
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Dokploy vs Dokku at a glance */}
|
||||
<section className="border-b border-border/30 py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
|
||||
Dokploy vs. Dokku at a glance
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Read our comprehensive Dokploy vs. Dokku comparison before you
|
||||
make your decision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-12 max-w-5xl overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-4 text-left font-semibold">Feature</th>
|
||||
<th className="px-4 py-4 text-center font-semibold">Dokploy</th>
|
||||
<th className="px-4 py-4 text-center font-semibold">Dokku</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{featureComparisonRows.map((row) => (
|
||||
<>
|
||||
{row.section && (
|
||||
<tr key={`section-${row.section}`} className="border-b border-border bg-muted/20">
|
||||
<td
|
||||
colSpan={3}
|
||||
className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
|
||||
>
|
||||
{row.section}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr
|
||||
key={row.feature}
|
||||
className="border-b border-border/50 hover:bg-muted/30"
|
||||
>
|
||||
<td className="px-4 py-3 text-sm">{row.feature}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<FeatureCell value={row.dokploy} />
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<FeatureCell value={row.dokku} />
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Why you should go with Dokploy */}
|
||||
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Why you should go with Dokploy
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 max-w-6xl space-y-20">
|
||||
{whyChooseItems.map((item, index) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className={`flex flex-col gap-8 md:flex-row md:items-center ${
|
||||
index % 2 === 1 ? "md:flex-row-reverse" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
|
||||
<item.icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-3 text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
|
||||
<Image
|
||||
src={item.image.src}
|
||||
alt={item.image.alt}
|
||||
fill
|
||||
className="object-cover object-top"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Dokploy integrates with the leading solutions */}
|
||||
<section className="border-b border-border/30 py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
|
||||
Dokploy integrates with the leading solutions
|
||||
</h2>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
When it comes to a Dokploy vs. Dokku comparison, you want the
|
||||
self-hosted PaaS that syncs with the tools in your
|
||||
workflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-12 max-w-4xl overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="px-4 py-4 text-left font-semibold">Category</th>
|
||||
<th className="px-4 py-4 text-left font-semibold">Dokploy</th>
|
||||
<th className="px-4 py-4 text-left font-semibold">Dokku</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{integrationRows.map((row) => (
|
||||
<tr
|
||||
key={row.category}
|
||||
className="border-b border-border/50"
|
||||
>
|
||||
<td className="px-4 py-3 font-medium">{row.category}</td>
|
||||
<td className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{row.dokploy}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-muted-foreground">
|
||||
{row.dokku}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Why Dokploy is perfect for teams */}
|
||||
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
|
||||
Why Dokploy is perfect for teams of any size
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-muted-foreground">
|
||||
Whether you've outgrown Dokku's CLI-only workflow or you're
|
||||
choosing your first self-hosted PaaS, Dokploy gives you the visual
|
||||
interface, team features, and built-in tooling that Dokku relies on
|
||||
plugins and shell scripts for—all in one cohesive platform.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<ComparisonStats />
|
||||
|
||||
{/* Testimonials */}
|
||||
<Testimonials />
|
||||
|
||||
{/* Final CTA */}
|
||||
<CallToAction />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -37,6 +37,14 @@ const footerSections = [
|
||||
href: "/dokploy-vs-portainer",
|
||||
label: "Dokploy vs. Portainer",
|
||||
},
|
||||
{
|
||||
href: "/dokploy-vs-caprover",
|
||||
label: "Dokploy vs. CapRover",
|
||||
},
|
||||
{
|
||||
href: "/dokploy-vs-dokku",
|
||||
label: "Dokploy vs. Dokku",
|
||||
},
|
||||
{ href: "/blog", label: "Blog" },
|
||||
{
|
||||
href: "https://docs.dokploy.com/docs/core",
|
||||
|
||||
@@ -138,6 +138,7 @@ function MobileNavigation() {
|
||||
Resources
|
||||
</p>
|
||||
<MobileNavLink href="https://templates.dokploy.com" target="_blank">Templates</MobileNavLink>
|
||||
<MobileNavLink href="/comparison">Dokploy vs.</MobileNavLink>
|
||||
<MobileNavLink href="/blog">Blog</MobileNavLink>
|
||||
<MobileNavLink href="/#faqs">FAQ</MobileNavLink>
|
||||
<hr className="m-2 border-border" />
|
||||
@@ -293,6 +294,9 @@ export function Header() {
|
||||
<ListItem href="https://templates.dokploy.com" target="_blank" title="Templates">
|
||||
Ready-to-deploy templates
|
||||
</ListItem>
|
||||
<ListItem href="/comparison" title="Dokploy vs.">
|
||||
Compare Dokploy to alternatives
|
||||
</ListItem>
|
||||
<ListItem href="/blog" title="Blog">
|
||||
Latest news and updates
|
||||
</ListItem>
|
||||
|
||||
Reference in New Issue
Block a user