Merge pull request #1465 from zaaakher/docs/guides

docs: update `CONTRIBUTING.md` and add `GUIDES.md`

.github/workflows/dokploy.yml

@@ -2,7 +2,7 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary, "feat/better-auth-2"]
+    branches: [main, canary, "1061-custom-docker-service-hostname"]
 
 env:
   IMAGE_NAME: dokploy/dokploy

.github/workflows/format.yml

@@ -0,0 +1,22 @@
+name: autofix.ci
+
+on:
+  push:
+    branches: [canary]
+  pull_request:
+    branches: [canary]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup biomeJs
+        uses: biomejs/setup-biome@v2  
+
+      - name: Run Biome formatter
+        run:  biome format . --write
+
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef

CONTRIBUTING.md

@@ -61,9 +61,9 @@ pnpm install
 cp apps/dokploy/.env.example apps/dokploy/.env
 ```
 
-## Development
+## Requirements
 
-Is required to have **Docker** installed on your machine.
+- [Docker](/GUIDES.md#docker)
 
 ### Setup
 
@@ -165,86 +165,8 @@ Thank you for your contribution!
 
 ## Templates
 
-To add a new template, go to `templates` folder and create a new folder with the name of the template.
+To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
 
-Let's take the example of `plausible` template.
-
-1. create a folder in `templates/plausible`
-2. create a `docker-compose.yml` file inside the folder with the content of compose.
-3. create a `index.ts` file inside the folder with the following code as base:
-4. When creating a pull request, please provide a video of the template working in action.
-
-```typescript
-// EXAMPLE
-import {
-  generateBase64,
-  generateHash,
-  generateRandomDomain,
-  type Template,
-  type Schema,
-  type DomainSchema,
-} from "../utils";
-
-export function generate(schema: Schema): Template {
-  // do your stuff here, like create a new domain, generate random passwords, mounts.
-  const mainServiceHash = generateHash(schema.projectName);
-  const mainDomain = generateRandomDomain(schema);
-  const secretBase = generateBase64(64);
-  const toptKeyBase = generateBase64(32);
-
-  const domains: DomainSchema[] = [
-    {
-      host: mainDomain,
-      port: 8000,
-      serviceName: "plausible",
-    },
-  ];
-
-  const envs = [
-    `BASE_URL=http://${mainDomain}`,
-    `SECRET_KEY_BASE=${secretBase}`,
-    `TOTP_VAULT_KEY=${toptKeyBase}`,
-    `HASH=${mainServiceHash}`,
-  ];
-
-  const mounts: Template["mounts"] = [
-    {
-      filePath: "./clickhouse/clickhouse-config.xml",
-      content: "some content......",
-    },
-  ];
-
-  return {
-    envs,
-    mounts,
-    domains,
-  };
-}
-```
-
-4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
-
-**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
-
-```typescript
-{
-	id: "plausible",
-	name: "Plausible",
-	version: "v2.1.0",
-	description:
-		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
-	logo: "plausible.svg", // we defined the name and the extension of the logo
-	links: {
-		github: "https://github.com/plausible/plausible",
-		website: "https://plausible.io/",
-		docs: "https://plausible.io/docs",
-	},
-	tags: ["analytics"],
-	load: () => import("./plausible/index").then((m) => m.generate),
-},
-```
-
-5. Add the logo or image of the template to `public/templates/plausible.svg`
 
 ### Recommendations
 

GUIDES.md

@@ -0,0 +1,49 @@
+# Docker
+
+Here's how to install docker on different operating systems:
+
+## macOS
+
+1. Visit [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop)
+2. Download the Docker Desktop installer
+3. Double-click the downloaded `.dmg` file
+4. Drag Docker to your Applications folder
+5. Open Docker Desktop from Applications
+6. Follow the onboarding tutorial if desired
+
+## Linux
+
+### Ubuntu
+
+```bash
+# Update package index
+sudo apt-get update
+
+# Install prerequisites
+sudo apt-get install \
+    apt-transport-https \
+    ca-certificates \
+    curl \
+    gnupg \
+    lsb-release
+
+# Add Docker's official GPG key
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+
+# Set up stable repository
+echo \
+  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
+  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker Engine
+sudo apt-get update
+sudo apt-get install docker-ce docker-ce-cli containerd.io
+```
+
+## Windows
+
+1. Enable WSL2 if not already enabled
+2. Visit [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
+3. Download the installer
+4. Run the installer and follow the prompts
+5. Start Docker Desktop from the Start menu

apps/dokploy/CONTRIBUTING.md

@@ -1,242 +0,0 @@
-
-
-# Contributing
-
-Hey, thanks for your interest in contributing to Dokploy! We appreciate your help and taking your time to contribute.
-
-
-Before you start, please first discuss the feature/bug you want to add with the owners and comunity via github issues.
-
-We have a few guidelines to follow when contributing to this project:
-
-- [Commit Convention](#commit-convention)
-- [Setup](#setup)
-- [Development](#development)
-- [Build](#build)
-- [Pull Request](#pull-request)
-
-## Commit Convention
-
-Before you craete a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
-
-### Commit Message Format
-```
-<type>[optional scope]: <description>
-
-[optional body]
-
-[optional footer(s)]
-```
-
-#### Type
-Must be one of the following:
-
-* **feat**: A new feature
-* **fix**: A bug fix
-* **docs**: Documentation only changes
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-* **refactor**: A code change that neither fixes a bug nor adds a feature
-* **perf**: A code change that improves performance
-* **test**: Adding missing tests or correcting existing tests
-* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-* **chore**: Other changes that don't modify `src` or `test` files
-* **revert**: Reverts a previous commit
-
-Example:
-```
-feat: add new feature
-```
-
-
-
-
-## Setup
-
-Before you start, please make the clone based on the `canary` branch, since the `main` branch is the source of truth and should always reflect the latest stable release, also the PRs will be merged to the `canary` branch.
-
-```bash
-git clone https://github.com/dokploy/dokploy.git
-cd dokploy
-pnpm install
-cp .env.example .env
-```
-
-## Development
-
-Is required to have **Docker** installed on your machine.
-
-
-### Setup
-
-Run the command that will spin up all the required services and files.
-
-```bash
-pnpm run setup
-```
-
-Now run the development server.
-
-```bash
-pnpm run dev
-```
-
-
-Go to http://localhost:3000 to see the development server
-
-## Build
-
-```bash
-pnpm run build
-```
-
-## Docker
-
-To build the docker image
-```bash
-pnpm run docker:build
-```
-
-To push the docker image
-```bash
-pnpm run docker:push
-```
-
-## Password Reset
-
-In the case you lost your password, you can reset it using the following command
-
-```bash
-pnpm run reset-password
-```
-
-If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
-
-```bash
-bunx lt --port 3000
-```
-
-If you run into permission issues of docker run the following command
-
-```bash
-sudo chown -R USERNAME dokploy or sudo chown -R $(whoami) ~/.docker
-```
-
-## Application deploy
-
-In case you want to deploy the application on your machine and you selected nixpacks or buildpacks, you need to install first.
-
-```bash
-# Install Nixpacks
-curl -sSL https://nixpacks.com/install.sh -o install.sh \
-    && chmod +x install.sh \
-    && ./install.sh
-```
-
-```bash
-# Install Buildpacks
-curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
-```
-
-
-## Pull Request
-
-- The `main` branch is the source of truth and should always reflect the latest stable release.
-- Create a new branch for each feature or bug fix.
-- Make sure to add tests for your changes.
-- Make sure to update the documentation for any changes Go to the [docs.dokploy.com](https://docs.dokploy.com) website to see the changes.
-- When creating a pull request, please provide a clear and concise description of the changes made.
-- If you include a video or screenshot, would be awesome so we can see the changes in action.
-- If your pull request fixes an open issue, please reference the issue in the pull request description.
-- Once your pull request is merged, you will be automatically added as a contributor to the project.
-
-Thank you for your contribution!
-
-
-
-
-
-## Templates
-
-To add a new template, go to `templates` folder and create a new folder with the name of the template.
-
-Let's take the example of `plausible` template.
-
-1. create a folder in `templates/plausible`
-2. create a `docker-compose.yml` file inside the folder with the content of compose.
-3. create a `index.ts` file inside the folder with the following code as base:
-4. When creating a pull request, please provide a video of the template working in action.
-
-```typescript
-// EXAMPLE
-import {
-	generateHash,
-	generateRandomDomain,
-	type Template,
-	type Schema,
-} from "../utils";
-
-
-export function generate(schema: Schema): Template {
-
-	// do your stuff here, like create a new domain, generate random passwords, mounts.
-	const mainServiceHash = generateHash(schema.projectName);
-	const randomDomain = generateRandomDomain(schema);
-	const secretBase = generateBase64(64);
-	const toptKeyBase = generateBase64(32);
-
-	const envs = [
-// If you want to show a domain in the UI, please add the prefix _HOST at the end of the variable name.
-		`PLAUSIBLE_HOST=${randomDomain}`,
-		"PLAUSIBLE_PORT=8000",
-		`BASE_URL=http://${randomDomain}`,
-		`SECRET_KEY_BASE=${secretBase}`,
-		`TOTP_VAULT_KEY=${toptKeyBase}`,
-		`HASH=${mainServiceHash}`,
-	];
-
-    const mounts: Template["mounts"] = [
-		{
-			mountPath: "./clickhouse/clickhouse-config.xml",
-			content: `some content......`,
-		},
-	];
-
-	return {
-		envs,
-        mounts,
-	};
-}
-```
-
-4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
-
-**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
-
-```typescript
-{
-	id: "plausible",
-	name: "Plausible",
-	version: "v2.1.0",
-	description:
-		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
-	logo: "plausible.svg", // we defined the name and the extension of the logo
-	links: {
-		github: "https://github.com/plausible/plausible",
-		website: "https://plausible.io/",
-		docs: "https://plausible.io/docs",
-	},
-	tags: ["analytics"],
-	load: () => import("./plausible/index").then((m) => m.generate),
-},
-```
-
-5. Add the logo or image of the template to `public/templates/plausible.svg`
-
-
-### Recomendations
-- Use the same name of the folder as the id of the template.
-- The logo should be in the public folder.
-- If you want to show a domain in the UI, please add the prefix _HOST at the end of the variable name.
-- Test first on a vps or a server to make sure the template works.
-

apps/dokploy/__test__/drop/drop.test.test.ts

@@ -27,6 +27,7 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
+	cleanCache: false,
 	watchPaths: [],
 	applicationStatus: "done",
 	appName: "",

apps/dokploy/__test__/templates/config.template.test.ts

@@ -166,7 +166,38 @@ describe("processTemplate", () => {
 			if (!baseUrl || !secretKey) return;
 
 			expect(baseUrl).toContain(mockSchema.projectName);
-			expect(secretKey.split("=")[1]).toHaveLength(64);
+			const base64Value = secretKey.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(86);
+			expect(base64Value.length).toBeLessThanOrEqual(88);
+		});
+
+		it("should process env vars when provided as an array", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: [
+						'CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"',
+						'ANOTHER_VAR="some value"',
+						"DOMAIN=${domain}",
+					],
+					mounts: [],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+
+			// Should preserve exact format for static values
+			expect(result.envs[0]).toBe('CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"');
+			expect(result.envs[1]).toBe('ANOTHER_VAR="some value"');
+
+			// Should process variables in array items
+			expect(result.envs[2]).toContain(mockSchema.projectName);
 		});
 
 		it("should allow using utility functions directly in env vars", () => {
@@ -195,7 +226,12 @@ describe("processTemplate", () => {
 			if (!randomDomainEnv || !secretKeyEnv) return;
 
 			expect(randomDomainEnv).toContain(mockSchema.projectName);
-			expect(secretKeyEnv.split("=")[1]).toHaveLength(32);
+			const base64Value = secretKeyEnv.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(42);
+			expect(base64Value.length).toBeLessThanOrEqual(44);
 		});
 	});
 
@@ -325,8 +361,22 @@ describe("processTemplate", () => {
 			if (!baseUrl || !secretKey || !totpKey) return;
 
 			expect(baseUrl).toContain(mockSchema.projectName);
-			expect(secretKey.split("=")[1]).toHaveLength(64);
-			expect(totpKey.split("=")[1]).toHaveLength(32);
+
+			// Check base64 lengths and format
+			const secretKeyValue = secretKey.split("=")[1];
+			const totpKeyValue = totpKey.split("=")[1];
+
+			expect(secretKeyValue).toBeDefined();
+			expect(totpKeyValue).toBeDefined();
+			if (!secretKeyValue || !totpKeyValue) return;
+
+			expect(secretKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(secretKeyValue.length).toBeGreaterThanOrEqual(86);
+			expect(secretKeyValue.length).toBeLessThanOrEqual(88);
+
+			expect(totpKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(totpKeyValue.length).toBeGreaterThanOrEqual(42);
+			expect(totpKeyValue.length).toBeLessThanOrEqual(44);
 
 			// Check mounts
 			expect(result.mounts).toHaveLength(1);
@@ -334,8 +384,8 @@ describe("processTemplate", () => {
 			expect(mount).toBeDefined();
 			if (!mount) return;
 			expect(mount.content).toContain(mockSchema.projectName);
-			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{64}/);
-			expect(mount.content).toMatch(/totp=[A-Za-z0-9+/]{32}/);
+			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{86,88}/);
+			expect(mount.content).toMatch(/totp=[A-Za-z0-9+/]{42,44}/);
 		});
 	});
 

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -7,6 +7,7 @@ import { expect, test } from "vitest";
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
+	cleanCache: false,
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,

apps/dokploy/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -40,7 +40,7 @@ interface Props {
 }
 
 const AddRedirectchema = z.object({
-	replicas: z.number(),
+	replicas: z.number().min(1, "Replicas must be at least 1"),
 	registryId: z.string(),
 });
 
@@ -130,9 +130,11 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 												placeholder="1"
 												{...field}
 												onChange={(e) => {
-													field.onChange(Number(e.target.value));
+													const value = e.target.value;
+													field.onChange(value === "" ? 0 : Number(value));
 												}}
 												type="number"
+												value={field.value || ""}
 											/>
 										</FormControl>
 

apps/dokploy/components/dashboard/application/domains/add-domain.tsx

@@ -42,6 +42,7 @@ import { domain } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Dices } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domain>;
 
@@ -83,6 +84,13 @@ export const AddDomain = ({
 	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
 		api.domain.generateDomain.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: application?.serverId || "",
+		});
+
+	console.log("canGenerateTraefikMeDomains", canGenerateTraefikMeDomains);
+
 	const form = useForm<Domain>({
 		resolver: zodResolver(domain),
 		defaultValues: {
@@ -186,6 +194,21 @@ export const AddDomain = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{application?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>

apps/dokploy/components/dashboard/application/general/generic/save-docker-provider.tsx

@@ -115,7 +115,11 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Username</FormLabel>
 									<FormControl>
-										<Input placeholder="Username" autoComplete="username" {...field} />
+										<Input
+											placeholder="Username"
+											autoComplete="username"
+											{...field}
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -130,7 +134,12 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Password</FormLabel>
 									<FormControl>
-										<Input placeholder="Password" autoComplete="one-time-code" {...field} type="password" />
+										<Input
+											placeholder="Password"
+											autoComplete="one-time-code"
+											{...field}
+											type="password"
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -468,16 +468,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							Save
 						</Button>
 					</div>
-					{/* create github link */}
-					<div className="flex w-full justify-end">
-						<Link
-							href={`https://github.com/${repository?.owner}/${repository?.repo}`}
-							target="_blank"
-							className="w-fit"
-						>
-							Repository
-						</Link>
-					</div>
 				</form>
 			</Form>
 		</div>

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -10,14 +10,14 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import {
 	Ban,
 	CheckCircle2,
 	Hammer,
-	HelpCircle,
 	RefreshCcw,
+	Rocket,
 	Terminal,
 } from "lucide-react";
 import { useRouter } from "next/router";
@@ -55,7 +55,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<TooltipProvider delayDuration={0}>
+					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
 						<DialogAction
 							title="Deploy Application"
 							description="Are you sure you want to deploy this application?"
@@ -79,12 +79,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							<Button
 								variant="default"
 								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5"
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 							>
-								Deploy
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										<div className="flex items-center">
+											<Rocket className="size-4 mr-1" />
+											Deploy
+										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
 										<TooltipContent sideOffset={5} className="z-[60]">
@@ -114,9 +116,24 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									});
 							}}
 						>
-							<Button variant="secondary" isLoading={isReloading}>
-								Reload
-								<RefreshCcw className="size-4" />
+							<Button
+								variant="secondary"
+								isLoading={isReloading}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<RefreshCcw className="size-4 mr-1" />
+											Reload
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Reload the application without rebuilding it</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DialogAction>
 						<DialogAction
@@ -139,13 +156,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							<Button
 								variant="secondary"
 								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5"
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 							>
-								Rebuild
-								<Hammer className="size-4" />
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										<div className="flex items-center">
+											<Hammer className="size-4 mr-1" />
+											Rebuild
+										</div>
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
 										<TooltipContent sideOffset={5} className="z-[60]">
@@ -180,13 +198,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isStarting}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Start
-									<CheckCircle2 className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<CheckCircle2 className="size-4 mr-1" />
+												Start
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -219,13 +238,14 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 								<Button
 									variant="destructive"
 									isLoading={isStopping}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Stop
-									<Ban className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Ban className="size-4 mr-1" />
+												Stop
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -241,15 +261,18 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
 					>
-						<Button variant="outline">
-							<Terminal />
+						<Button
+							variant="outline"
+							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Terminal className="size-4 mr-1" />
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
 					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
 						<span className="text-sm font-medium">Autodeploy</span>
 						<Switch
-							aria-label="Toggle italic"
+							aria-label="Toggle autodeploy"
 							checked={data?.autoDeploy || false}
 							onCheckedChange={async (enabled) => {
 								await update({
@@ -264,7 +287,29 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.error("Error updating Auto Deploy");
 									});
 							}}
-							className="flex flex-row gap-2 items-center"
+							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+						/>
+					</div>
+
+					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<span className="text-sm font-medium">Clean Cache</span>
+						<Switch
+							aria-label="Toggle clean cache"
+							checked={data?.cleanCache || false}
+							onCheckedChange={async (enabled) => {
+								await update({
+									applicationId,
+									cleanCache: enabled,
+								})
+									.then(async () => {
+										toast.success("Clean Cache Updated");
+										await refetch();
+									})
+									.catch(() => {
+										toast.error("Error updating Clean Cache");
+									});
+							}}
+							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
 						/>
 					</div>
 				</CardContent>

apps/dokploy/components/dashboard/application/update-application.tsx

@@ -121,7 +121,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/compose/domains/add-domain.tsx

@@ -42,6 +42,7 @@ import { domainCompose } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domainCompose>;
 
@@ -102,6 +103,11 @@ export const AddDomainCompose = ({
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: compose?.serverId || "",
+		});
+
 	const form = useForm<Domain>({
 		resolver: zodResolver(domainCompose),
 		defaultValues: {
@@ -313,6 +319,21 @@ export const AddDomainCompose = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{compose?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -7,9 +7,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, HelpCircle, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -34,7 +34,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<TooltipProvider delayDuration={0}>
+			<TooltipProvider delayDuration={0} disableHoverableContent={false}>
 				<DialogAction
 					title="Deploy Compose"
 					description="Are you sure you want to deploy this compose?"
@@ -58,12 +58,14 @@ export const ComposeActions = ({ composeId }: Props) => {
 					<Button
 						variant="default"
 						isLoading={data?.composeStatus === "running"}
-						className="flex items-center gap-1.5"
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 					>
-						Deploy
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								<div className="flex items-center">
+									<Rocket className="size-4 mr-1" />
+									Deploy
+								</div>
 							</TooltipTrigger>
 							<TooltipPrimitive.Portal>
 								<TooltipContent sideOffset={5} className="z-[60]">
@@ -74,36 +76,37 @@ export const ComposeActions = ({ composeId }: Props) => {
 					</Button>
 				</DialogAction>
 				<DialogAction
-					title="Rebuild Compose"
-					description="Are you sure you want to rebuild this compose?"
+					title="Reload Compose"
+					description="Are you sure you want to reload this compose?"
 					type="default"
 					onClick={async () => {
 						await redeploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose rebuilt successfully");
+								toast.success("Compose reloaded successfully");
 								refetch();
 							})
 							.catch(() => {
-								toast.error("Error rebuilding compose");
+								toast.error("Error reloading compose");
 							});
 					}}
 				>
 					<Button
 						variant="secondary"
 						isLoading={data?.composeStatus === "running"}
-						className="flex items-center gap-1.5"
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 					>
-						Rebuild
-						<Hammer className="size-4" />
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								<div className="flex items-center">
+									<RefreshCcw className="size-4 mr-1" />
+									Reload
+								</div>
 							</TooltipTrigger>
 							<TooltipPrimitive.Portal>
 								<TooltipContent sideOffset={5} className="z-[60]">
-									<p>Only rebuilds the compose without downloading new code</p>
+									<p>Reload the compose without rebuilding it</p>
 								</TooltipContent>
 							</TooltipPrimitive.Portal>
 						</Tooltip>
@@ -131,13 +134,14 @@ export const ComposeActions = ({ composeId }: Props) => {
 						<Button
 							variant="secondary"
 							isLoading={isStarting}
-							className="flex items-center gap-1.5"
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 						>
-							Start
-							<CheckCircle2 className="size-4" />
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									<div className="flex items-center">
+										<CheckCircle2 className="size-4 mr-1" />
+										Start
+									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
 									<TooltipContent sideOffset={5} className="z-[60]">
@@ -169,13 +173,14 @@ export const ComposeActions = ({ composeId }: Props) => {
 						<Button
 							variant="destructive"
 							isLoading={isStopping}
-							className="flex items-center gap-1.5"
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 						>
-							Stop
-							<Ban className="size-4" />
 							<Tooltip>
 								<TooltipTrigger asChild>
-									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									<div className="flex items-center">
+										<Ban className="size-4 mr-1" />
+										Stop
+									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
 									<TooltipContent sideOffset={5} className="z-[60]">
@@ -191,15 +196,18 @@ export const ComposeActions = ({ composeId }: Props) => {
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
 			>
-				<Button variant="outline">
-					<Terminal />
+				<Button
+					variant="outline"
+					className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+				>
+					<Terminal className="size-4 mr-1" />
 					Open Terminal
 				</Button>
 			</DockerTerminalModal>
 			<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
 				<span className="text-sm font-medium">Autodeploy</span>
 				<Switch
-					aria-label="Toggle italic"
+					aria-label="Toggle autodeploy"
 					checked={data?.autoDeploy || false}
 					onCheckedChange={async (enabled) => {
 						await update({
@@ -214,7 +222,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								toast.error("Error updating Auto Deploy");
 							});
 					}}
-					className="flex flex-row gap-2 items-center"
+					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
 				/>
 			</div>
 		</div>

apps/dokploy/components/dashboard/compose/general/isolated-deployment.tsx

@@ -147,7 +147,9 @@ export const IsolatedDeployment = ({ composeId }: Props) => {
 								render={({ field }) => (
 									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 										<div className="space-y-0.5">
-											<FormLabel>Enable Isolated Deployment ({data?.appName})</FormLabel>
+											<FormLabel>
+												Enable Isolated Deployment ({data?.appName})
+											</FormLabel>
 											<FormDescription>
 												Enable isolated deployment to the compose file.
 											</FormDescription>

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -62,6 +62,11 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
+				<AlertBlock type="info">
+					Preview your docker-compose file with added domains. Note: At least
+					one domain must be specified for this conversion to take effect.
+				</AlertBlock>
+
 				<div className="flex flex-row gap-2 justify-end">
 					<Button
 						variant="secondary"

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -121,7 +121,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/database/backups/add-backup.tsx

@@ -286,16 +286,21 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 										<FormItem>
 											<FormLabel>Keep the latest</FormLabel>
 											<FormControl>
-												<Input type="number" placeholder={"keeps all the backups if left empty"} {...field} />
+												<Input
+													type="number"
+													placeholder={"keeps all the backups if left empty"}
+													{...field}
+												/>
 											</FormControl>
 											<FormDescription>
-												Optional. If provided, only keeps the latest N backups in the cloud.
+												Optional. If provided, only keeps the latest N backups
+												in the cloud.
 											</FormDescription>
 											<FormMessage />
 										</FormItem>
 									);
 								}}
-							/>							
+							/>
 							<FormField
 								control={form.control}
 								name="enabled"

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -0,0 +1,375 @@
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import type { ServiceType } from "../../application/advanced/show-resources";
+import { debounce } from "lodash";
+import { Input } from "@/components/ui/input";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Badge } from "@/components/ui/badge";
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
+
+interface Props {
+	databaseId: string;
+	databaseType: Exclude<ServiceType, "application" | "redis">;
+	serverId: string | null;
+}
+
+const RestoreBackupSchema = z.object({
+	destinationId: z
+		.string({
+			required_error: "Please select a destination",
+		})
+		.min(1, {
+			message: "Destination is required",
+		}),
+	backupFile: z
+		.string({
+			required_error: "Please select a backup file",
+		})
+		.min(1, {
+			message: "Backup file is required",
+		}),
+	databaseName: z
+		.string({
+			required_error: "Please enter a database name",
+		})
+		.min(1, {
+			message: "Database name is required",
+		}),
+});
+
+type RestoreBackup = z.infer<typeof RestoreBackupSchema>;
+
+export const RestoreBackup = ({
+	databaseId,
+	databaseType,
+	serverId,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [search, setSearch] = useState("");
+
+	const { data: destinations = [] } = api.destination.all.useQuery();
+
+	const form = useForm<RestoreBackup>({
+		defaultValues: {
+			destinationId: "",
+			backupFile: "",
+			databaseName: "",
+		},
+		resolver: zodResolver(RestoreBackupSchema),
+	});
+
+	const destionationId = form.watch("destinationId");
+
+	const debouncedSetSearch = debounce((value: string) => {
+		setSearch(value);
+	}, 300);
+
+	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+		{
+			destinationId: destionationId,
+			search,
+			serverId: serverId ?? "",
+		},
+		{
+			enabled: isOpen && !!destionationId,
+		},
+	);
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+
+	// const { mutateAsync: restore, isLoading: isRestoring } =
+	// 	api.backup.restoreBackup.useMutation();
+
+	api.backup.restoreBackupWithLogs.useSubscription(
+		{
+			databaseId,
+			databaseType,
+			databaseName: form.watch("databaseName"),
+			backupFile: form.watch("backupFile"),
+			destinationId: form.watch("destinationId"),
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
+
+				if (log === "Restore completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Restore logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+
+	const onSubmit = async (_data: RestoreBackup) => {
+		setIsDeploying(true);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					<RotateCcw className="mr-2 size-4" />
+					Restore Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle className="flex items-center">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Backup
+					</DialogTitle>
+					<DialogDescription>
+						Select a destination and search for backup files
+					</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-restore-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="destinationId"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Destination</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value
+														? destinations.find(
+																(d) => d.destinationId === field.value,
+															)?.name
+														: "Select Destination"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search destinations..."
+													className="h-9"
+												/>
+												<CommandEmpty>No destinations found.</CommandEmpty>
+												<ScrollArea className="h-64">
+													<CommandGroup>
+														{destinations.map((destination) => (
+															<CommandItem
+																value={destination.destinationId}
+																key={destination.destinationId}
+																onSelect={() => {
+																	form.setValue(
+																		"destinationId",
+																		destination.destinationId,
+																	);
+																}}
+															>
+																{destination.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		destination.destinationId === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="backupFile"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel className="flex items-center justify-between">
+										Search Backup Files
+										{field.value && (
+											<Badge variant="outline">
+												{field.value}
+												<Copy
+													className="ml-2 size-4 cursor-pointer"
+													onClick={(e) => {
+														e.stopPropagation();
+														e.preventDefault();
+														copy(field.value);
+														toast.success("Backup file copied to clipboard");
+													}}
+												/>
+											</Badge>
+										)}
+									</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value || "Search and select a backup file"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search backup files..."
+													onValueChange={debouncedSetSearch}
+													className="h-9"
+												/>
+												{isLoading ? (
+													<div className="py-6 text-center text-sm">
+														Loading backup files...
+													</div>
+												) : files.length === 0 && search ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files found for "{search}"
+													</div>
+												) : files.length === 0 ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files available
+													</div>
+												) : (
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{files.map((file) => (
+																<CommandItem
+																	value={file}
+																	key={file}
+																	onSelect={() => {
+																		form.setValue("backupFile", file);
+																	}}
+																>
+																	<div className="flex w-full justify-between">
+																		<span>{file}</span>
+																	</div>
+																	<CheckIcon
+																		className={cn(
+																			"ml-auto h-4 w-4",
+																			file === field.value
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												)}
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="databaseName"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Database Name</FormLabel>
+									<FormControl>
+										<Input {...field} placeholder="Enter database name" />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<DialogFooter>
+							<Button
+								isLoading={isDeploying}
+								form="hook-form-restore-backup"
+								type="submit"
+								disabled={!form.watch("backupFile")}
+							>
+								Restore
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						// refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/database/backups/show-backups.tsx

@@ -20,6 +20,7 @@ import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";
 import { UpdateBackup } from "./update-backup";
+import { RestoreBackup } from "./restore-backup";
 import { useState } from "react";
 
 interface Props {
@@ -27,7 +28,9 @@ interface Props {
 	type: Exclude<ServiceType, "application" | "redis">;
 }
 export const ShowBackups = ({ id, type }: Props) => {
-	const [activeManualBackup, setActiveManualBackup] = useState<string | undefined>();
+	const [activeManualBackup, setActiveManualBackup] = useState<
+		string | undefined
+	>();
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -69,7 +72,14 @@ export const ShowBackups = ({ id, type }: Props) => {
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
+						<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+						<RestoreBackup
+							databaseId={id}
+							databaseType={type}
+							serverId={postgres.serverId}
+						/>
+					</div>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -96,11 +106,18 @@ export const ShowBackups = ({ id, type }: Props) => {
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<AddBackup
-									databaseId={id}
-									databaseType={type}
-									refetch={refetch}
-								/>
+								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+									<AddBackup
+										databaseId={id}
+										databaseType={type}
+										refetch={refetch}
+									/>
+									<RestoreBackup
+										databaseId={id}
+										databaseType={type}
+										serverId={postgres.serverId}
+									/>
+								</div>
 							</div>
 						) : (
 							<div className="flex flex-col pt-2">
@@ -142,7 +159,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 													<div className="flex flex-col gap-1">
 														<span className="font-medium">Keep Latest</span>
 														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || 'All'}
+															{backup.keepLatestCount || "All"}
 														</span>
 													</div>
 												</div>
@@ -153,7 +170,10 @@ export const ShowBackups = ({ id, type }: Props) => {
 																<Button
 																	type="button"
 																	variant="ghost"
-																	isLoading={isManualBackup && activeManualBackup === backup.backupId}
+																	isLoading={
+																		isManualBackup &&
+																		activeManualBackup === backup.backupId
+																	}
 																	onClick={async () => {
 																		setActiveManualBackup(backup.backupId);
 																		await manualBackup({
@@ -178,6 +198,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 															<TooltipContent>Run Manual Backup</TooltipContent>
 														</Tooltip>
 													</TooltipProvider>
+
 													<UpdateBackup
 														backupId={backup.backupId}
 														refetch={refetch}

apps/dokploy/components/dashboard/database/backups/update-backup.tsx

@@ -92,7 +92,9 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 				enabled: backup.enabled || false,
 				prefix: backup.prefix,
 				schedule: backup.schedule,
-				keepLatestCount: backup.keepLatestCount ? Number(backup.keepLatestCount) : undefined,
+				keepLatestCount: backup.keepLatestCount
+					? Number(backup.keepLatestCount)
+					: undefined,
 			});
 		}
 	}, [form, form.reset, backup]);
@@ -274,10 +276,15 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 										<FormItem>
 											<FormLabel>Keep the latest</FormLabel>
 											<FormControl>
-												<Input type="number" placeholder={"keeps all the backups if left empty"} {...field} />
+												<Input
+													type="number"
+													placeholder={"keeps all the backups if left empty"}
+													{...field}
+												/>
 											</FormControl>
 											<FormDescription>
-												Optional. If provided, only keeps the latest N backups in the cloud.
+												Optional. If provided, only keeps the latest N backups
+												in the cloud.
 											</FormDescription>
 											<FormMessage />
 										</FormItem>

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -119,7 +119,6 @@ export const DockerLogsId: React.FC<Props> = ({
 		const wsUrl = `${protocol}//${
 			window.location.host
 		}/docker-container-logs?${params.toString()}`;
-		console.log("Connecting to WebSocket:", wsUrl);
 		const ws = new WebSocket(wsUrl);
 
 		const resetNoDataTimeout = () => {
@@ -136,7 +135,6 @@ export const DockerLogsId: React.FC<Props> = ({
 				ws.close();
 				return;
 			}
-			console.log("WebSocket connected");
 			resetNoDataTimeout();
 		};
 

apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -106,6 +108,20 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link
+									href="/dashboard/settings/server"
+									className="text-primary"
+								>
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}

apps/dokploy/components/dashboard/mariadb/general/show-general-mariadb.tsx

@@ -8,15 +8,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import {
-	Ban,
-	CheckCircle2,
-	HelpCircle,
-	RefreshCcw,
-	Terminal,
-} from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -92,12 +86,14 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -107,6 +103,8 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
+						</TooltipProvider>
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
 								title="Reload Mariadb"
 								description="Are you sure you want to reload this mariadb?"
@@ -128,13 +126,14 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Reload
-									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -144,7 +143,9 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
-							{data?.applicationStatus === "idle" ? (
+						</TooltipProvider>
+						{data?.applicationStatus === "idle" ? (
+							<TooltipProvider delayDuration={0}>
 								<DialogAction
 									title="Start Mariadb"
 									description="Are you sure you want to start this mariadb?"
@@ -165,13 +166,14 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Start
-										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -184,7 +186,9 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 										</Tooltip>
 									</Button>
 								</DialogAction>
-							) : (
+							</TooltipProvider>
+						) : (
+							<TooltipProvider delayDuration={0}>
 								<DialogAction
 									title="Stop Mariadb"
 									description="Are you sure you want to stop this mariadb?"
@@ -204,13 +208,14 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Stop
-										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -220,15 +225,29 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 										</Tooltip>
 									</Button>
 								</DialogAction>
-							)}
-						</TooltipProvider>
+							</TooltipProvider>
+						)}
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button variant="outline">
-								<Terminal />
-								Open Terminal
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MariaDB container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx

@@ -119,7 +119,7 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -106,6 +108,20 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link
+									href="/dashboard/settings/server"
+									className="text-primary"
+								>
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}

apps/dokploy/components/dashboard/mongo/general/show-general-mongo.tsx

@@ -8,15 +8,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import {
-	Ban,
-	CheckCircle2,
-	HelpCircle,
-	RefreshCcw,
-	Terminal,
-} from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -91,12 +85,14 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -127,13 +123,14 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Reload
-									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -164,13 +161,14 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Start
-										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -203,13 +201,14 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Stop
-										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -225,9 +224,23 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button variant="outline">
-								<Terminal />
-								Open Terminal
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MongoDB container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

apps/dokploy/components/dashboard/mongo/update-mongo.tsx

@@ -121,7 +121,7 @@ export const UpdateMongo = ({ mongoId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/monitoring/free/container/show-free-container-monitoring.tsx

@@ -218,7 +218,7 @@ export const ContainerFreeMonitoring = ({
 					<CardContent>
 						<div className="flex flex-col gap-2 w-full">
 							<span className="text-sm text-muted-foreground">
-								Used: {currentData.cpu.value}%
+								Used: {currentData.cpu.value}
 							</span>
 							<Progress value={currentData.cpu.value} className="w-[100%]" />
 							<DockerCpuChart acummulativeData={acummulativeData.cpu} />

apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -106,6 +108,20 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link
+									href="/dashboard/settings/server"
+									className="text-primary"
+								>
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}

apps/dokploy/components/dashboard/mysql/general/show-general-mysql.tsx

@@ -8,15 +8,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import {
-	Ban,
-	CheckCircle2,
-	HelpCircle,
-	RefreshCcw,
-	Terminal,
-} from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -77,7 +71,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Deploy Mysql"
+								title="Deploy MySQL"
 								description="Are you sure you want to deploy this mysql?"
 								type="default"
 								onClick={async () => {
@@ -89,12 +83,14 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -105,7 +101,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								</Button>
 							</DialogAction>
 							<DialogAction
-								title="Reload Mysql"
+								title="Reload MySQL"
 								description="Are you sure you want to reload this mysql?"
 								type="default"
 								onClick={async () => {
@@ -114,24 +110,25 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mysql reloaded successfully");
+											toast.success("MySQL reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error reloading Mysql");
+											toast.error("Error reloading MySQL");
 										});
 								}}
 							>
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Reload
-									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -143,7 +140,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 							</DialogAction>
 							{data?.applicationStatus === "idle" ? (
 								<DialogAction
-									title="Start Mysql"
+									title="Start MySQL"
 									description="Are you sure you want to start this mysql?"
 									type="default"
 									onClick={async () => {
@@ -151,24 +148,25 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 											mysqlId: mysqlId,
 										})
 											.then(() => {
-												toast.success("Mysql started successfully");
+												toast.success("MySQL started successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error starting Mysql");
+												toast.error("Error starting MySQL");
 											});
 									}}
 								>
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Start
-										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -183,31 +181,32 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								</DialogAction>
 							) : (
 								<DialogAction
-									title="Stop Mysql"
+									title="Stop MySQL"
 									description="Are you sure you want to stop this mysql?"
 									onClick={async () => {
 										await stop({
 											mysqlId: mysqlId,
 										})
 											.then(() => {
-												toast.success("Mysql stopped successfully");
+												toast.success("MySQL stopped successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error stopping Mysql");
+												toast.error("Error stopping MySQL");
 											});
 									}}
 								>
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Stop
-										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -223,9 +222,23 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button variant="outline">
-								<Terminal />
-								Open Terminal
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MySQL container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

apps/dokploy/components/dashboard/mysql/update-mysql.tsx

@@ -119,7 +119,7 @@ export const UpdateMysql = ({ mysqlId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -108,6 +110,20 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link
+									href="/dashboard/settings/server"
+									className="text-primary"
+								>
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}

apps/dokploy/components/dashboard/postgres/general/show-general-postgres.tsx

@@ -8,15 +8,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import {
-	Ban,
-	CheckCircle2,
-	HelpCircle,
-	RefreshCcw,
-	Terminal,
-} from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -78,9 +72,9 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<TooltipProvider delayDuration={0}>
+						<TooltipProvider disableHoverableContent={false}>
 							<DialogAction
-								title="Deploy Postgres"
+								title="Deploy PostgreSQL"
 								description="Are you sure you want to deploy this postgres?"
 								type="default"
 								onClick={async () => {
@@ -92,12 +86,14 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -108,7 +104,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								</Button>
 							</DialogAction>
 							<DialogAction
-								title="Reload Postgres"
+								title="Reload PostgreSQL"
 								description="Are you sure you want to reload this postgres?"
 								type="default"
 								onClick={async () => {
@@ -117,24 +113,25 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Postgres reloaded successfully");
+											toast.success("PostgreSQL reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error reloading Postgres");
+											toast.error("Error reloading PostgreSQL");
 										});
 								}}
 							>
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Reload
-									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -146,7 +143,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 							</DialogAction>
 							{data?.applicationStatus === "idle" ? (
 								<DialogAction
-									title="Start Postgres"
+									title="Start PostgreSQL"
 									description="Are you sure you want to start this postgres?"
 									type="default"
 									onClick={async () => {
@@ -154,24 +151,25 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 											postgresId: postgresId,
 										})
 											.then(() => {
-												toast.success("Postgres started successfully");
+												toast.success("PostgreSQL started successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error starting Postgres");
+												toast.error("Error starting PostgreSQL");
 											});
 									}}
 								>
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Start
-										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -186,31 +184,32 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								</DialogAction>
 							) : (
 								<DialogAction
-									title="Stop Postgres"
+									title="Stop PostgreSQL"
 									description="Are you sure you want to stop this postgres?"
 									onClick={async () => {
 										await stop({
 											postgresId: postgresId,
 										})
 											.then(() => {
-												toast.success("Postgres stopped successfully");
+												toast.success("PostgreSQL stopped successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error stopping Postgres");
+												toast.error("Error stopping PostgreSQL");
 											});
 									}}
 								>
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Stop
-										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -226,9 +225,23 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button variant="outline">
-								<Terminal />
-								Open Terminal
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the PostgreSQL container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

apps/dokploy/components/dashboard/postgres/update-postgres.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
+import { PenBox } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -94,9 +94,9 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 				<Button
 					variant="ghost"
 					size="icon"
-					className="group hover:bg-blue-500/10 "
+					className="group hover:bg-blue-500/10 focus-visible:ring-2 focus-visible:ring-offset-2"
 				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+					<PenBox className="size-3.5 text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
@@ -121,7 +121,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />
@@ -151,6 +151,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 										isLoading={isLoading}
 										form="hook-form-update-postgres"
 										type="submit"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										Update
 									</Button>

apps/dokploy/components/dashboard/project/add-template.tsx

@@ -324,7 +324,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 											)}
 										>
 											<img
-												src={`${customBaseUrl || "https://dokploy.github.io/templates"}/blueprints/${template.id}/${template.logo}`}
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
 												className={cn(
 													"object-contain",
 													viewMode === "detailed" ? "size-24" : "size-16",

apps/dokploy/components/dashboard/projects/handle-project.tsx

@@ -148,7 +148,7 @@ export const HandleProject = ({ projectId }: Props) => {
 									<FormItem>
 										<FormLabel>Name</FormLabel>
 										<FormControl>
-											<Input placeholder="Tesla" {...field} />
+											<Input placeholder="Vandelay Industries" {...field} />
 										</FormControl>
 
 										<FormMessage />

apps/dokploy/components/dashboard/projects/show.tsx

@@ -115,7 +115,7 @@ export const ShowProjects = () => {
 											</span>
 										</div>
 									)}
-									<div className="w-full  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 flex-wrap gap-5">
+									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices =
 												project?.mariadb.length === 0 &&
@@ -186,7 +186,9 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span>{domain.host}</span>
+																										<span className="truncate">
+																											{domain.host}
+																										</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>
@@ -222,7 +224,9 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span>{domain.host}</span>
+																										<span className="truncate">
+																											{domain.host}
+																										</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>

apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -100,6 +102,20 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="flex w-full flex-col gap-4">
+						{!getIp && (
+							<AlertBlock type="warning">
+								You need to set an IP address in your{" "}
+								<Link
+									href="/dashboard/settings/server"
+									className="text-primary"
+								>
+									{data?.serverId
+										? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+										: "Web Server -> Server -> Update Server IP"}
+								</Link>{" "}
+								to fix the database url connection.
+							</AlertBlock>
+						)}
 						<Form {...form}>
 							<form
 								onSubmit={form.handleSubmit(onSubmit)}

apps/dokploy/components/dashboard/redis/general/show-general-redis.tsx

@@ -8,15 +8,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import {
-	Ban,
-	CheckCircle2,
-	HelpCircle,
-	RefreshCcw,
-	Terminal,
-} from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -91,12 +85,14 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -127,13 +123,14 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5"
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 								>
-									Reload
-									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -164,13 +161,14 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Start
-										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -203,13 +201,14 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5"
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
-										Stop
-										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -225,9 +224,23 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button variant="outline">
-								<Terminal />
-								Open Terminal
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the Redis container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

apps/dokploy/components/dashboard/redis/update-redis.tsx

@@ -119,7 +119,7 @@ export const UpdateRedis = ({ redisId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx

@@ -12,8 +12,13 @@ import { ExternalLink, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { AddManager } from "./manager/add-manager";
 import { AddWorker } from "./workers/add-worker";
+import { AlertBlock } from "@/components/shared/alert-block";
 
-export const AddNode = () => {
+interface Props {
+	serverId?: string;
+}
+
+export const AddNode = ({ serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -44,6 +49,10 @@ export const AddNode = () => {
 							Architecture
 							<ExternalLink className="h-4 w-4" />
 						</Link>
+						<AlertBlock type="warning">
+							Make sure you use the same architecture as the node you are
+							adding.
+						</AlertBlock>
 					</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-2">
@@ -52,11 +61,11 @@ export const AddNode = () => {
 							<TabsTrigger value="worker">Worker</TabsTrigger>
 							<TabsTrigger value="manager">Manager</TabsTrigger>
 						</TabsList>
-						<TabsContent value="worker" className="pt-4">
-							<AddWorker />
+						<TabsContent value="worker" className="pt-4 overflow-hidden">
+							<AddWorker serverId={serverId} />
 						</TabsContent>
-						<TabsContent value="manager" className="pt-4">
-							<AddManager />
+						<TabsContent value="manager" className="pt-4 overflow-hidden">
+							<AddManager serverId={serverId} />
 						</TabsContent>
 					</Tabs>
 				</div>

apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,60 +7,74 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
-export const AddManager = () => {
-	const { data } = api.cluster.addManager.useQuery();
+interface Props {
+	serverId?: string;
+}
+
+export const AddManager = ({ serverId }: Props) => {
+	const { data, isLoading, error, isError } = api.cluster.addManager.useQuery({
+		serverId,
+	});
 
 	return (
 		<>
-			<div>
-				<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
-					<DialogHeader>
-						<DialogTitle>Add a new manager</DialogTitle>
-						<DialogDescription>Add a new manager</DialogDescription>
-					</DialogHeader>
-					<div className="flex flex-col gap-2.5 text-sm">
-						<span>1. Go to your new server and run the following command</span>
-						<span className="bg-muted rounded-lg p-2 flex justify-between">
-							curl https://get.docker.com | sh -s -- --version {data?.version}
-							<button
-								type="button"
-								className="self-center"
-								onClick={() => {
-									copy(
-										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-									);
-									toast.success("Copied to clipboard");
-								}}
-							>
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
-							</button>
-						</span>
-					</div>
+			<CardContent className="sm:max-w-4xl  flex flex-col gap-4 px-0">
+				<DialogHeader>
+					<DialogTitle>Add a new manager</DialogTitle>
+					<DialogDescription>Add a new manager</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				{isLoading ? (
+					<Loader2 className="w-full animate-spin text-muted-foreground" />
+				) : (
+					<>
+						<div className="flex flex-col gap-2.5 text-sm">
+							<span>
+								1. Go to your new server and run the following command
+							</span>
+							<span className="bg-muted rounded-lg p-2 flex justify-between">
+								curl https://get.docker.com | sh -s -- --version {data?.version}
+								<button
+									type="button"
+									className="self-center"
+									onClick={() => {
+										copy(
+											`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+										);
+										toast.success("Copied to clipboard");
+									}}
+								>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
+								</button>
+							</span>
+						</div>
 
-					<div className="flex flex-col gap-2.5 text-sm">
-						<span>
-							2. Run the following command to add the node(manager) to your
-							cluster
-						</span>
-						<span className="bg-muted rounded-lg p-2  flex">
-							{data?.command}
-							<button
-								type="button"
-								className="self-start"
-								onClick={() => {
-									copy(data?.command || "");
-									toast.success("Copied to clipboard");
-								}}
-							>
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
-							</button>
-						</span>
-					</div>
-				</CardContent>
-			</div>
+						<div className="flex flex-col gap-2.5 text-sm">
+							<span>
+								2. Run the following command to add the node(manager) to your
+								cluster
+							</span>
+
+							<span className="bg-muted rounded-lg p-2  flex">
+								{data?.command}
+								<button
+									type="button"
+									className="self-start"
+									onClick={() => {
+										copy(data?.command || "");
+										toast.success("Copied to clipboard");
+									}}
+								>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
+								</button>
+							</span>
+						</div>
+					</>
+				)}
+			</CardContent>
 		</>
 	);
 };

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx

@@ -0,0 +1,30 @@
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { ShowNodes } from "./show-nodes";
+
+interface Props {
+	serverId: string;
+}
+
+export const ShowNodesModal = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Swarm Nodes
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">
+				<div className="grid w-full gap-1">
+					<ShowNodes serverId={serverId} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes.tsx

@@ -32,13 +32,25 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Boxes, HelpCircle, LockIcon, MoreHorizontal } from "lucide-react";
+import {
+	Boxes,
+	HelpCircle,
+	LockIcon,
+	MoreHorizontal,
+	Loader2,
+} from "lucide-react";
 import { toast } from "sonner";
 import { AddNode } from "./add-node";
 import { ShowNodeData } from "./show-node-data";
 
-export const ShowNodes = () => {
-	const { data, isLoading, refetch } = api.cluster.getNodes.useQuery();
+interface Props {
+	serverId?: string;
+}
+
+export const ShowNodes = ({ serverId }: Props) => {
+	const { data, isLoading, refetch } = api.cluster.getNodes.useQuery({
+		serverId,
+	});
 	const { data: registry } = api.registry.all.useQuery();
 
 	const { mutateAsync: deleteNode } = api.cluster.removeWorker.useMutation();
@@ -58,14 +70,17 @@ export const ShowNodes = () => {
 						</div>
 						{haveAtLeastOneRegistry && (
 							<div className="flex flex-row gap-2">
-								<AddNode />
+								<AddNode serverId={serverId} />
 							</div>
 						)}
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t min-h-[35vh]">
-						{haveAtLeastOneRegistry ? (
+						{isLoading ? (
+							<div className="flex items-center justify-center w-full h-[40vh]">
+								<Loader2 className="size-8 animate-spin text-muted-foreground" />
+							</div>
+						) : haveAtLeastOneRegistry ? (
 							<div className="grid md:grid-cols-1 gap-4">
-								{isLoading && <div>Loading...</div>}
 								<Table>
 									<TableCaption>
 										A list of your managers / workers.
@@ -129,7 +144,7 @@ export const ShowNodes = () => {
 															<DropdownMenuContent align="end">
 																<DropdownMenuLabel>Actions</DropdownMenuLabel>
 																<ShowNodeData data={node} />
-																{node?.ManagerStatus?.Leader && (
+																{!node?.ManagerStatus?.Leader && (
 																	<DialogAction
 																		title="Delete Node"
 																		description="Are you sure you want to delete this node from the cluster?"
@@ -137,6 +152,7 @@ export const ShowNodes = () => {
 																		onClick={async () => {
 																			await deleteNode({
 																				nodeId: node.ID,
+																				serverId,
 																			})
 																				.then(() => {
 																					refetch();

apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,58 +7,70 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
-export const AddWorker = () => {
-	const { data } = api.cluster.addWorker.useQuery();
+interface Props {
+	serverId?: string;
+}
+
+export const AddWorker = ({ serverId }: Props) => {
+	const { data, isLoading, error, isError } = api.cluster.addWorker.useQuery({
+		serverId,
+	});
 
 	return (
-		<div>
-			<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
-				<DialogHeader>
-					<DialogTitle>Add a new worker</DialogTitle>
-					<DialogDescription>Add a new worker</DialogDescription>
-				</DialogHeader>
-				<div className="flex flex-col gap-2.5 text-sm">
-					<span>1. Go to your new server and run the following command</span>
-					<span className="bg-muted rounded-lg p-2 flex justify-between">
-						curl https://get.docker.com | sh -s -- --version {data?.version}
-						<button
-							type="button"
-							className="self-center"
-							onClick={() => {
-								copy(
-									`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-								);
-								toast.success("Copied to clipboard");
-							}}
-						>
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</button>
-					</span>
-				</div>
+		<CardContent className="sm:max-w-4xl   flex flex-col gap-4 px-0">
+			<DialogHeader>
+				<DialogTitle>Add a new worker</DialogTitle>
+				<DialogDescription>Add a new worker</DialogDescription>
+			</DialogHeader>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+			{isLoading ? (
+				<Loader2 className="w-full animate-spin text-muted-foreground" />
+			) : (
+				<>
+					<div className="flex flex-col gap-2.5 text-sm">
+						<span>1. Go to your new server and run the following command</span>
+						<span className="bg-muted rounded-lg p-2 flex justify-between">
+							curl https://get.docker.com | sh -s -- --version {data?.version}
+							<button
+								type="button"
+								className="self-center"
+								onClick={() => {
+									copy(
+										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+									);
+									toast.success("Copied to clipboard");
+								}}
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
 
-				<div className="flex flex-col gap-2.5 text-sm">
-					<span>
-						2. Run the following command to add the node(worker) to your cluster
-					</span>
+					<div className="flex flex-col gap-2.5 text-sm">
+						<span>
+							2. Run the following command to add the node(worker) to your
+							cluster
+						</span>
 
-					<span className="bg-muted rounded-lg p-2  flex">
-						{data?.command}
-						<button
-							type="button"
-							className="self-start"
-							onClick={() => {
-								copy(data?.command || "");
-								toast.success("Copied to clipboard");
-							}}
-						>
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</button>
-					</span>
-				</div>
-			</CardContent>
-		</div>
+						<span className="bg-muted rounded-lg p-2  flex">
+							{data?.command}
+							<button
+								type="button"
+								className="self-start"
+								onClick={() => {
+									copy(data?.command || "");
+									toast.success("Copied to clipboard");
+								}}
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
+				</>
+			)}
+		</CardContent>
 	);
 };

apps/dokploy/components/dashboard/settings/notifications/handle-notifications.tsx

@@ -663,13 +663,16 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 																{...field}
 																onChange={(e) => {
 																	const value = e.target.value;
-																	if (value) {
+																	if (value === "") {
+																		field.onChange(undefined);
+																	} else {
 																		const port = Number.parseInt(value);
 																		if (port > 0 && port < 65536) {
 																			field.onChange(port);
 																		}
 																	}
 																}}
+																value={field.value || ""}
 																type="number"
 															/>
 														</FormControl>

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -64,12 +64,12 @@ export const Enable2FA = () => {
 	const handlePasswordSubmit = async (formData: PasswordForm) => {
 		setIsPasswordLoading(true);
 		try {
-			const { data: enableData } = await authClient.twoFactor.enable({
+			const { data: enableData, error } = await authClient.twoFactor.enable({
 				password: formData.password,
 			});
 
 			if (!enableData) {
-				throw new Error("No data received from server");
+				throw new Error(error?.message || "Error enabling 2FA");
 			}
 
 			if (enableData.backupCodes) {
@@ -95,7 +95,8 @@ export const Enable2FA = () => {
 				error instanceof Error ? error.message : "Error setting up 2FA",
 			);
 			passwordForm.setError("password", {
-				message: "Error verifying password",
+				message:
+					error instanceof Error ? error.message : "Error setting up 2FA",
 			});
 		} finally {
 			setIsPasswordLoading(false);

apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx

@@ -59,9 +59,7 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 								.then(async () => {
 									toast.success("Traefik Reloaded");
 								})
-								.catch(() => {
-									toast.error("Error reloading Traefik");
-								});
+								.catch(() => {});
 						}}
 						className="cursor-pointer"
 					>

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -42,6 +42,7 @@ import { ShowMonitoringModal } from "./show-monitoring-modal";
 import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
+import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 
 export const ShowServers = () => {
 	const { t } = useTranslation("settings");
@@ -328,6 +329,9 @@ export const ShowServers = () => {
 																						<ShowSwarmOverviewModal
 																							serverId={server.serverId}
 																						/>
+																						<ShowNodesModal
+																							serverId={server.serverId}
+																						/>
 																					</>
 																				)}
 																			</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx

@@ -112,15 +112,17 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 				toast.error("Error generating the SSH Key");
 			});
 
-	const downloadKey = (
-		content: string,
-		defaultFilename: string,
-		keyType: "private" | "public",
-	) => {
+	const downloadKey = (content: string, keyType: "private" | "public") => {
 		const keyName = form.watch("name");
+		const publicKey = form.watch("publicKey");
+
+		// Extract algorithm type from public key
+		const isEd25519 = publicKey.startsWith("ssh-ed25519");
+		const defaultName = isEd25519 ? "id_ed25519" : "id_rsa";
+
 		const filename = keyName
-			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultFilename}`
-			: `${keyType}_${defaultFilename}`;
+			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultName}${keyType === "public" ? ".pub" : ""}`
+			: `${defaultName}${keyType === "public" ? ".pub" : ""}`;
 		const blob = new Blob([content], { type: "text/plain" });
 		const url = window.URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -273,7 +275,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 										variant="outline"
 										size="default"
 										onClick={() =>
-											downloadKey(form.watch("privateKey"), "id_rsa", "private")
+											downloadKey(form.watch("privateKey"), "private")
 										}
 										className="flex items-center gap-2"
 									>
@@ -287,11 +289,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 										variant="outline"
 										size="default"
 										onClick={() =>
-											downloadKey(
-												form.watch("publicKey"),
-												"id_rsa.pub",
-												"public",
-											)
+											downloadKey(form.watch("publicKey"), "public")
 										}
 										className="flex items-center gap-2"
 									>

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -23,6 +24,7 @@ import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { badgeStateColor } from "../../application/logs/show";
 
 const Terminal = dynamic(
 	() =>
@@ -109,7 +111,10 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}) {container.state}
+									{container.name} ({container.containerId}){" "}
+									<Badge variant={badgeStateColor(container.state)}>
+										{container.state}
+									</Badge>
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -19,13 +19,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
@@ -44,7 +37,6 @@ interface Props {
 const PortSchema = z.object({
 	targetPort: z.number().min(1, "Target port is required"),
 	publishedPort: z.number().min(1, "Published port is required"),
-	publishMode: z.enum(["ingress", "host"]),
 });
 
 const TraefikPortsSchema = z.object({
@@ -88,7 +80,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 	}, [currentPorts, form]);
 
 	const handleAddPort = () => {
-		append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
+		append({ targetPort: 0, publishedPort: 0 });
 	};
 
 	const onSubmit = async (data: TraefikPortsForm) => {
@@ -99,9 +91,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 			});
 			toast.success(t("settings.server.webServer.traefik.portsUpdated"));
 			setOpen(false);
-		} catch (_error) {
-			toast.error(t("settings.server.webServer.traefik.portsUpdateError"));
-		}
+		} catch (_error) {}
 	};
 
 	return (
@@ -154,7 +144,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
 												<Card key={field.id}>
-													<CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
+													<CardContent className="grid grid-cols-[1fr_1fr_auto] gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -169,9 +159,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
-																				field.onChange(Number(e.target.value))
-																			}
+																			onChange={(e) => {
+																				const value = e.target.value;
+																				field.onChange(
+																					value === ""
+																						? undefined
+																						: Number(value),
+																				);
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 8080"
 																		/>
@@ -195,9 +191,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
-																				field.onChange(Number(e.target.value))
-																			}
+																			onChange={(e) => {
+																				const value = e.target.value;
+																				field.onChange(
+																					value === ""
+																						? undefined
+																						: Number(value),
+																				);
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 80"
 																		/>
@@ -207,39 +209,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 															)}
 														/>
 
-														<FormField
-															control={form.control}
-															name={`ports.${index}.publishMode`}
-															render={({ field }) => (
-																<FormItem>
-																	<FormLabel className="text-sm font-medium text-muted-foreground">
-																		{t(
-																			"settings.server.webServer.traefik.publishMode",
-																		)}
-																	</FormLabel>
-																	<Select
-																		onValueChange={field.onChange}
-																		value={field.value}
-																	>
-																		<FormControl>
-																			<SelectTrigger className="dark:bg-black">
-																				<SelectValue />
-																			</SelectTrigger>
-																		</FormControl>
-																		<SelectContent>
-																			<SelectItem value="host">
-																				Host Mode
-																			</SelectItem>
-																			<SelectItem value="ingress">
-																				Ingress Mode
-																			</SelectItem>
-																		</SelectContent>
-																	</Select>
-																	<FormMessage />
-																</FormItem>
-															)}
-														/>
-
 														<div className="flex items-end">
 															<Button
 																onClick={() => remove(index)}
@@ -263,30 +232,23 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 											<span className="text-sm">
 												<strong>
 													Each port mapping defines how external traffic reaches
-													your containers.
+													your containers through Traefik.
 												</strong>
 												<ul className="pt-2">
 													<li>
-														<strong>Host Mode:</strong> Directly binds the port
-														to the host machine.
-														<ul className="p-2 list-inside list-disc">
-															<li>
-																Best for single-node deployments or when you
-																need guaranteed port availability.
-															</li>
-														</ul>
+														<strong>Target Port:</strong> The port inside your
+														container that the service is listening on.
 													</li>
 													<li>
-														<strong>Ingress Mode:</strong> Routes through Docker
-														Swarm's load balancer.
-														<ul className="p-2 list-inside list-disc">
-															<li>
-																Recommended for multi-node deployments and
-																better scalability.
-															</li>
-														</ul>
+														<strong>Published Port:</strong> The port on your
+														host machine that will be mapped to the target port.
 													</li>
 												</ul>
+												<p className="mt-2">
+													All ports are bound directly to the host machine,
+													allowing Traefik to handle incoming traffic and route
+													it appropriately to your services.
+												</p>
 											</span>
 										</div>
 									</AlertBlock>

apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx

@@ -21,6 +21,8 @@ import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { badgeStateColor } from "../../application/logs/show";
+import { Badge } from "@/components/ui/badge";
 
 export const DockerLogsId = dynamic(
 	() =>
@@ -90,7 +92,10 @@ export const ShowModalLogs = ({
 										key={container.containerId}
 										value={container.containerId}
 									>
-										{container.name} ({container.containerId}) {container.state}
+										{container.name} ({container.containerId}){" "}
+										<Badge variant={badgeStateColor(container.state)}>
+											{container.state}
+										</Badge>
 									</SelectItem>
 								))}
 								<SelectLabel>Containers ({data?.length})</SelectLabel>

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -176,7 +176,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 					</Card>
 				</div>
 
-				<div className="flex flex-row gap-4">
+				<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
 					{nodes.map((node) => (
 						<NodeCard key={node.ID} node={node} serverId={serverId} />
 					))}

apps/dokploy/components/layouts/side.tsx

@@ -908,7 +908,7 @@ export default function Page({ children }: Props) {
 					</SidebarGroup>
 					<SidebarGroup>
 						<SidebarGroupLabel>Settings</SidebarGroupLabel>
-						<SidebarMenu className="gap-2">
+						<SidebarMenu className="gap-1">
 							{filteredSettings.map((item) => {
 								const isSingle = item.isSingle !== false;
 								const isActive = isSingle
@@ -1068,7 +1068,7 @@ export default function Page({ children }: Props) {
 					</header>
 				)}
 
-				<div className="flex flex-col w-full gap-4 p-4 pt-0">{children}</div>
+				<div className="flex flex-col w-full p-4 pt-0">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -37,7 +37,9 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 											)}
 										</BreadcrumbLink>
 									</BreadcrumbItem>
-									{_index + 1 < list.length && <BreadcrumbSeparator className="block" />}
+									{_index + 1 < list.length && (
+										<BreadcrumbSeparator className="block" />
+									)}
 								</Fragment>
 							))}
 						</BreadcrumbList>

apps/dokploy/drizzle/0078_uneven_omega_sentinel.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" ADD COLUMN "cleanCache" boolean DEFAULT false;

apps/dokploy/drizzle/meta/_journal.json

@@ -547,6 +547,13 @@
       "when": 1741510086231,
       "tag": "0077_chemical_dreadnoughts",
       "breakpoints": true
+    },
+    {
+      "idx": 78,
+      "version": "7",
+      "when": 1742112194375,
+      "tag": "0078_uneven_omega_sentinel",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/middleware.ts

@@ -1,32 +0,0 @@
-// middleware.ts
-import { verifyRequestOrigin } from "lucia";
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-export async function middleware(request: NextRequest): Promise<NextResponse> {
-	if (request.method === "GET") {
-		return NextResponse.next();
-	}
-	const originHeader = request.headers.get("Origin");
-	const hostHeader = request.headers.get("Host");
-
-	if (
-		!originHeader ||
-		!hostHeader ||
-		!verifyRequestOrigin(originHeader, [hostHeader])
-	) {
-		return new NextResponse(null, {
-			status: 403,
-		});
-	}
-	return NextResponse.next();
-}
-
-export const config = {
-	matcher: [
-		// Don't handle HMR requests for the dev server we rewrite to
-		"/settings",
-		"/dashboard/(.*)",
-		"/invitation",
-	],
-};

apps/dokploy/next.config.mjs

@@ -5,23 +5,23 @@
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  transpilePackages: ["@dokploy/server"],
-  /**
-   * If you are using `appDir` then you must comment the below `i18n` config out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
+	reactStrictMode: true,
+	eslint: {
+		ignoreDuringBuilds: true,
+	},
+	typescript: {
+		ignoreBuildErrors: true,
+	},
+	transpilePackages: ["@dokploy/server"],
+	/**
+	 * If you are using `appDir` then you must comment the below `i18n` config out.
+	 *
+	 * @see https://github.com/vercel/next.js/issues/41980
+	 */
+	i18n: {
+		locales: ["en"],
+		defaultLocale: "en",
+	},
 };
 
 export default nextConfig;

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.20.0",
+	"version": "v0.20.8",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -53,7 +53,6 @@
 		"@dokploy/trpc-openapi": "0.0.4",
 		"@faker-js/faker": "^8.4.1",
 		"@hookform/resolvers": "^3.9.0",
-		"@lucia-auth/adapter-drizzle": "1.0.7",
 		"@octokit/auth-app": "^6.0.4",
 		"@octokit/webhooks": "^13.2.7",
 		"@radix-ui/react-accordion": "1.1.2",
@@ -93,7 +92,7 @@
 		"adm-zip": "^0.5.14",
 		"ai": "^4.0.23",
 		"bcrypt": "5.1.1",
-		"better-auth": "1.2.0",
+		"better-auth": "1.2.4",
 		"bl": "6.0.11",
 		"boxen": "^7.1.1",
 		"bullmq": "5.4.2",
@@ -113,11 +112,10 @@
 		"js-cookie": "^3.0.5",
 		"js-yaml": "4.1.0",
 		"lodash": "4.17.21",
-		"lucia": "^3.0.1",
 		"lucide-react": "^0.469.0",
 		"micromatch": "4.0.8",
 		"nanoid": "3",
-		"next": "^15.0.1",
+		"next": "^15.2.4",
 		"next-i18next": "^15.3.1",
 		"next-themes": "^0.2.1",
 		"node-os-utils": "1.3.7",

apps/dokploy/pages/api/deploy/github.ts

@@ -93,6 +93,7 @@ export default async function handler(
 		try {
 			const branchName = githubBody?.ref?.replace("refs/heads/", "");
 			const repository = githubBody?.repository?.name;
+
 			const deploymentTitle = extractCommitMessage(req.headers, req.body);
 			const deploymentHash = extractHash(req.headers, req.body);
 			const owner = githubBody?.repository?.owner?.name;
@@ -107,6 +108,7 @@ export default async function handler(
 					eq(applications.branch, branchName),
 					eq(applications.repository, repository),
 					eq(applications.owner, owner),
+					eq(applications.githubId, githubResult.githubId),
 				),
 			});
 
@@ -151,6 +153,7 @@ export default async function handler(
 					eq(compose.branch, branchName),
 					eq(compose.repository, repository),
 					eq(compose.owner, owner),
+					eq(compose.githubId, githubResult.githubId),
 				),
 			});
 
@@ -240,6 +243,7 @@ export default async function handler(
 					eq(applications.branch, branch),
 					eq(applications.isPreviewDeploymentsActive, true),
 					eq(applications.owner, owner),
+					eq(applications.githubId, githubResult.githubId),
 				),
 				with: {
 					previewDeployments: true,

apps/dokploy/public/locales/en/settings.json

@@ -1,6 +1,6 @@
 {
 	"settings.common.save": "Save",
-	"settings.common.enterTerminal": "Enter the terminal",
+	"settings.common.enterTerminal": "Terminal",
 	"settings.server.domain.title": "Server Domain",
 	"settings.server.domain.description": "Add a domain to your server application.",
 	"settings.server.domain.form.domain": "Domain",
@@ -14,7 +14,7 @@
 	"settings.server.webServer.description": "Reload or clean the web server.",
 	"settings.server.webServer.actions": "Actions",
 	"settings.server.webServer.reload": "Reload",
-	"settings.server.webServer.watchLogs": "Watch logs",
+	"settings.server.webServer.watchLogs": "View Logs",
 	"settings.server.webServer.updateServerIp": "Update Server IP",
 	"settings.server.webServer.server.label": "Server",
 	"settings.server.webServer.traefik.label": "Traefik",

apps/dokploy/server/api/root.ts

@@ -1,4 +1,3 @@
-import { authRouter } from "@/server/api/routers/auth";
 import { createTRPCRouter } from "../api/trpc";
 import { adminRouter } from "./routers/admin";
 import { aiRouter } from "./routers/ai";
@@ -44,7 +43,6 @@ import { userRouter } from "./routers/user";
 export const appRouter = createTRPCRouter({
 	admin: adminRouter,
 	docker: dockerRouter,
-	auth: authRouter,
 	project: projectRouter,
 	application: applicationRouter,
 	mysql: mysqlRouter,

apps/dokploy/server/api/routers/auth.ts

@@ -1,326 +0,0 @@
-import { createTRPCRouter } from "../trpc";
-
-export const authRouter = createTRPCRouter({
-	// createAdmin: publicProcedure.mutation(async ({ input }) => {
-	// 	try {
-	// 		if (!IS_CLOUD) {
-	// 			const admin = await db.query.admins.findFirst({});
-	// 			if (admin) {
-	// 				throw new TRPCError({
-	// 					code: "BAD_REQUEST",
-	// 					message: "Admin already exists",
-	// 				});
-	// 			}
-	// 		}
-	// 		const newAdmin = await createAdmin(input);
-	// 		if (IS_CLOUD) {
-	// 			await sendDiscordNotificationWelcome(newAdmin);
-	// 			await sendVerificationEmail(newAdmin.id);
-	// 			return {
-	// 				status: "success",
-	// 				type: "cloud",
-	// 			};
-	// 		}
-	// 		// const session = await lucia.createSession(newAdmin.id || "", {});
-	// 		// ctx.res.appendHeader(
-	// 		// 	"Set-Cookie",
-	// 		// 	lucia.createSessionCookie(session.id).serialize(),
-	// 		// );
-	// 		return {
-	// 			status: "success",
-	// 			type: "selfhosted",
-	// 		};
-	// 	} catch (error) {
-	// 		throw new TRPCError({
-	// 			code: "BAD_REQUEST",
-	// 			// @ts-ignore
-	// 			message: `Error: ${error?.code === "23505" ? "Email already exists" : "Error creating admin"}`,
-	// 			cause: error,
-	// 		});
-	// 	}
-	// }),
-	// createUser: publicProcedure.mutation(async ({ input }) => {
-	// 	try {
-	// 		const _token = await getUserByToken(input.token);
-	// 		// if (token.isExpired) {
-	// 		// 	throw new TRPCError({
-	// 		// 		code: "BAD_REQUEST",
-	// 		// 		message: "Invalid token",
-	// 		// 	});
-	// 		// }
-	// 		// const newUser = await createUser(input);
-	// 		// if (IS_CLOUD) {
-	// 		// 	await sendVerificationEmail(token.authId);
-	// 		// 	return true;
-	// 		// }
-	// 		// const session = await lucia.createSession(newUser?.authId || "", {});
-	// 		// ctx.res.appendHeader(
-	// 		// 	"Set-Cookie",
-	// 		// 	lucia.createSessionCookie(session.id).serialize(),
-	// 		// );
-	// 		return true;
-	// 	} catch (error) {
-	// 		throw new TRPCError({
-	// 			code: "BAD_REQUEST",
-	// 			message: "Error creating the user",
-	// 			cause: error,
-	// 		});
-	// 	}
-	// }),
-	// login: publicProcedure.mutation(async ({ input }) => {
-	// 	try {
-	// 		const auth = await findAuthByEmail(input.email);
-	// 		const correctPassword = bcrypt.compareSync(
-	// 			input.password,
-	// 			auth?.password || "",
-	// 		);
-	// 		if (!correctPassword) {
-	// 			throw new TRPCError({
-	// 				code: "BAD_REQUEST",
-	// 				message: "Credentials do not match",
-	// 			});
-	// 		}
-	// 		if (auth?.confirmationToken && IS_CLOUD) {
-	// 			await sendVerificationEmail(auth.id);
-	// 			throw new TRPCError({
-	// 				code: "BAD_REQUEST",
-	// 				message:
-	// 					"Email not confirmed, we have sent you a confirmation email please check your inbox.",
-	// 			});
-	// 		}
-	// 		if (auth?.is2FAEnabled) {
-	// 			return {
-	// 				is2FAEnabled: true,
-	// 				authId: auth.id,
-	// 			};
-	// 		}
-	// 		// const session = await lucia.createSession(auth?.id || "", {});
-	// 		// ctx.res.appendHeader(
-	// 		// 	"Set-Cookie",
-	// 		// 	lucia.createSessionCookie(session.id).serialize(),
-	// 		// );
-	// 		return {
-	// 			is2FAEnabled: false,
-	// 			authId: auth?.id,
-	// 		};
-	// 	} catch (error) {
-	// 		throw new TRPCError({
-	// 			code: "BAD_REQUEST",
-	// 			message: `Error: ${error instanceof Error ? error.message : "Login error"}`,
-	// 			cause: error,
-	// 		});
-	// 	}
-	// }),
-	// get: protectedProcedure.query(async ({ ctx }) => {
-	// 	const memberResult = await db.query.member.findFirst({
-	// 		where: and(
-	// 			eq(member.userId, ctx.user.id),
-	// 			eq(member.organizationId, ctx.session?.activeOrganizationId || ""),
-	// 		),
-	// 		with: {
-	// 			user: true,
-	// 		},
-	// 	});
-	// 	return memberResult;
-	// }),
-	// logout: protectedProcedure.mutation(async ({ ctx }) => {
-	// 	const { req } = ctx;
-	// 	const { session } = await validateRequest(req);
-	// 	if (!session) return false;
-	// 	// await lucia.invalidateSession(session.id);
-	// 	// res.setHeader("Set-Cookie", lucia.createBlankSessionCookie().serialize());
-	// 	return true;
-	// }),
-	// update: protectedProcedure.mutation(async ({ ctx, input }) => {
-	// 	const currentAuth = await findAuthByEmail(ctx.user.email);
-	// 	if (input.currentPassword || input.password) {
-	// 		const correctPassword = bcrypt.compareSync(
-	// 			input.currentPassword || "",
-	// 			currentAuth?.password || "",
-	// 		);
-	// 		if (!correctPassword) {
-	// 			throw new TRPCError({
-	// 				code: "BAD_REQUEST",
-	// 				message: "Current password is incorrect",
-	// 			});
-	// 		}
-	// 	}
-	// 	// const auth = await updateAuthById(ctx.user.authId, {
-	// 	// 	...(input.email && { email: input.email.toLowerCase() }),
-	// 	// 	...(input.password && {
-	// 	// 		password: bcrypt.hashSync(input.password, 10),
-	// 	// 	}),
-	// 	// 	...(input.image && { image: input.image }),
-	// 	// });
-	// 	return auth;
-	// }),
-	// removeSelfAccount: protectedProcedure
-	// 	.input(
-	// 		z.object({
-	// 			password: z.string().min(1),
-	// 		}),
-	// 	)
-	// 	.mutation(async ({ ctx, input }) => {
-	// 		if (!IS_CLOUD) {
-	// 			throw new TRPCError({
-	// 				code: "NOT_FOUND",
-	// 				message: "This feature is only available in the cloud version",
-	// 			});
-	// 		}
-	// 		const currentAuth = await findAuthByEmail(ctx.user.email);
-	// 		const correctPassword = bcrypt.compareSync(
-	// 			input.password,
-	// 			currentAuth?.password || "",
-	// 		);
-	// 		if (!correctPassword) {
-	// 			throw new TRPCError({
-	// 				code: "BAD_REQUEST",
-	// 				message: "Password is incorrect",
-	// 			});
-	// 		}
-	// 		const { req } = ctx;
-	// 		const { session } = await validateRequest(req);
-	// 		if (!session) return false;
-	// 		// await lucia.invalidateSession(session.id);
-	// 		// res.setHeader("Set-Cookie", lucia.createBlankSessionCookie().serialize());
-	// 		// if (ctx.user.rol === "owner") {
-	// 		// 	await removeAdminByAuthId(ctx.user.authId);
-	// 		// } else {
-	// 		// 	await removeUserByAuthId(ctx.user.authId);
-	// 		// }
-	// 		return true;
-	// 	}),
-	// generateToken: protectedProcedure.mutation(async ({ ctx }) => {
-	// 	const auth = await findUserById(ctx.user.id);
-	// 	console.log(auth);
-	// 	// if (auth.token) {
-	// 	// 	await luciaToken.invalidateSession(auth.token);
-	// 	// }
-	// 	// const session = await luciaToken.createSession(auth?.id || "", {
-	// 	// 	expiresIn: 60 * 60 * 24 * 30,
-	// 	// });
-	// 	// await updateUser(auth.id, {
-	// 	// 	token: session.id,
-	// 	// });
-	// 	return auth;
-	// }),
-	// verifyToken: protectedProcedure.mutation(async () => {
-	// 	return true;
-	// }),
-	// one: adminProcedure
-	// 	.input(z.object({ userId: z.string().min(1) }))
-	// 	.query(async ({ input }) => {
-	// 		// TODO: Check if the user is admin or member
-	// 		const user = await findUserById(input.userId);
-	// 		return user;
-	// 	}),
-	// sendResetPasswordEmail: publicProcedure
-	// 	.input(
-	// 		z.object({
-	// 			email: z.string().min(1).email(),
-	// 		}),
-	// 	)
-	// 	.mutation(async ({ input }) => {
-	// 		if (!IS_CLOUD) {
-	// 			throw new TRPCError({
-	// 				code: "NOT_FOUND",
-	// 				message: "This feature is only available in the cloud version",
-	// 			});
-	// 		}
-	// 		const authR = await db.query.auth.findFirst({
-	// 			where: eq(auth.email, input.email),
-	// 		});
-	// 		if (!authR) {
-	// 			throw new TRPCError({
-	// 				code: "NOT_FOUND",
-	// 				message: "User not found",
-	// 			});
-	// 		}
-	// 		const token = nanoid();
-	// 		await updateAuthById(authR.id, {
-	// 			resetPasswordToken: token,
-	// 			// Make resetPassword in 24 hours
-	// 			resetPasswordExpiresAt: new Date(
-	// 				new Date().getTime() + 24 * 60 * 60 * 1000,
-	// 			).toISOString(),
-	// 		});
-	// 		await sendEmailNotification(
-	// 			{
-	// 				fromAddress: process.env.SMTP_FROM_ADDRESS!,
-	// 				toAddresses: [authR.email],
-	// 				smtpServer: process.env.SMTP_SERVER!,
-	// 				smtpPort: Number(process.env.SMTP_PORT),
-	// 				username: process.env.SMTP_USERNAME!,
-	// 				password: process.env.SMTP_PASSWORD!,
-	// 			},
-	// 			"Reset Password",
-	// 			`
-	// 			Reset your password by clicking the link below:
-	// 			The link will expire in 24 hours.
-	// 			<a href="${WEBSITE_URL}/reset-password?token=${token}">
-	// 				Reset Password
-	// 			</a>
-	// 		`,
-	// 		);
-	// 	}),
-});
-
-// export const sendVerificationEmail = async (authId: string) => {
-// 	const token = nanoid();
-// 	const result = await updateAuthById(authId, {
-// 		confirmationToken: token,
-// 		confirmationExpiresAt: new Date(
-// 			new Date().getTime() + 24 * 60 * 60 * 1000,
-// 		).toISOString(),
-// 	});
-
-// 	if (!result) {
-// 		throw new TRPCError({
-// 			code: "BAD_REQUEST",
-// 			message: "User not found",
-// 		});
-// 	}
-// 	await sendEmailNotification(
-// 		{
-// 			fromAddress: process.env.SMTP_FROM_ADDRESS || "",
-// 			toAddresses: [result?.email],
-// 			smtpServer: process.env.SMTP_SERVER || "",
-// 			smtpPort: Number(process.env.SMTP_PORT),
-// 			username: process.env.SMTP_USERNAME || "",
-// 			password: process.env.SMTP_PASSWORD || "",
-// 		},
-// 		"Confirm your email | Dokploy",
-// 		`
-// 		Welcome to Dokploy!
-// 		Please confirm your email by clicking the link below:
-// 		<a href="${WEBSITE_URL}/confirm-email?token=${result?.confirmationToken}">
-// 			Confirm Email
-// 		</a>
-// 	`,
-// 	);
-
-// 	return true;
-// };
-
-// export const sendDiscordNotificationWelcome = async (newAdmin: Auth) => {
-// 	await sendDiscordNotification(
-// 		{
-// 			webhookUrl: process.env.DISCORD_WEBHOOK_URL || "",
-// 		},
-// 		{
-// 			title: "New User Registered",
-// 			color: 0x00ff00,
-// 			fields: [
-// 				{
-// 					name: "Email",
-// 					value: newAdmin.email,
-// 					inline: true,
-// 				},
-// 			],
-// 			timestamp: newAdmin.createdAt,
-// 			footer: {
-// 				text: "Dokploy User Registration Notification",
-// 			},
-// 		},
-// 	);
-// };

apps/dokploy/server/api/routers/backup.ts

@@ -11,9 +11,13 @@ import {
 	createBackup,
 	findBackupById,
 	findMariadbByBackupId,
+	findMariadbById,
 	findMongoByBackupId,
+	findMongoById,
 	findMySqlByBackupId,
+	findMySqlById,
 	findPostgresByBackupId,
+	findPostgresById,
 	findServerById,
 	removeBackupById,
 	removeScheduleBackup,
@@ -26,6 +30,20 @@ import {
 } from "@dokploy/server";
 
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import {
+	execAsync,
+	execAsyncRemote,
+} from "@dokploy/server/utils/process/execAsync";
+import { getS3Credentials } from "@dokploy/server/utils/backups/utils";
+import { findDestinationById } from "@dokploy/server/services/destination";
+import {
+	restoreMariadbBackup,
+	restoreMongoBackup,
+	restoreMySqlBackup,
+	restorePostgresBackup,
+} from "@dokploy/server/utils/restore";
+import { observable } from "@trpc/server/observable";
 
 export const backupRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -209,27 +227,146 @@ export const backupRouter = createTRPCRouter({
 				});
 			}
 		}),
+	listBackupFiles: protectedProcedure
+		.input(
+			z.object({
+				destinationId: z.string(),
+				search: z.string(),
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			try {
+				const destination = await findDestinationById(input.destinationId);
+				const rcloneFlags = getS3Credentials(destination);
+				const bucketPath = `:s3:${destination.bucket}`;
+
+				const lastSlashIndex = input.search.lastIndexOf("/");
+				const baseDir =
+					lastSlashIndex !== -1
+						? input.search.slice(0, lastSlashIndex + 1)
+						: "";
+				const searchTerm =
+					lastSlashIndex !== -1
+						? input.search.slice(lastSlashIndex + 1)
+						: input.search;
+
+				const searchPath = baseDir ? `${bucketPath}/${baseDir}` : bucketPath;
+				const listCommand = `rclone lsf ${rcloneFlags.join(" ")} "${searchPath}" | head -n 100`;
+
+				let stdout = "";
+
+				if (input.serverId) {
+					const result = await execAsyncRemote(listCommand, input.serverId);
+					stdout = result.stdout;
+				} else {
+					const result = await execAsync(listCommand);
+					stdout = result.stdout;
+				}
+
+				const files = stdout.split("\n").filter(Boolean);
+
+				const results = baseDir
+					? files.map((file) => `${baseDir}${file}`)
+					: files;
+
+				if (searchTerm) {
+					return results.filter((file) =>
+						file.toLowerCase().includes(searchTerm.toLowerCase()),
+					);
+				}
+
+				return results;
+			} catch (error) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message:
+						error instanceof Error
+							? error.message
+							: "Error listing backup files",
+					cause: error,
+				});
+			}
+		}),
+
+	restoreBackupWithLogs: protectedProcedure
+		.meta({
+			openapi: {
+				enabled: false,
+				path: "/restore-backup-with-logs",
+				method: "POST",
+				override: true,
+			},
+		})
+		.input(
+			z.object({
+				databaseId: z.string(),
+				databaseType: z.enum(["postgres", "mysql", "mariadb", "mongo"]),
+				databaseName: z.string().min(1),
+				backupFile: z.string().min(1),
+				destinationId: z.string().min(1),
+			}),
+		)
+		.subscription(async ({ input }) => {
+			const destination = await findDestinationById(input.destinationId);
+			if (input.databaseType === "postgres") {
+				const postgres = await findPostgresById(input.databaseId);
+
+				return observable<string>((emit) => {
+					restorePostgresBackup(
+						postgres,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mysql") {
+				const mysql = await findMySqlById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMySqlBackup(
+						mysql,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mariadb") {
+				const mariadb = await findMariadbById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMariadbBackup(
+						mariadb,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mongo") {
+				const mongo = await findMongoById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMongoBackup(
+						mongo,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+
+			return true;
+		}),
 });
-
-// export const getAdminId = async (backupId: string) => {
-// 	const backup = await findBackupById(backupId);
-
-// 	if (backup.databaseType === "postgres" && backup.postgresId) {
-// 		const postgres = await findPostgresById(backup.postgresId);
-// 		return postgres.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mariadb" && backup.mariadbId) {
-// 		const mariadb = await findMariadbById(backup.mariadbId);
-// 		return mariadb.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mysql" && backup.mysqlId) {
-// 		const mysql = await findMySqlById(backup.mysqlId);
-// 		return mysql.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mongo" && backup.mongoId) {
-// 		const mongo = await findMongoById(backup.mongoId);
-// 		return mongo.project.adminId;
-// 	}
-
-// 	return null;
-// };

apps/dokploy/server/api/routers/cluster.ts

@@ -1,36 +1,46 @@
 import { getPublicIpWithFallback } from "@/server/wss/terminal";
-import { type DockerNode, IS_CLOUD, docker, execAsync } from "@dokploy/server";
+import {
+	type DockerNode,
+	execAsync,
+	execAsyncRemote,
+	findServerById,
+	getRemoteDocker,
+} from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
-
 export const clusterRouter = createTRPCRouter({
-	getNodes: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
-			return [];
-		}
-		const workers: DockerNode[] = await docker.listNodes();
+	getNodes: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			const docker = await getRemoteDocker(input.serverId);
+			const workers: DockerNode[] = await docker.listNodes();
 
-		return workers;
-	}),
+			return workers;
+		}),
 	removeWorker: protectedProcedure
 		.input(
 			z.object({
 				nodeId: z.string(),
+				serverId: z.string().optional(),
 			}),
 		)
 		.mutation(async ({ input }) => {
-			if (IS_CLOUD) {
-				throw new TRPCError({
-					code: "UNAUTHORIZED",
-					message: "Functionality not available in cloud version",
-				});
-			}
 			try {
-				await execAsync(
-					`docker node update --availability drain ${input.nodeId}`,
-				);
-				await execAsync(`docker node rm ${input.nodeId} --force`);
+				const drainCommand = `docker node update --availability drain ${input.nodeId}`;
+				const removeCommand = `docker node rm ${input.nodeId} --force`;
+
+				if (input.serverId) {
+					await execAsyncRemote(input.serverId, drainCommand);
+					await execAsyncRemote(input.serverId, removeCommand);
+				} else {
+					await execAsync(drainCommand);
+					await execAsync(removeCommand);
+				}
 				return true;
 			} catch (error) {
 				throw new TRPCError({
@@ -40,37 +50,51 @@ export const clusterRouter = createTRPCRouter({
 				});
 			}
 		}),
-	addWorker: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
-			return {
-				command: "",
-				version: "",
-			};
-		}
-		const result = await docker.swarmInspect();
-		const docker_version = await docker.version();
+	addWorker: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			const docker = await getRemoteDocker(input.serverId);
+			const result = await docker.swarmInspect();
+			const docker_version = await docker.version();
+
+			let ip = await getPublicIpWithFallback();
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				ip = server?.ipAddress;
+			}
 
-		return {
-			command: `docker swarm join --token ${
-				result.JoinTokens.Worker
-			} ${await getPublicIpWithFallback()}:2377`,
-			version: docker_version.Version,
-		};
-	}),
-	addManager: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
 			return {
-				command: "",
-				version: "",
+				command: `docker swarm join --token ${
+					result.JoinTokens.Worker
+				} ${ip}:2377`,
+				version: docker_version.Version,
 			};
-		}
-		const result = await docker.swarmInspect();
-		const docker_version = await docker.version();
-		return {
-			command: `docker swarm join --token ${
-				result.JoinTokens.Manager
-			} ${await getPublicIpWithFallback()}:2377`,
-			version: docker_version.Version,
-		};
-	}),
+		}),
+	addManager: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			const docker = await getRemoteDocker(input.serverId);
+			const result = await docker.swarmInspect();
+			const docker_version = await docker.version();
+
+			let ip = await getPublicIpWithFallback();
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				ip = server?.ipAddress;
+			}
+			return {
+				command: `docker swarm join --token ${
+					result.JoinTokens.Manager
+				} ${ip}:2377`,
+				version: docker_version.Version,
+			};
+		}),
 });

apps/dokploy/server/api/routers/compose.ts

@@ -437,13 +437,12 @@ export const composeRouter = createTRPCRouter({
 				serverIp = "127.0.0.1";
 			}
 
+			const projectName = slugify(`${project.name} ${input.id}`);
 			const generate = processTemplate(template.config, {
 				serverIp: serverIp,
-				projectName: project.name,
+				projectName: projectName,
 			});
 
-			const projectName = slugify(`${project.name} ${input.id}`);
-
 			const compose = await createComposeByTemplate({
 				...input,
 				composeFile: template.dockerCompose,
@@ -607,7 +606,7 @@ export const composeRouter = createTRPCRouter({
 
 				const processedTemplate = processTemplate(config, {
 					serverIp: serverIp,
-					projectName: compose.project.name,
+					projectName: compose.appName,
 				});
 
 				return {
@@ -676,7 +675,7 @@ export const composeRouter = createTRPCRouter({
 
 				const processedTemplate = processTemplate(config, {
 					serverIp: serverIp,
-					projectName: compose.project.name,
+					projectName: compose.appName,
 				});
 
 				// Update compose file

apps/dokploy/server/api/routers/domain.ts

@@ -13,7 +13,9 @@ import {
 	findDomainById,
 	findDomainsByApplicationId,
 	findDomainsByComposeId,
+	findOrganizationById,
 	findPreviewDeploymentById,
+	findServerById,
 	generateTraefikMeDomain,
 	manageDomain,
 	removeDomain,
@@ -94,6 +96,19 @@ export const domainRouter = createTRPCRouter({
 				input.serverId,
 			);
 		}),
+	canGenerateTraefikMeDomains: protectedProcedure
+		.input(z.object({ serverId: z.string() }))
+		.query(async ({ input, ctx }) => {
+			const organization = await findOrganizationById(
+				ctx.session.activeOrganizationId,
+			);
+
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				return server.ipAddress;
+			}
+			return organization?.owner.serverIp;
+		}),
 
 	update: protectedProcedure
 		.input(apiUpdateDomain)

apps/dokploy/server/api/routers/settings.ts

@@ -97,14 +97,20 @@ export const settingsRouter = createTRPCRouter({
 	toggleDashboard: adminProcedure
 		.input(apiEnableDashboard)
 		.mutation(async ({ input }) => {
+			const ports = (await getTraefikPorts(input.serverId)).filter(
+				(port) =>
+					port.targetPort !== 80 &&
+					port.targetPort !== 443 &&
+					port.targetPort !== 8080,
+			);
 			await initializeTraefik({
+				additionalPorts: ports,
 				enableDashboard: input.enableDashboard,
 				serverId: input.serverId,
 				force: true,
 			});
 			return true;
 		}),
-
 	cleanUnusedImages: adminProcedure
 		.input(apiServerSchema)
 		.mutation(async ({ input }) => {
@@ -749,7 +755,6 @@ export const settingsRouter = createTRPCRouter({
 					z.object({
 						targetPort: z.number(),
 						publishedPort: z.number(),
-						publishMode: z.enum(["ingress", "host"]).default("host"),
 					}),
 				),
 			}),
@@ -782,59 +787,7 @@ export const settingsRouter = createTRPCRouter({
 	getTraefikPorts: adminProcedure
 		.input(apiServerSchema)
 		.query(async ({ input }) => {
-			const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
-
-			try {
-				let stdout = "";
-				if (input?.serverId) {
-					const result = await execAsyncRemote(input.serverId, command);
-					stdout = result.stdout;
-				} else if (!IS_CLOUD) {
-					const result = await execAsync(command);
-					stdout = result.stdout;
-				}
-
-				const portsMap = JSON.parse(stdout.trim());
-				const additionalPorts: Array<{
-					targetPort: number;
-					publishedPort: number;
-					publishMode: "host" | "ingress";
-				}> = [];
-
-				// Convert the Docker container port format to our expected format
-				for (const [containerPort, bindings] of Object.entries(portsMap)) {
-					if (!bindings) continue;
-
-					const [port = ""] = containerPort.split("/");
-					if (!port) continue;
-
-					const targetPortNum = Number.parseInt(port, 10);
-					if (Number.isNaN(targetPortNum)) continue;
-
-					// Skip default ports
-					if ([80, 443, 8080].includes(targetPortNum)) continue;
-
-					for (const binding of bindings as Array<{ HostPort: string }>) {
-						if (!binding.HostPort) continue;
-						const publishedPort = Number.parseInt(binding.HostPort, 10);
-						if (Number.isNaN(publishedPort)) continue;
-
-						additionalPorts.push({
-							targetPort: targetPortNum,
-							publishedPort,
-							publishMode: "host", // Docker standalone uses host mode by default
-						});
-					}
-				}
-
-				return additionalPorts;
-			} catch (error) {
-				throw new TRPCError({
-					code: "INTERNAL_SERVER_ERROR",
-					message: "Failed to get Traefik ports",
-					cause: error,
-				});
-			}
+			return await getTraefikPorts(input?.serverId);
 		}),
 	updateLogCleanup: adminProcedure
 		.input(
@@ -853,3 +806,56 @@ export const settingsRouter = createTRPCRouter({
 		return getLogCleanupStatus();
 	}),
 });
+
+export const getTraefikPorts = async (serverId?: string) => {
+	const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
+	try {
+		let stdout = "";
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+		} else if (!IS_CLOUD) {
+			const result = await execAsync(command);
+			stdout = result.stdout;
+		}
+
+		const portsMap = JSON.parse(stdout.trim());
+		const additionalPorts: Array<{
+			targetPort: number;
+			publishedPort: number;
+		}> = [];
+
+		// Convert the Docker container port format to our expected format
+		for (const [containerPort, bindings] of Object.entries(portsMap)) {
+			if (!bindings) continue;
+
+			const [port = ""] = containerPort.split("/");
+			if (!port) continue;
+
+			const targetPortNum = Number.parseInt(port, 10);
+			if (Number.isNaN(targetPortNum)) continue;
+
+			// Skip default ports
+			if ([80, 443].includes(targetPortNum)) continue;
+
+			for (const binding of bindings as Array<{ HostPort: string }>) {
+				if (!binding.HostPort) continue;
+				const publishedPort = Number.parseInt(binding.HostPort, 10);
+				if (Number.isNaN(publishedPort)) continue;
+
+				additionalPorts.push({
+					targetPort: targetPortNum,
+					publishedPort,
+				});
+			}
+		}
+
+		return additionalPorts;
+	} catch (error) {
+		throw new TRPCError({
+			code: "INTERNAL_SERVER_ERROR",
+			message: "Failed to get Traefik ports",
+			cause: error,
+		});
+	}
+};

apps/dokploy/server/queues/redis-connection.ts

@@ -1,5 +1,8 @@
 import type { ConnectionOptions } from "bullmq";
 
 export const redisConfig: ConnectionOptions = {
-	host: process.env.NODE_ENV === "production" ? "dokploy-redis" : "127.0.0.1",
+	host:
+		process.env.NODE_ENV === "production"
+			? process.env.REDIS_HOST || "dokploy-redis"
+			: "127.0.0.1",
 };

apps/dokploy/server/server.ts

@@ -7,9 +7,6 @@ import {
 	createDefaultTraefikConfig,
 	initCronJobs,
 	initializeNetwork,
-	initializePostgres,
-	initializeRedis,
-	initializeTraefik,
 	sendDokployRestartNotifications,
 	setupDirectories,
 } from "@dokploy/server";
@@ -49,14 +46,7 @@ void app.prepare().then(async () => {
 			await initializeNetwork();
 			createDefaultTraefikConfig();
 			createDefaultServerTraefikConfig();
-			await initializePostgres();
-			await initializeTraefik();
-			await initializeRedis();
-
 			initCronJobs();
-
-			// Timeout to wait for the database to be ready
-			await new Promise((resolve) => setTimeout(resolve, 7000));
 			await migration();
 			await sendDokployRestartNotifications();
 		}

apps/dokploy/server/wss/listen-deployment.ts

@@ -61,7 +61,6 @@ export const setupDeploymentLogsWebSocketServer = (
 							}
 							stream
 								.on("close", () => {
-									console.log("Connection closed ✅");
 									client.end();
 									ws.close();
 								})
@@ -86,7 +85,6 @@ export const setupDeploymentLogsWebSocketServer = (
 					});
 
 				ws.on("close", () => {
-					console.log("Connection closed ✅, From WS");
 					client.end();
 				});
 			} else {

apps/dokploy/tailwind.config.ts

@@ -22,6 +22,9 @@ const config = {
 			fontFamily: {
 				sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
 			},
+			screens: {
+				"3xl": "120rem",
+			},
 			maxWidth: {
 				"2xl": "40rem",
 				"8xl": "85rem",

packages/server/package.json

@@ -40,9 +40,8 @@
     "@oslojs/encoding":"1.1.0",
     "@oslojs/crypto":"1.0.1",
     "drizzle-dbml-generator":"0.10.0",
-    "better-auth":"1.2.0",
+    "better-auth":"1.2.4",
     "@faker-js/faker": "^8.4.1",
-    "@lucia-auth/adapter-drizzle": "1.0.7",
     "@octokit/auth-app": "^6.0.4",
     "@react-email/components": "^0.0.21",
     "@trpc/server": "^10.43.6",
@@ -59,7 +58,6 @@
     "hi-base32": "^0.5.1",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
-    "lucia": "^3.0.1",
     "nanoid": "3",
     "node-os-utils": "1.3.7",
     "node-pty": "1.0.0",

packages/server/src/db/schema/application.ts

@@ -141,6 +141,7 @@ export const applications = pgTable("application", {
 	command: text("command"),
 	refreshToken: text("refreshToken").$defaultFn(() => nanoid()),
 	sourceType: sourceType("sourceType").notNull().default("github"),
+	cleanCache: boolean("cleanCache").default(false),
 	// Github
 	repository: text("repository"),
 	owner: text("owner"),
@@ -408,6 +409,7 @@ const createSchema = createInsertSchema(applications, {
 	previewPath: z.string().optional(),
 	previewCertificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
 	watchPaths: z.array(z.string()).optional(),
+	cleanCache: z.boolean().optional(),
 });
 
 export const apiCreateApplication = createSchema.pick({

packages/server/src/db/schema/schema.dbml

@@ -159,6 +159,7 @@ table application {
   command text
   refreshToken text
   sourceType sourceType [not null, default: 'github']
+  cleanCache boolean [default: false]
   repository text
   owner text
   branch text

packages/server/src/lib/auth.ts

@@ -8,6 +8,10 @@ import { db } from "../db";
 import * as schema from "../db/schema";
 import { sendEmail } from "../verification/send-verification-email";
 import { IS_CLOUD } from "../constants";
+import { getPublicIpWithFallback } from "../wss/utils";
+import { updateUser } from "../services/user";
+import { getUserByToken } from "../services/admin";
+import { APIError } from "better-auth/api";
 
 const { handler, api } = betterAuth({
 	database: drizzleAdapter(db, {
@@ -28,6 +32,26 @@ const { handler, api } = betterAuth({
 			clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
 		},
 	},
+	...(!IS_CLOUD && {
+		async trustedOrigins() {
+			const admin = await db.query.member.findFirst({
+				where: eq(schema.member.role, "owner"),
+				with: {
+					user: true,
+				},
+			});
+
+			if (admin) {
+				return [
+					...(admin.user.serverIp
+						? [`http://${admin.user.serverIp}:3000`]
+						: []),
+					...(admin.user.host ? [`https://${admin.user.host}`] : []),
+				];
+			}
+			return [];
+		},
+	}),
 	emailVerification: {
 		sendOnSignUp: true,
 		autoSignInAfterVerification: true,
@@ -68,11 +92,40 @@ const { handler, api } = betterAuth({
 	databaseHooks: {
 		user: {
 			create: {
+				before: async (_user, context) => {
+					if (!IS_CLOUD) {
+						const xDokployToken =
+							context?.request?.headers?.get("x-dokploy-token");
+						if (xDokployToken) {
+							const user = await getUserByToken(xDokployToken);
+							if (!user) {
+								throw new APIError("BAD_REQUEST", {
+									message: "User not found",
+								});
+							}
+						} else {
+							const isAdminPresent = await db.query.member.findFirst({
+								where: eq(schema.member.role, "owner"),
+							});
+							if (isAdminPresent) {
+								throw new APIError("BAD_REQUEST", {
+									message: "Admin is already created",
+								});
+							}
+						}
+					}
+				},
 				after: async (user) => {
 					const isAdminPresent = await db.query.member.findFirst({
 						where: eq(schema.member.role, "owner"),
 					});
 
+					if (!IS_CLOUD) {
+						await updateUser(user.id, {
+							serverIp: await getPublicIpWithFallback(),
+						});
+					}
+
 					if (IS_CLOUD || !isAdminPresent) {
 						await db.transaction(async (tx) => {
 							const organization = await tx
@@ -117,6 +170,10 @@ const { handler, api } = betterAuth({
 			},
 		},
 	},
+	session: {
+		expiresIn: 60 * 60 * 24 * 3,
+		updateAge: 60 * 60 * 24,
+	},
 	user: {
 		modelName: "users_temp",
 		additionalFields: {

packages/server/src/services/application.ts

@@ -182,12 +182,6 @@ export const deployApplication = async ({
 	});
 
 	try {
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheApplications) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
-
 		if (application.sourceType === "github") {
 			await cloneGithubRepository({
 				...application,
@@ -257,11 +251,6 @@ export const rebuildApplication = async ({
 	});
 
 	try {
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheApplications) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
 		if (application.sourceType === "github") {
 			await buildApplication(application, deployment.logPath);
 		} else if (application.sourceType === "gitlab") {
@@ -306,11 +295,6 @@ export const deployRemoteApplication = async ({
 
 	try {
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheApplications) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			let command = "set -e;";
 			if (application.sourceType === "github") {
 				command += await getGithubCloneCommand({
@@ -451,12 +435,6 @@ export const deployPreviewApplication = async ({
 		application.env = `${application.previewEnv}\nDOKPLOY_DEPLOY_URL=${previewDeployment?.domain?.host}`;
 		application.buildArgs = application.previewBuildArgs;
 
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheOnPreviews) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
-
 		if (application.sourceType === "github") {
 			await cloneGithubRepository({
 				...application,
@@ -565,11 +543,6 @@ export const deployRemotePreviewApplication = async ({
 		application.buildArgs = application.previewBuildArgs;
 
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheOnPreviews) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			let command = "set -e;";
 			if (application.sourceType === "github") {
 				command += await getGithubCloneCommand({
@@ -634,11 +607,6 @@ export const rebuildRemoteApplication = async ({
 
 	try {
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheApplications) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			if (application.sourceType !== "docker") {
 				let command = "set -e;";
 				command += getBuildCommand(application, deployment.logPath);

packages/server/src/services/compose.ts

@@ -216,10 +216,6 @@ export const deployCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
 		if (compose.sourceType === "github") {
 			await cloneGithubRepository({
 				...compose,
@@ -285,15 +281,10 @@ export const rebuildCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
-		if (compose.serverId) {
-			await getBuildComposeCommand(compose, deployment.logPath);
-		} else {
-			await buildCompose(compose, deployment.logPath);
+		if (compose.sourceType === "raw") {
+			await createComposeFile(compose, deployment.logPath);
 		}
+		await buildCompose(compose, deployment.logPath);
 
 		await updateDeploymentStatus(deployment.deploymentId, "done");
 		await updateCompose(composeId, {
@@ -331,10 +322,6 @@ export const deployRemoteCompose = async ({
 	});
 	try {
 		if (compose.serverId) {
-			// const admin = await findUserById(compose.project.userId);
-			// if (admin.cleanupCacheOnCompose) {
-			// 	await cleanupFullDocker(compose?.serverId);
-			// }
 			let command = "set -e;";
 
 			if (compose.sourceType === "github") {
@@ -429,10 +416,10 @@ export const rebuildRemoteCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
+		if (compose.sourceType === "raw") {
+			const command = getCreateComposeFileCommand(compose, deployment.logPath);
+			await execAsyncRemote(compose.serverId, command);
+		}
 		if (compose.serverId) {
 			await getBuildComposeCommand(compose, deployment.logPath);
 		}

packages/server/src/services/docker.ts

@@ -136,26 +136,24 @@ export const getContainersByAppNameMatch = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim()
-					: "No state";
-				return {
-					containerId,
-					name,
-					state,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim()
+				: "No state";
+			return {
+				containerId,
+				name,
+				state,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -192,30 +190,28 @@ export const getStackContainersByAppName = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim().toLowerCase()
-					: "No state";
-				const node = parts[3]
-					? parts[3].replace("Node: ", "").trim()
-					: "No specific node";
-				return {
-					containerId,
-					name,
-					state,
-					node,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim().toLowerCase()
+				: "No state";
+			const node = parts[3]
+				? parts[3].replace("Node: ", "").trim()
+				: "No specific node";
+			return {
+				containerId,
+				name,
+				state,
+				node,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -253,31 +249,29 @@ export const getServiceContainersByAppName = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim().toLowerCase()
-					: "No state";
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim().toLowerCase()
+				: "No state";
 
-				const node = parts[3]
-					? parts[3].replace("Node: ", "").trim()
-					: "No specific node";
-				return {
-					containerId,
-					name,
-					state,
-					node,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const node = parts[3]
+				? parts[3].replace("Node: ", "").trim()
+				: "No specific node";
+			return {
+				containerId,
+				name,
+				state,
+				node,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -318,25 +312,23 @@ export const getContainersByAppLabel = async (
 
 		const lines = stdout.trim().split("\n");
 
-		const containers = lines
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim()
-					: "No state";
-				return {
-					containerId,
-					name,
-					state,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+		const containers = lines.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim()
+				: "No state";
+			return {
+				containerId,
+				name,
+				state,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}

packages/server/src/setup/server-setup.ts

@@ -361,7 +361,7 @@ const installUtilities = () => `
 	alpine)
 		sed -i '/^#.*\/community/s/^#//' /etc/apk/repositories
 		apk update >/dev/null
-		apk add curl wget git jq openssl >/dev/null
+		apk add curl wget git jq openssl sudo unzip tar >/dev/null
 		;;
 	ubuntu | debian | raspbian)
 		DEBIAN_FRONTEND=noninteractive apt-get update -y >/dev/null
@@ -546,7 +546,7 @@ export const createTraefikInstance = () => {
 		if docker service inspect dokploy-traefik > /dev/null 2>&1; then
 			echo "Migrating Traefik to Standalone..."
 			docker service rm dokploy-traefik
-			sleep 7
+			sleep 8
 			echo "Traefik migrated to Standalone ✅"
 		fi
 			

packages/server/src/setup/traefik-setup.ts

@@ -22,7 +22,6 @@ interface TraefikOptions {
 	additionalPorts?: {
 		targetPort: number;
 		publishedPort: number;
-		publishMode?: "ingress" | "host";
 	}[];
 	force?: boolean;
 }
@@ -91,9 +90,26 @@ export const initializeTraefik = async ({
 		try {
 			const service = docker.getService("dokploy-traefik");
 			await service?.remove({ force: true });
-			await new Promise((resolve) => setTimeout(resolve, 5000));
-		} catch (_) {}
 
+			let attempts = 0;
+			const maxAttempts = 5;
+			while (attempts < maxAttempts) {
+				try {
+					await docker.listServices({
+						filters: { name: ["dokploy-traefik"] },
+					});
+					console.log("Waiting for service cleanup...");
+					await new Promise((resolve) => setTimeout(resolve, 5000));
+					attempts++;
+				} catch (e) {
+					break;
+				}
+			}
+		} catch (err) {
+			console.log("No existing service to remove");
+		}
+
+		// Then try to remove any existing container
 		const container = docker.getContainer(containerName);
 		try {
 			const inspect = await container.inspect();
@@ -103,15 +119,31 @@ export const initializeTraefik = async ({
 			}
 
 			await container.remove({ force: true });
+			await new Promise((resolve) => setTimeout(resolve, 5000));
 		} catch (error) {
-			console.log(error);
+			console.log("No existing container to remove");
 		}
 
-		await docker.createContainer(settings);
-		const newContainer = docker.getContainer(containerName);
-		await newContainer.start();
+		// Create and start the new container
+		try {
+			await docker.createContainer(settings);
+			const newContainer = docker.getContainer(containerName);
+			await newContainer.start();
+			console.log("Traefik container started successfully");
+		} catch (error: any) {
+			if (error?.json?.message?.includes("port is already allocated")) {
+				console.log("Ports still in use, waiting longer for cleanup...");
+				await new Promise((resolve) => setTimeout(resolve, 10000));
+				// Try one more time
+				await docker.createContainer(settings);
+				const newContainer = docker.getContainer(containerName);
+				await newContainer.start();
+				console.log("Traefik container started successfully after retry");
+			}
+		}
 	} catch (error) {
-		console.log(error);
+		console.error("Failed to initialize Traefik:", error);
+		throw error;
 	}
 };
 

packages/server/src/templates/index.ts

@@ -53,14 +53,12 @@ export const generatePassword = (quantity = 16): string => {
 };
 
 /**
- * Generate a random base64 string of specified length
+ * Generate a random base64 string from N random bytes
+ * @param bytes Number of random bytes to generate before base64 encoding (default: 32)
+ * @returns base64 encoded string of the random bytes
  */
-export function generateBase64(length: number): string {
-	// To get N characters in base64, we need to generate N * 3/4 bytes
-	const bytesNeeded = Math.ceil((length * 3) / 4);
-	return Buffer.from(randomBytes(bytesNeeded))
-		.toString("base64")
-		.substring(0, length);
+export function generateBase64(bytes = 32): string {
+	return randomBytes(bytes).toString("base64");
 }
 
 export function generateJwt(length = 256): string {

packages/server/src/templates/processors.ts

@@ -45,7 +45,7 @@ export interface CompleteTemplate {
 	variables: Record<string, string>;
 	config: {
 		domains: DomainConfig[];
-		env: Record<string, string>;
+		env: Record<string, string> | string[];
 		mounts?: MountConfig[];
 	};
 }
@@ -175,7 +175,8 @@ export function processDomains(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["domains"] {
-	return template.config.domains.map((domain: DomainConfig) => ({
+	if (!template?.config?.domains) return [];
+	return template?.config?.domains?.map((domain: DomainConfig) => ({
 		...domain,
 		host: domain.host
 			? processValue(domain.host, variables, schema)
@@ -191,6 +192,19 @@ export function processEnvVars(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["envs"] {
+	if (!template?.config?.env) return [];
+
+	// Handle array of env vars
+	if (Array.isArray(template.config.env)) {
+		return template.config.env.map((env) => {
+			if (typeof env === "string") {
+				return processValue(env, variables, schema);
+			}
+			return env;
+		});
+	}
+
+	// Handle object of env vars
 	return Object.entries(template.config.env).map(
 		([key, value]: [string, string]) => {
 			const processedValue = processValue(value, variables, schema);
@@ -207,9 +221,9 @@ export function processMounts(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["mounts"] {
-	if (!template.config.mounts) return [];
+	if (!template?.config?.mounts) return [];
 
-	return template.config.mounts.map((mount: MountConfig) => ({
+	return template?.config?.mounts?.map((mount: MountConfig) => ({
 		filePath: processValue(mount.filePath, variables, schema),
 		content: processValue(mount.content, variables, schema),
 	}));

packages/server/src/utils/backups/index.ts

@@ -80,7 +80,8 @@ export const initCronJobs = async () => {
 					console.log(
 						`PG-SERVER[${new Date().toLocaleString()}] Running Backup ${backupId}`,
 					);
-					runPostgresBackup(pg, backup);
+					await runPostgresBackup(pg, backup);
+					await keepLatestNBackups(backup, pg.serverId);
 				});
 			}
 		}
@@ -112,6 +113,7 @@ export const initCronJobs = async () => {
 						`MARIADB-SERVER[${new Date().toLocaleString()}] Running Backup ${backupId}`,
 					);
 					await runMariadbBackup(maria, backup);
+					await keepLatestNBackups(backup, maria.serverId);
 				});
 			}
 		}
@@ -141,6 +143,7 @@ export const initCronJobs = async () => {
 						`MONGO-SERVER[${new Date().toLocaleString()}] Running Backup ${backupId}`,
 					);
 					await runMongoBackup(mongo, backup);
+					await keepLatestNBackups(backup, mongo.serverId);
 				});
 			}
 		}
@@ -170,6 +173,7 @@ export const initCronJobs = async () => {
 						`MYSQL-SERVER[${new Date().toLocaleString()}] Running Backup ${backupId}`,
 					);
 					await runMySqlBackup(mysql, backup);
+					await keepLatestNBackups(backup, mysql.serverId);
 				});
 			}
 		}
@@ -212,6 +216,5 @@ export const keepLatestNBackups = async (
 		}
 	} catch (error) {
 		console.error(error);
-		throw error;
 	}
 };

packages/server/src/utils/builders/docker-file.ts

@@ -12,8 +12,14 @@ export const buildCustomDocker = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { appName, env, publishDirectory, buildArgs, dockerBuildStage } =
-		application;
+	const {
+		appName,
+		env,
+		publishDirectory,
+		buildArgs,
+		dockerBuildStage,
+		cleanCache,
+	} = application;
 	const dockerFilePath = getBuildAppDirectory(application);
 	try {
 		const image = `${appName}`;
@@ -29,6 +35,10 @@ export const buildCustomDocker = async (
 
 		const commandArgs = ["build", "-t", image, "-f", dockerFilePath, "."];
 
+		if (cleanCache) {
+			commandArgs.push("--no-cache");
+		}
+
 		if (dockerBuildStage) {
 			commandArgs.push("--target", dockerBuildStage);
 		}
@@ -65,8 +75,14 @@ export const getDockerCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { appName, env, publishDirectory, buildArgs, dockerBuildStage } =
-		application;
+	const {
+		appName,
+		env,
+		publishDirectory,
+		buildArgs,
+		dockerBuildStage,
+		cleanCache,
+	} = application;
 	const dockerFilePath = getBuildAppDirectory(application);
 
 	try {
@@ -88,6 +104,10 @@ export const getDockerCommand = (
 			commandArgs.push("--target", dockerBuildStage);
 		}
 
+		if (cleanCache) {
+			commandArgs.push("--no-cache");
+		}
+
 		for (const arg of args) {
 			commandArgs.push("--build-arg", arg);
 		}

packages/server/src/utils/builders/heroku.ts

@@ -9,7 +9,7 @@ export const buildHeroku = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -29,6 +29,10 @@ export const buildHeroku = async (
 			args.push("--env", env);
 		}
 
+		if (cleanCache) {
+			args.push("--clear-cache");
+		}
+
 		await spawnAsync("pack", args, (data) => {
 			if (writeStream.writable) {
 				writeStream.write(data);
@@ -44,7 +48,7 @@ export const getHerokuCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
@@ -61,6 +65,10 @@ export const getHerokuCommand = (
 		`heroku/builder:${application.herokuVersion || "24"}`,
 	];
 
+	if (cleanCache) {
+		args.push("--clear-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/nixpacks.ts

@@ -14,7 +14,7 @@ export const buildNixpacks = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName, publishDirectory } = application;
+	const { env, appName, publishDirectory, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const buildContainerId = `${appName}-${nanoid(10)}`;
@@ -32,6 +32,10 @@ export const buildNixpacks = async (
 	try {
 		const args = ["build", buildAppDirectory, "--name", appName];
 
+		if (cleanCache) {
+			args.push("--no-cache");
+		}
+
 		for (const env of envVariables) {
 			args.push("--env", env);
 		}
@@ -91,7 +95,7 @@ export const getNixpacksCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName, publishDirectory } = application;
+	const { env, appName, publishDirectory, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const buildContainerId = `${appName}-${nanoid(10)}`;
@@ -102,6 +106,10 @@ export const getNixpacksCommand = (
 
 	const args = ["build", buildAppDirectory, "--name", appName];
 
+	if (cleanCache) {
+		args.push("--no-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/paketo.ts

@@ -8,7 +8,7 @@ export const buildPaketo = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -24,6 +24,10 @@ export const buildPaketo = async (
 			"paketobuildpacks/builder-jammy-full",
 		];
 
+		if (cleanCache) {
+			args.push("--clear-cache");
+		}
+
 		for (const env of envVariables) {
 			args.push("--env", env);
 		}
@@ -43,7 +47,7 @@ export const getPaketoCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
@@ -60,6 +64,10 @@ export const getPaketoCommand = (
 		"paketobuildpacks/builder-jammy-full",
 	];
 
+	if (cleanCache) {
+		args.push("--clear-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/railpack.ts

@@ -4,12 +4,22 @@ import { prepareEnvironmentVariables } from "../docker/utils";
 import { getBuildAppDirectory } from "../filesystem/directory";
 import { spawnAsync } from "../process/spawnAsync";
 import { execAsync } from "../process/execAsync";
+import { nanoid } from "nanoid";
+import { createHash } from "node:crypto";
+
+const calculateSecretsHash = (envVariables: string[]): string => {
+	const hash = createHash("sha256");
+	for (const env of envVariables.sort()) {
+		hash.update(env);
+	}
+	return hash.digest("hex");
+};
 
 export const buildRailpack = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -17,32 +27,80 @@ export const buildRailpack = async (
 	);
 
 	try {
-		// Ensure buildkit container is running, create if it doesn't exist
 		await execAsync(
-			"docker container inspect buildkit >/dev/null 2>&1 || docker run --rm --privileged -d --name buildkit moby/buildkit",
+			"docker buildx create --use --name builder-containerd --driver docker-container || true",
 		);
 
-		// Build the application using railpack
-		const args = ["build", buildAppDirectory, "--name", appName];
+		await execAsync("docker buildx use builder-containerd");
 
-		// Add environment variables
+		// First prepare the build plan and info
+		const prepareArgs = [
+			"prepare",
+			buildAppDirectory,
+			"--plan-out",
+			`${buildAppDirectory}/railpack-plan.json`,
+			"--info-out",
+			`${buildAppDirectory}/railpack-info.json`,
+		];
+
+		// Add environment variables to prepare command
 		for (const env of envVariables) {
-			args.push("--env", env);
+			prepareArgs.push("--env", env);
 		}
 
+		// Run prepare command
+		await spawnAsync("railpack", prepareArgs, (data) => {
+			if (writeStream.writable) {
+				writeStream.write(data);
+			}
+		});
+
+		// Calculate secrets hash for layer invalidation
+		const secretsHash = calculateSecretsHash(envVariables);
+
+		// Build with BuildKit using the Railpack frontend
+		const cacheKey = cleanCache ? nanoid(10) : undefined;
+		const buildArgs = [
+			"buildx",
+			"build",
+			...(cacheKey
+				? [
+						"--build-arg",
+						`secrets-hash=${secretsHash}`,
+						"--build-arg",
+						`cache-key=${cacheKey}`,
+					]
+				: []),
+			"--build-arg",
+			"BUILDKIT_SYNTAX=ghcr.io/railwayapp/railpack-frontend:v0.0.55",
+			"-f",
+			`${buildAppDirectory}/railpack-plan.json`,
+			"--output",
+			`type=docker,name=${appName}`,
+		];
+
+		// Add secrets properly formatted
+		const env: { [key: string]: string } = {};
+		for (const envVar of envVariables) {
+			const [key, value] = envVar.split("=");
+			if (key && value) {
+				buildArgs.push("--secret", `id=${key},env=${key}`);
+				env[key] = value;
+			}
+		}
+
+		buildArgs.push(buildAppDirectory);
+
 		await spawnAsync(
-			"railpack",
-			args,
+			"docker",
+			buildArgs,
 			(data) => {
 				if (writeStream.writable) {
 					writeStream.write(data);
 				}
 			},
 			{
-				env: {
-					...process.env,
-					BUILDKIT_HOST: "docker-container://buildkit",
-				},
+				env: { ...process.env, ...env },
 			},
 		);
 
@@ -56,32 +114,84 @@ export const getRailpackCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
 		application.project.env,
 	);
 
-	// Build the application using railpack
-	const args = ["build", buildAppDirectory, "--name", appName];
+	// Prepare command
+	const prepareArgs = [
+		"prepare",
+		buildAppDirectory,
+		"--plan-out",
+		`${buildAppDirectory}/railpack-plan.json`,
+		"--info-out",
+		`${buildAppDirectory}/railpack-info.json`,
+	];
 
-	// Add environment variables
 	for (const env of envVariables) {
-		args.push("--env", env);
+		prepareArgs.push("--env", env);
 	}
 
-	const command = `railpack ${args.join(" ")}`;
+	// Calculate secrets hash for layer invalidation
+	const secretsHash = calculateSecretsHash(envVariables);
+
+	const cacheKey = cleanCache ? nanoid(10) : undefined;
+	// Build command
+	const buildArgs = [
+		"buildx",
+		"build",
+		...(cacheKey
+			? [
+					"--build-arg",
+					`secrets-hash=${secretsHash}`,
+					"--build-arg",
+					`cache-key=${cacheKey}`,
+				]
+			: []),
+		"--build-arg",
+		"BUILDKIT_SYNTAX=ghcr.io/railwayapp/railpack-frontend:v0.0.55",
+		"-f",
+		`${buildAppDirectory}/railpack-plan.json`,
+		"--output",
+		`type=docker,name=${appName}`,
+	];
+
+	// Add secrets properly formatted
+	const exportEnvs = [];
+	for (const envVar of envVariables) {
+		const [key, value] = envVar.split("=");
+		if (key && value) {
+			buildArgs.push("--secret", `id=${key},env=${key}`);
+			exportEnvs.push(`export ${key}=${value}`);
+		}
+	}
+
+	buildArgs.push(buildAppDirectory);
+
 	const bashCommand = `
-	echo "Building with Railpack..." >> "${logPath}";
-	docker container inspect buildkit >/dev/null 2>&1 || docker run --rm --privileged -d --name buildkit moby/buildkit;
-	export BUILDKIT_HOST=docker-container://buildkit;
-	${command} >> ${logPath} 2>> ${logPath} || { 
-		echo "❌ Railpack build failed" >> ${logPath};
-		exit 1;
-	  }
-	echo "✅ Railpack build completed." >> ${logPath};
-	`;
+# Ensure we have a builder with containerd
+docker buildx create --use --name builder-containerd --driver docker-container || true
+docker buildx use builder-containerd
+
+echo "Preparing Railpack build plan..." >> "${logPath}";
+railpack ${prepareArgs.join(" ")} >> ${logPath} 2>> ${logPath} || { 
+	echo "❌ Railpack prepare failed" >> ${logPath};
+	exit 1;
+}
+echo "✅ Railpack prepare completed." >> ${logPath};
+
+echo "Building with Railpack frontend..." >> "${logPath}";
+# Export environment variables for secrets
+${exportEnvs.join("\n")}
+docker ${buildArgs.join(" ")} >> ${logPath} 2>> ${logPath} || { 
+	echo "❌ Railpack build failed" >> ${logPath};
+	exit 1;
+}
+echo "✅ Railpack build completed." >> ${logPath};
+`;
 
 	return bashCommand;
 };

packages/server/src/utils/docker/domain.ts

@@ -238,9 +238,9 @@ export const addDomainToCompose = async (
 
 		if (Array.isArray(labels)) {
 			if (!labels.includes("traefik.enable=true")) {
-				labels.push("traefik.enable=true");
+				labels.unshift("traefik.enable=true");
 			}
-			labels.push(...httpLabels);
+			labels.unshift(...httpLabels);
 		}
 
 		if (!compose.isolatedDeployment) {

packages/server/src/utils/restore/index.ts

@@ -0,0 +1,4 @@
+export { restorePostgresBackup } from "./postgres";
+export { restoreMySqlBackup } from "./mysql";
+export { restoreMariadbBackup } from "./mariadb";
+export { restoreMongoBackup } from "./mongo";

packages/server/src/utils/restore/mariadb.ts

@@ -0,0 +1,56 @@
+import type { Mariadb } from "@dokploy/server/services/mariadb";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMariadbBackup = async (
+	mariadb: Mariadb,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databasePassword, databaseUser, serverId } = mariadb;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		const restoreCommand = `
+    rclone cat ${rcloneFlags.join(" ")} "${backupPath}" | gunzip | docker exec -i ${containerName} mariadb -u ${databaseUser} -p${databasePassword} ${database}
+  `;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${restoreCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, restoreCommand);
+		} else {
+			await execAsync(restoreCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error
+					? error.message
+					: "Error restoring mariadb backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mariadb backup",
+		);
+	}
+};

packages/server/src/utils/restore/mongo.ts

@@ -0,0 +1,64 @@
+import type { Mongo } from "@dokploy/server/services/mongo";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMongoBackup = async (
+	mongo: Mongo,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databasePassword, databaseUser, serverId } = mongo;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		// For MongoDB, we need to first download the backup file since mongorestore expects a directory
+		const tempDir = "/tmp/dokploy-restore";
+		const fileName = backupFile.split("/").pop() || "backup.dump.gz";
+		const decompressedName = fileName.replace(".gz", "");
+
+		const downloadCommand = `\
+rm -rf ${tempDir} && \
+mkdir -p ${tempDir} && \
+rclone copy ${rcloneFlags.join(" ")} "${backupPath}" ${tempDir} && \
+cd ${tempDir} && \
+gunzip -f "${fileName}" && \
+docker exec -i ${containerName} mongorestore --username ${databaseUser} --password ${databasePassword} --authenticationDatabase admin --db ${database} --archive < "${decompressedName}" && \
+rm -rf ${tempDir}`;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${downloadCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, downloadCommand);
+		} else {
+			await execAsync(downloadCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error ? error.message : "Error restoring mongo backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mongo backup",
+		);
+	}
+};

packages/server/src/utils/restore/mysql.ts

@@ -0,0 +1,54 @@
+import type { MySql } from "@dokploy/server/services/mysql";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMySqlBackup = async (
+	mysql: MySql,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databaseRootPassword, serverId } = mysql;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		const restoreCommand = `
+    rclone cat ${rcloneFlags.join(" ")} "${backupPath}" | gunzip | docker exec -i ${containerName} mysql -u root -p${databaseRootPassword} ${database}
+  `;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${restoreCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, restoreCommand);
+		} else {
+			await execAsync(restoreCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error ? error.message : "Error restoring mysql backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mysql backup",
+		);
+	}
+};