Merge pull request #553 from Dokploy/canary

v0.10.0

.circleci/config.yml

@@ -11,6 +11,7 @@ jobs:
           command: |
             cp apps/dokploy/.env.production.example .env.production
             cp apps/dokploy/.env.production.example apps/dokploy/.env.production
+
       - run:
           name: Build and push AMD64 image
           command: |
@@ -61,7 +62,7 @@ jobs:
               VERSION=$(node -p "require('./apps/dokploy/package.json').version")
               echo $VERSION
               TAG="latest"
-              
+
               docker manifest create dokploy/dokploy:${TAG} \
                 dokploy/dokploy:${TAG}-amd64 \
                 dokploy/dokploy:${TAG}-arm64

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build Docs & Website Docker images
+name: Build Docker images
 
 on:
   push:
@@ -48,3 +48,74 @@ jobs:
           push: true
           tags: dokploy/website:latest
           platforms: linux/amd64
+
+
+  build-and-push-cloud-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.cloud
+          push: true
+          tags: |
+            siumauricio/cloud:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64
+
+  build-and-push-schedule-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.schedule
+          push: true
+          tags: |
+            siumauricio/schedule:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64     
+
+
+  build-and-push-server-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.server
+          push: true
+          tags: |
+            siumauricio/server:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64  

.github/workflows/pull-request.yml

@@ -18,6 +18,7 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build  
       - run: pnpm biome ci
       - run: pnpm typecheck
 
@@ -32,6 +33,7 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build
       - run: pnpm build
 
   parallel-tests:
@@ -44,4 +46,5 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build  
       - run: pnpm test

Dockerfile

@@ -15,7 +15,9 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 # Deploy only the dokploy app
 
 ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
 RUN pnpm --filter=./apps/dokploy run build
+
 RUN pnpm --filter=./apps/dokploy --prod deploy /prod/dokploy
 
 RUN cp -R /usr/src/app/apps/dokploy/.next /prod/dokploy/.next
@@ -27,7 +29,7 @@ WORKDIR /app
 # Set production
 ENV NODE_ENV=production
 
-RUN apt-get update && apt-get install -y curl apache2-utils && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next
@@ -42,7 +44,7 @@ COPY --from=build /prod/dokploy/node_modules ./node_modules
 
 
 # Install docker
-RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm get-docker.sh
+RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm get-docker.sh && curl https://rclone.org/install.sh | bash
 
 # Install Nixpacks and tsx
 # | VERBOSE=1 VERSION=1.21.0 bash
@@ -55,4 +57,4 @@ RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
 COPY --from=buildpacksio/pack:0.35.0 /usr/local/bin/pack /usr/local/bin/pack
 
 EXPOSE 3000
-CMD [ "pnpm", "start" ]
+CMD [ "pnpm", "start" ]

Dockerfile.cloud

@@ -0,0 +1,52 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/dokploy install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/dokploy run build
+
+RUN pnpm --filter=./apps/dokploy --prod deploy /prod/dokploy
+
+RUN cp -R /usr/src/app/apps/dokploy/.next /prod/dokploy/.next
+RUN cp -R /usr/src/app/apps/dokploy/dist /prod/dokploy/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var/lib/apt/lists/*
+
+# Copy only the necessary files
+COPY --from=build /prod/dokploy/.next ./.next
+COPY --from=build /prod/dokploy/dist ./dist
+COPY --from=build /prod/dokploy/next.config.mjs ./next.config.mjs
+COPY --from=build /prod/dokploy/public ./public
+COPY --from=build /prod/dokploy/package.json ./package.json
+COPY --from=build /prod/dokploy/drizzle ./drizzle
+COPY --from=build /prod/dokploy/components.json ./components.json
+COPY --from=build /prod/dokploy/node_modules ./node_modules
+
+
+# Install RCLONE
+RUN curl https://rclone.org/install.sh | bash
+
+# tsx
+RUN pnpm install -g tsx
+
+EXPOSE 3000
+CMD [ "pnpm", "start" ]

Dockerfile.schedule

@@ -0,0 +1,36 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/schedules install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/schedules run build
+
+RUN pnpm --filter=./apps/schedules --prod deploy /prod/schedules
+
+RUN cp -R /usr/src/app/apps/schedules/dist /prod/schedules/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+# Copy only the necessary files
+COPY --from=build /prod/schedules/dist ./dist
+COPY --from=build /prod/schedules/package.json ./package.json
+COPY --from=build /prod/schedules/node_modules ./node_modules
+
+CMD HOSTNAME=0.0.0.0 && pnpm start

Dockerfile.server

@@ -0,0 +1,36 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/api install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/api run build
+
+RUN pnpm --filter=./apps/api --prod deploy /prod/api
+
+RUN cp -R /usr/src/app/apps/api/dist /prod/api/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+# Copy only the necessary files
+COPY --from=build /prod/api/dist ./dist
+COPY --from=build /prod/api/package.json ./package.json
+COPY --from=build /prod/api/node_modules ./node_modules
+
+CMD HOSTNAME=0.0.0.0 && pnpm start

README.md

@@ -32,6 +32,7 @@ Dokploy include multiples features to make your life easier.
 - **Docker Management**: Easily deploy and manage Docker containers.
 - **CLI/API**: Manage your applications and databases using the command line or trought the API.
 - **Notifications**: Get notified when your deployments are successful or failed (Slack, Discord, Telegram, Email, etc.)
+- **Multi Server**: Deploy and manager your applications remotely to external servers.
 - **Self-Hosted**: Self-host Dokploy on your VPS.
 
 ## 🚀 Getting Started
@@ -58,7 +59,14 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 ### Hero Sponsors 🎖
 
-<a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" ><img src=".github/sponsors/hostinger.jpg" alt="Hostinger" width="200"/></a>
+<div style="display: flex; align-items: center; gap: 20px;">
+  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" style="display: inline-block;">
+    <img src=".github/sponsors/hostinger.jpg" alt="Hostinger" height="50"/>
+  </a>
+  <a href="https://www.lxaer.com/?ref=dokploy" target="_blank" style="display: inline-block;">
+    <img src=".github/sponsors/lxaer.png" alt="LX Aer" height="50"/>
+  </a>
+</div>
 
 ### Premium Supporters 🥇
 
@@ -81,6 +89,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">
 <a href="https://steamsets.com/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/111978405?s=200&v=4" width="60px" alt="Steamsets.com"/></a>
+<a href="https://rivo.gg/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/126797452?s=200&v=4" width="60px" alt="Rivo.gg"/></a>
 </div>
 
 #### Organizations:

apps/api/package.json

@@ -1,15 +1,33 @@
 {
-	"name": "my-app",
+	"name": "@dokploy/api",
+	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "tsx watch src/index.ts"
+		"dev": "PORT=4000 tsx watch src/index.ts",
+		"build": "tsc --project tsconfig.json",
+		"start": "node --experimental-specifier-resolution=node dist/index.js",
+		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"pino": "9.4.0",
+		"pino-pretty": "11.2.2",
+		"@hono/zod-validator": "0.3.0",
+		"zod": "^3.23.4",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"@dokploy/server": "workspace:*",
 		"@hono/node-server": "^1.12.1",
 		"hono": "^4.5.8",
-		"dotenv": "^16.3.1"
+		"dotenv": "^16.3.1",
+		"redis": "4.7.0",
+		"@nerimity/mimiqueue": "1.2.3"
 	},
 	"devDependencies": {
+		"typescript": "^5.4.2",
+		"@types/react": "^18.2.37",
+		"@types/react-dom": "^18.2.15",
 		"@types/node": "^20.11.17",
 		"tsx": "^4.7.1"
-	}
+	},
+	"packageManager": "pnpm@9.5.0"
 }

apps/api/src/index.ts

@@ -1,66 +1,61 @@
 import { serve } from "@hono/node-server";
-import { config } from "dotenv";
 import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { validateLemonSqueezyLicense } from "./utils";
-
-config();
+import "dotenv/config";
+import { zValidator } from "@hono/zod-validator";
+import { Queue } from "@nerimity/mimiqueue";
+import { createClient } from "redis";
+import { logger } from "./logger";
+import { type DeployJob, deployJobSchema } from "./schema";
+import { deploy } from "./utils";
 
 const app = new Hono();
-
-app.use(
-	"/*",
-	cors({
-		origin: ["http://localhost:3000", "http://localhost:3001"], // Ajusta esto a los orígenes de tu aplicación Next.js
-		allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
-		allowHeaders: ["Content-Type", "Authorization"],
-		exposeHeaders: ["Content-Length", "X-Kuma-Revision"],
-		maxAge: 600,
-		credentials: true,
-	}),
-);
-
-export const LEMON_SQUEEZY_API_KEY = process.env.LEMON_SQUEEZY_API_KEY;
-export const LEMON_SQUEEZY_STORE_ID = process.env.LEMON_SQUEEZY_STORE_ID;
-
-app.get("/v1/health", (c) => {
-	return c.text("Hello Hono!");
+const redisClient = createClient({
+	url: process.env.REDIS_URL,
 });
 
-app.post("/v1/validate-license", async (c) => {
-	const { licenseKey } = await c.req.json();
+app.use(async (c, next) => {
+	if (c.req.path === "/health") {
+		return next();
+	}
+	const authHeader = c.req.header("X-API-Key");
 
-	if (!licenseKey) {
-		return c.json({ error: "License key is required" }, 400);
+	if (process.env.API_KEY !== authHeader) {
+		return c.json({ message: "Invalid API Key" }, 403);
 	}
 
-	try {
-		const licenseValidation = await validateLemonSqueezyLicense(licenseKey);
-
-		if (licenseValidation.valid) {
-			return c.json({
-				valid: true,
-				message: "License is valid",
-				metadata: licenseValidation.meta,
-			});
-		}
-		return c.json(
-			{
-				valid: false,
-				message: licenseValidation.error || "Invalid license",
-			},
-			400,
-		);
-	} catch (error) {
-		console.error("Error during license validation:", error);
-		return c.json({ error: "Internal server error" }, 500);
-	}
+	return next();
 });
 
-const port = 4000;
-console.log(`Server is running on port ${port}`);
-
-serve({
-	fetch: app.fetch,
-	port,
+app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
+	const data = c.req.valid("json");
+	const res = queue.add(data, { groupName: data.serverId });
+	return c.json(
+		{
+			message: "Deployment Added",
+		},
+		200,
+	);
 });
+
+app.get("/health", async (c) => {
+	return c.json({ status: "ok" });
+});
+
+const queue = new Queue({
+	name: "deployments",
+	process: async (job: DeployJob) => {
+		logger.info("Deploying job", job);
+		return await deploy(job);
+	},
+	redisClient,
+});
+
+(async () => {
+	await redisClient.connect();
+	await redisClient.flushAll();
+	logger.info("Redis Cleaned");
+})();
+
+const port = Number.parseInt(process.env.PORT || "3000");
+logger.info("Starting Deployments Server ✅", port);
+serve({ fetch: app.fetch, port });

apps/api/src/logger.ts

@@ -0,0 +1,10 @@
+import pino from "pino";
+
+export const logger = pino({
+	transport: {
+		target: "pino-pretty",
+		options: {
+			colorize: true,
+		},
+	},
+});

apps/api/src/schema.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+export const deployJobSchema = z.discriminatedUnion("applicationType", [
+	z.object({
+		applicationId: z.string(),
+		titleLog: z.string(),
+		descriptionLog: z.string(),
+		server: z.boolean().optional(),
+		type: z.enum(["deploy", "redeploy"]),
+		applicationType: z.literal("application"),
+		serverId: z.string(),
+	}),
+	z.object({
+		composeId: z.string(),
+		titleLog: z.string(),
+		descriptionLog: z.string(),
+		server: z.boolean().optional(),
+		type: z.enum(["deploy", "redeploy"]),
+		applicationType: z.literal("compose"),
+		serverId: z.string(),
+	}),
+]);
+
+export type DeployJob = z.infer<typeof deployJobSchema>;

apps/api/src/utils.ts

@@ -1,28 +1,96 @@
-import { LEMON_SQUEEZY_API_KEY, LEMON_SQUEEZY_STORE_ID } from ".";
+import {
+	deployApplication,
+	deployCompose,
+	deployRemoteApplication,
+	deployRemoteCompose,
+	rebuildApplication,
+	rebuildCompose,
+	rebuildRemoteApplication,
+	rebuildRemoteCompose,
+	updateApplicationStatus,
+	updateCompose,
+} from "@dokploy/server";
+import type { DeployJob } from "./schema";
 import type { LemonSqueezyLicenseResponse } from "./types";
 
-export const validateLemonSqueezyLicense = async (
-	licenseKey: string,
-): Promise<LemonSqueezyLicenseResponse> => {
-	try {
-		const response = await fetch(
-			"https://api.lemonsqueezy.com/v1/licenses/validate",
-			{
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"x-api-key": LEMON_SQUEEZY_API_KEY as string,
-				},
-				body: JSON.stringify({
-					license_key: licenseKey,
-					store_id: LEMON_SQUEEZY_STORE_ID as string,
-				}),
-			},
-		);
+// const LEMON_SQUEEZY_API_KEY = process.env.LEMON_SQUEEZY_API_KEY;
+// const LEMON_SQUEEZY_STORE_ID = process.env.LEMON_SQUEEZY_STORE_ID;
+// export const validateLemonSqueezyLicense = async (
+// 	licenseKey: string,
+// ): Promise<LemonSqueezyLicenseResponse> => {
+// 	try {
+// 		const response = await fetch(
+// 			"https://api.lemonsqueezy.com/v1/licenses/validate",
+// 			{
+// 				method: "POST",
+// 				headers: {
+// 					"Content-Type": "application/json",
+// 					"x-api-key": LEMON_SQUEEZY_API_KEY as string,
+// 				},
+// 				body: JSON.stringify({
+// 					license_key: licenseKey,
+// 					store_id: LEMON_SQUEEZY_STORE_ID as string,
+// 				}),
+// 			},
+// 		);
 
-		return response.json();
+// 		return response.json();
+// 	} catch (error) {
+// 		console.error("Error validating license:", error);
+// 		return { valid: false, error: "Error validating license" };
+// 	}
+// };
+
+export const deploy = async (job: DeployJob) => {
+	try {
+		if (job.applicationType === "application") {
+			await updateApplicationStatus(job.applicationId, "running");
+			if (job.server) {
+				if (job.type === "redeploy") {
+					await rebuildRemoteApplication({
+						applicationId: job.applicationId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				} else if (job.type === "deploy") {
+					await deployRemoteApplication({
+						applicationId: job.applicationId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				}
+			}
+		} else if (job.applicationType === "compose") {
+			await updateCompose(job.composeId, {
+				composeStatus: "running",
+			});
+
+			if (job.server) {
+				if (job.type === "redeploy") {
+					await rebuildRemoteCompose({
+						composeId: job.composeId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				} else if (job.type === "deploy") {
+					await deployRemoteCompose({
+						composeId: job.composeId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				}
+			}
+		}
 	} catch (error) {
-		console.error("Error validating license:", error);
-		return { valid: false, error: "Error validating license" };
+		console.log(error);
+		if (job.applicationType === "application") {
+			await updateApplicationStatus(job.applicationId, "error");
+		} else if (job.applicationType === "compose") {
+			await updateCompose(job.composeId, {
+				composeStatus: "error",
+			});
+		}
 	}
+
+	return true;
 };

apps/api/tsconfig.json

@@ -2,11 +2,12 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"module": "ESNext",
-		"moduleResolution": "Bundler",
+		"moduleResolution": "Node",
 		"strict": true,
 		"skipLibCheck": true,
-		"types": ["node"],
+		"outDir": "dist",
 		"jsx": "react-jsx",
 		"jsxImportSource": "hono/jsx"
-	}
+	},
+	"exclude": ["node_modules", "dist"]
 }

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -74,7 +74,7 @@ export function generateMetadata({
 		},
 		twitter: {
 			card: "summary_large_image",
-			creator: "@siumauricio",
+			creator: "@getdokploy",
 			title: page.data.title,
 			description: page.data.description,
 			images: [

apps/docs/content/docs/core/application/overview.mdx

@@ -15,6 +15,8 @@ Configure the source of your code, the way your application is built, and also m
 
 If you need to assign environment variables to your application, you can do so here.
 
+In case you need to use a multiline variable, you can wrap it in double quotes just like this `'"here_is_my_private_key"'`.
+
 ## Monitoring
 
 Four graphs will be displayed for the use of memory, CPU, disk, and network. Note that the information is only updated if you are viewing the current page, otherwise it will not be updated.

apps/docs/content/docs/core/databases/overview.mdx

@@ -26,6 +26,8 @@ Actions like deploying, updating, and deleting your database, and stopping it.
 
 If you need to assign environment variables to your application, you can do so here.
 
+In case you need to use a multiline variable, you can wrap it in double quotes just like this `'"here_is_my_private_key"'`.
+
 ## Monitoring
 
 Four graphs will be displayed for the use of memory, CPU, disk, and network. Note that the information is only updated if you are viewing the current page, otherwise it will not be updated.

apps/docs/content/docs/core/extra/comparison.mdx

@@ -1,22 +1,23 @@
 ---
-title: 'Comparison'
-description: 'A comparison of Dokploy, CapRover, Dokku, and Coolify'
+title: "Comparison"
+description: "A comparison of Dokploy, CapRover, Dokku, and Coolify"
 ---
 
 Comparison of the following deployment tools:
 
-| Feature                           | Dokploy                               | CapRover                             | Dokku                                | Coolify                              |
-|-----------------------------------|---------------------------------------|--------------------------------------|--------------------------------------|--------------------------------------|
-| **User Interface**                | ✅                                    | ✅                                   | ❌                                   | ✅                                   |
-| **Docker compose support**                   |  ✅                                  | ❌                                   | ❌                                   | ✅                                   |
-| **API/CLI**                       |  ✅                                  | ✅                                   | ✅                                   | ✅                                   |
-| **Multi node support**                   | ✅                                    | ✅                                   | ❌                                   | ✅                                   |
-| **Traefik Integration**           | ✅                                    | ✅                                   | Available via Plugins                                   | ✅                                   |
-| **User Permission Management**    | ✅                                    | ❌                                   | ❌                                   | ✅                                   |
-| **Advanced User Permission Management**    | ✅                                    | ❌                                   | ❌                                   | ❌                                   |
-| **Terminal Access Built In**               | ✅                                    | ❌                                   | ❌                                   | ✅                                   |
-| **Database Support**              | ✅                                    | ✅                                   | ❌                                   | ✅                                   |
-| **Monitoring**        | ✅                                    | ✅                                   | ❌                                    |         ❌                           |
-| **Backups**        | ✅                                    | Available via Plugins                                   | Available via Plugins                                    | ✅                                   |
-| **Open Source**                   | ✅                                    | ✅                                   | ✅                                   | ✅                                   |
-| **Cloud/Paid Version**                   | ❌                                    | ✅                                   | ❌                                   | ✅                                   |
+| Feature                                 | Dokploy | CapRover              | Dokku                 | Coolify |
+| --------------------------------------- | ------- | --------------------- | --------------------- | ------- |
+| **User Interface**                      | ✅      | ✅                    | ❌                    | ✅      |
+| **Docker compose support**              | ✅      | ❌                    | ❌                    | ✅      |
+| **API/CLI**                             | ✅      | ✅                    | ✅                    | ✅      |
+| **Multi node support**                  | ✅      | ✅                    | ❌                    | ✅      |
+| **Traefik Integration**                 | ✅      | ✅                    | Available via Plugins | ✅      |
+| **User Permission Management**          | ✅      | ❌                    | ❌                    | ✅      |
+| **Advanced User Permission Management** | ✅      | ❌                    | ❌                    | ❌      |
+| **Terminal Access Built In**            | ✅      | ❌                    | ❌                    | ✅      |
+| **Database Support**                    | ✅      | ✅                    | ❌                    | ✅      |
+| **Monitoring**                          | ✅      | ✅                    | ❌                    | ❌      |
+| **Backups**                             | ✅      | Available via Plugins | Available via Plugins | ✅      |
+| **Open Source**                         | ✅      | ✅                    | ✅                    | ✅      |
+| **Multi Server Support**                | ✅      | ❌                    | ❌                    | ✅      |
+| **Cloud/Paid Version**                  | ❌      | ✅                    | ✅                    | ✅      |

apps/docs/content/docs/core/get-started/installation.mdx

@@ -29,7 +29,7 @@ We have tested on the following Linux Distros:
 
 ### Providers
 
-- [Hostinger](https://www.hostinger.com/vps-hosting?ref=dokploy) Get 20% Discount using this referral link: [Referral Link](https://hostinger.com?REFERRALCODE=1SIUMAURICI97)
+- [Hostinger](https://www.hostinger.com/vps-hosting?ref=dokploy) Get 20% Discount using this referral link: [Referral Link](https://www.hostinger.com/vps-hosting?REFERRALCODE=1SIUMAURICI97)
 - [DigitalOcean](https://www.digitalocean.com/pricing/droplets#basic-droplets) Get 200$ credits for free with this referral link: [Referral Link](https://m.do.co/c/db24efd43f35)
 - [Hetzner](https://www.hetzner.com/cloud/) Get 20€ credits for free with this referral link: [Referral Link](https://hetzner.cloud/?ref=vou4fhxJ1W2D)
 - [Linode](https://www.linode.com/es/pricing/#compute-shared)

apps/docs/content/docs/core/meta.json

@@ -64,6 +64,9 @@
 		"docker/overview",
 		"---Monitoring---",
 		"monitoring/overview",
+		"---Multi Server---",
+		"multi-server/overview",
+		"multi-server/example",
 		"---Cluster---",
 		"cluster/overview",
 		"---Deployments---",

apps/docs/content/docs/core/multi-server/example.mdx

@@ -0,0 +1,117 @@
+---
+title: Example
+description: "Example to setup a remote server and deploy application in a VPS."
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+
+Multi server allows you to deploy your apps remotely to different servers without needing to build and run them where the Dokploy UI is installed.
+
+## Requirements
+
+1. To install Dokploy UI, follow the [installation guide](en/docs/core/get-started/installation).
+
+2. Create an SSH key by going to `/dashboard/settings/ssh-keys` and add a new key. Be sure to copy the public key.
+
+   <ImageZoom
+     src="/assets/ssh-keys.png"
+     alt="Architecture Diagram"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+3. Decide which remote server to deploy your apps on. We recommend these reliable providers:
+
+- [Hostinger](https://www.hostinger.com/vps-hosting?ref=dokploy) Get 20% off with this [referral link](https://www.hostinger.com/vps-hosting?REFERRALCODE=1SIUMAURICI97).
+- [DigitalOcean](https://www.digitalocean.com/pricing/droplets#basic-droplets) Get $200 credits for free with this [referral link](https://m.do.co/c/db24efd43f35).
+- [Hetzner](https://www.hetzner.com/cloud/) Get €20 credits with this [referral link](https://hetzner.cloud/?ref=vou4fhxJ1W2D).
+- [Linode](https://www.linode.com/es/pricing/#compute-shared).
+- [Vultr](https://www.vultr.com/pricing/#cloud-compute).
+- [Scaleway](https://www.scaleway.com/en/pricing/?tags=baremetal,available).
+- [Google Cloud](https://cloud.google.com/).
+- [AWS](https://aws.amazon.com/ec2/pricing/).
+
+4. When creating the server, it should ask for SSH keys. Ideally, use your computer's public key and the key you generated in the previous step. Here's how to add the public key in Hostinger:
+
+   <ImageZoom
+     src="/assets/hostinger-add-sshkey.png"
+     alt="Adding SSH key"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+<Callout>The steps are similar across other providers.</Callout>
+
+5. Copy the server’s IP address and ensure you know the username (often `root`). Fill in all fields and click `Create`.
+
+   <ImageZoom
+     src="/assets/multi-server-add-server.png"
+     alt="Add server"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+6. To test connectivity, open the server dropdown and click `Enter Terminal`. If everything is correct, you should be able to interact with the remote server.
+
+7. Click `Setup Server` to proceed. There are two tabs: SSH Keys and Deployments. This guide explains the easy way, but you can follow the manual process via the Dokploy UI if you prefer.
+
+   <ImageZoom
+     src="/assets/multi-server-setup-2.png"
+     alt="Setup process"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+8. Click `Deployments`, then `Setup Server`. If everything is correct, you should see output similar to this:
+
+   <ImageZoom
+     src="/assets/multi-server-setup-3.png"
+     alt="Server setup output"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+<Callout>
+  You only need to run this setup once. If Dokploy updates later, check the
+  release notes to see if rerunning this command is required.
+</Callout>
+
+9. You're ready to deploy your apps! Let's test it out:
+
+   <ImageZoom
+     src="/assets/multi-server-add-app.png"
+     alt="Add app"
+     width={1000}
+     height={600}
+     className="rounded-lg"
+   />
+
+10. To check which server an app belongs to, you’ll see the server name at the top. If no server is selected, it defaults to `Dokploy Server`. Click `Deploy` to start building your app on the remote server. You can check the `Logs` tab to see the build process. For this example, we’ll use a test repo:  
+    Repo: `https://github.com/Dokploy/examples.git`  
+    Branch: `main`  
+    Build Path: `/astro`
+
+    <ImageZoom
+      src="/assets/multi-server-setup-app.png"
+      alt="App setup"
+      width={1000}
+      height={600}
+      className="rounded-lg"
+    />
+
+11. Once the build is done, go to `Domains` and create a free domain. Just click `Create` and you’re good to go! 🎊
+
+{" "}
+
+<ImageZoom
+  src="/assets/multi-server-finish.png"
+  alt="Finished setup"
+  width={1000}
+  height={600}
+  className="rounded-lg"
+/>

apps/docs/content/docs/core/multi-server/overview.mdx

@@ -0,0 +1,29 @@
+---
+title: Overview
+description: "Deploy your apps to multiple servers remotely."
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+
+Multi server allows you to deploy your apps remotely to different servers without needing to build and run them where the Dokploy UI is installed.
+
+To use the multi-server feature, you need to have Dokploy UI installed either locally or on a remote server. We recommend using a remote server for better connectivity, security, and isolation, for remote instances we install only a traefik instance.
+
+If you plan to only deploy apps to remote servers and use Dokploy UI for managing deployments, Dokploy will use around 250 MB of RAM and minimal CPU, so a low-resource server should be sufficient.
+
+All the features we have documented previously are supported by Dokploy Multi Server. The only feature not supported is remote server monitoring, due to performance reasons. However, all functionalities should work the same as when deploying on the same server where Dokploy UI is installed.
+
+## Features
+
+1. **Enter the terminal**: Allows you to access the terminal of the remote server.
+2. **Setup Server**: Allows you to configure the remote server.
+   - **SSH Keys**: Steps to add SSH keys to the remote server.
+   - **Deployments**: Steps to configure the remote server for deploying applications.
+3. **Edit Server**: Allows you to modify the remote server's details, such as SSH key, name, description, IP, etc.
+4. **View Actions**: Lets you perform actions like managing the Traefik instance, storage, and activating Docker cleanup.
+5. **Show Traefik File System**: Displays the contents of the remote server's directory.
+6. **Show Docker Containers**: Shows the Docker containers running on the remote server.
+
+<Callout>
+  Remote server monitoring is not supported due to performance reasons.
+</Callout>

apps/docs/content/docs/core/templates/overview.mdx

@@ -31,8 +31,7 @@ The following templates are available:
 - **Wordpress**: Open Source Content Management System
 - **Open WebUI**: Free and Open Source ChatGPT Alternative
 - **Teable**: Open Source Airtable Alternative, Developer Friendly, No-code Database Built on Postgres
-
-
+- **Roundcube**: Free and open source webmail software for the masses, written in PHP, uses SMTP[^1].
 
 ## Create your own template
 
@@ -41,3 +40,5 @@ We accept contributions to upload new templates to the dokploy repository.
 Make sure to follow the guidelines for creating a template:
 
 [Steps to create your own template](https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#templates)
+
+[^1]: Please note that if you're self-hosting a mail server you need port 25 to be open for SMTP (Mail Transmission Protocol that allows you to send and receive) to work properly. Some VPS providers like [Hetzner](https://docs.hetzner.com/cloud/servers/faq/#why-can-i-not-send-any-mails-from-my-server) block this port by default for new clients.

apps/docs/content/docs/core/troubleshooting/overview.mdx

@@ -3,4 +3,90 @@ title: Overview
 description: Solve the most common problems that occur when using Dokploy.
 ---
 
-WIP
+## Applications Domain Not Working?
+
+You see the deployment succeeded, and logs are running, but the domain isn't working? Here's what to check:
+
+1. **Correct Port Mapping**: Ensure the domain is using the correct port for your application. For example, if you're using Next.js, the port should be `3000`, or for Laravel, it should be `8000`. If you change the app port, update the domain to reflect that.
+2. **Avoid Using `Ports` in Advanced Settings**: Generally, there's no need to use the `Ports` feature unless you want to access your app via `IP:port`. Leaving this feature enabled may interfere with your domain.
+
+3. **Let's Encrypt Certificates**: It's crucial to point the domain to your server’s IP **before** adding it in Dokploy. If the domain is added first, the certificate won’t be generated, and you may need to recreate the domain or restart Traefik.
+
+4. **Listen on 0.0.0.0, Not 127.0.0.1**: If your app is bound to `127.0.0.1` (which is common in Vite apps), switch it to `0.0.0.0` to allow external access.
+
+## Logs and Monitoring Not Working After Changing Application Placement?
+
+This is expected behavior. If the application is running on a different node (worker), the UI won’t have access to logs or monitoring, as they're not on the same node.
+
+## Mounts Are Causing My Application Not to Run?
+
+Docker Swarm won't run your application if there are invalid mounts, even if the deployment shows as successful. Double-check your mounts to ensure they are valid.
+
+## Volumes in Docker Compose Not Working?
+
+For Docker Compose, all file mounts defined in the `volumes` section will be stored in the `files` folder. This is the default directory structure:
+
+## I added a volume to my docker compose, but is not finding the volume?
+
+For docker compose all the file mounts you've created in the volumes section will be stored to files folder, this is the default structure of the docker compose.
+
+```
+/application-name
+    /code
+    /files
+```
+
+So instead of using this invalid way to mount a volume:
+
+```yaml
+volumes:
+    - "/folder:/path/in/container" ❌
+```
+
+You should use this format:
+
+```yaml
+volumes:
+    - "../files/my-database:/var/lib/mysql" ✅
+    - "../files/my-configs:/etc/my-app/config" ✅
+```
+
+## Logs Not Loading When Deploying to a Remote Server?
+
+There are a few potential reasons for this:
+
+1. **Slow Server:**: If the server is too slow, it may struggle to handle concurrent requests, leading to SSL handshake errors.
+2. **Insufficient Disk Space:** If the server doesn't have enough disk space, the logs may not load.
+
+## Docker Compose Domain Not Working?
+
+When adding a domain in your Docker Compose file, it’s not necessary to expose the ports directly. Simply specify the port where your app is running. Exposing the ports can lead to conflicts with other applications or ports.
+
+Example of what not to do:
+
+```yaml
+services:
+  app:
+    image: dokploy/dokploy:latest
+    ports:
+      - 3000:3000
+```
+
+Recommended approach:
+
+```yaml
+services:
+  app:
+    image: dokploy/dokploy:latest
+    ports:
+      - 3000
+      - 80
+```
+
+Then, when creating the domain in Dokploy, specify the service name and port, like this:
+
+```yaml
+domain: my-app.com
+serviceName: app
+port: 3000
+```

apps/docs/mdx-components.tsx

@@ -10,8 +10,10 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 		p: ({ children }) => (
 			<p className="text-[#3E4342] dark:text-muted-foreground">{children}</p>
 		),
-		li: ({ children }) => (
-			<li className="text-[#3E4342] dark:text-muted-foreground">{children}</li>
+		li: ({ children, id }) => (
+			<li {...{ id }} className="text-[#3E4342] dark:text-muted-foreground">
+				{children}
+			</li>
 		),
 	};
 }

apps/docs/package.json

@@ -21,15 +21,11 @@
 		"react-ga4": "^2.1.0"
 	},
 	"devDependencies": {
-		"tsx": "4.15.7",
-		"@biomejs/biome": "1.8.1",
+		"autoprefixer": "10.4.12",
 		"@types/mdx": "^2.0.13",
-		"@types/node": "^20.14.2",
 		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
-		"tailwindcss": "^3.4.4",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.4.5"
 	}
 }

apps/dokploy/LICENSE.MD

@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and limitations
 
 ## Additional Terms for Specific Features
 
-The following additional terms apply to the multi-node support and Docker Compose file support features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
+The following additional terms apply to the multi-node support, Docker Compose file and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
 
-- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support and Docker Compose file support, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support and Docker Compose file support features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support and Docker Compose file support features must be distributed freely and cannot be sold or offered as a service.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support and Multi Server, will always be free to use in the self-hosted version.
+- **Restriction on Resale**: The multi-node support, Docker Compose file support and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
+- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support and Multi Server features must be distributed freely and cannot be sold or offered as a service.
 
 For further inquiries or permissions, please contact us directly.

apps/dokploy/__test__/compose/compose.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllProperties } from "@/server/utils/docker/compose";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { addSuffixToAllProperties } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToConfigsRoot } from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToConfigsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-service.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToConfigsInServices } from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToConfigsInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config.test.ts

@@ -1,9 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import {
-	addSuffixToAllConfigs,
-	addSuffixToConfigsRoot,
-} from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToAllConfigs, addSuffixToConfigsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -1,5 +1,5 @@
-import type { Domain } from "@/server/api/services/domain";
-import { createDomainLabels } from "@/server/utils/docker/domain";
+import type { Domain } from "@dokploy/server";
+import { createDomainLabels } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("createDomainLabels", () => {

apps/dokploy/__test__/compose/domain/network-root.test.ts

@@ -1,4 +1,4 @@
-import { addDokployNetworkToRoot } from "@/server/utils/docker/domain";
+import { addDokployNetworkToRoot } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("addDokployNetworkToRoot", () => {

apps/dokploy/__test__/compose/domain/network-service.test.ts

@@ -1,4 +1,4 @@
-import { addDokployNetworkToService } from "@/server/utils/docker/domain";
+import { addDokployNetworkToService } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("addDokployNetworkToService", () => {

apps/dokploy/__test__/compose/network/network-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToNetworksRoot } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToNetworksRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network-service.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNetworks } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNetworks } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network.test.ts

@@ -1,10 +1,10 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
+import { generateRandomHash } from "@dokploy/server";
 import {
 	addSuffixToAllNetworks,
 	addSuffixToServiceNetworks,
-} from "@/server/utils/docker/compose/network";
-import { addSuffixToNetworksRoot } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import { addSuffixToNetworksRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToSecretsRoot } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToSecretsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { dump, load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-services.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToSecretsInServices } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToSecretsInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllSecrets } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { addSuffixToAllSecrets } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-container-name.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-depends-on.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-extends.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-links.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-names.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service.test.ts

@@ -1,8 +1,8 @@
 import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
-} from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/sevice-volumes-from.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-2.test.ts

@@ -1,9 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import {
-	addSuffixToAllVolumes,
-	addSuffixToVolumesRoot,
-} from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToAllVolumes, addSuffixToVolumesRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToVolumesRoot } from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToVolumesRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-services.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToVolumesInServices } from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToVolumesInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume.test.ts

@@ -1,9 +1,9 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
+import { generateRandomHash } from "@dokploy/server";
 import {
 	addSuffixToAllVolumes,
 	addSuffixToVolumesInServices,
-} from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

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

@@ -1,7 +1,9 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { APPLICATIONS_PATH } from "@/server/constants";
-import { unzipDrop } from "@/server/utils/builders/drop";
+import { paths } from "@dokploy/server/dist/constants";
+const { APPLICATIONS_PATH } = paths();
+import type { ApplicationNested } from "@dokploy/server";
+import { unzipDrop } from "@dokploy/server";
 import AdmZip from "adm-zip";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
@@ -11,11 +13,87 @@ if (typeof window === "undefined") {
 	globalThis.FileList = undici.FileList as any;
 }
 
-vi.mock("@/server/constants", () => ({
-	APPLICATIONS_PATH: "./__test__/drop/zips/output",
-}));
+const baseApp: ApplicationNested = {
+	applicationId: "",
+	applicationStatus: "done",
+	appName: "",
+	autoDeploy: true,
+	serverId: "",
+	branch: null,
+	dockerBuildStage: "",
+	buildArgs: null,
+	buildPath: "/",
+	gitlabPathNamespace: "",
+	buildType: "nixpacks",
+	bitbucketBranch: "",
+	bitbucketBuildPath: "",
+	bitbucketId: "",
+	bitbucketRepository: "",
+	bitbucketOwner: "",
+	githubId: "",
+	gitlabProjectId: 0,
+	gitlabBranch: "",
+	gitlabBuildPath: "",
+	gitlabId: "",
+	gitlabRepository: "",
+	gitlabOwner: "",
+	command: null,
+	cpuLimit: null,
+	cpuReservation: null,
+	createdAt: "",
+	customGitBranch: "",
+	customGitBuildPath: "",
+	customGitSSHKeyId: null,
+	customGitUrl: "",
+	description: "",
+	dockerfile: null,
+	dockerImage: null,
+	dropBuildPath: null,
+	enabled: null,
+	env: null,
+	healthCheckSwarm: null,
+	labelsSwarm: null,
+	memoryLimit: null,
+	memoryReservation: null,
+	modeSwarm: null,
+	mounts: [],
+	name: "",
+	networkSwarm: null,
+	owner: null,
+	password: null,
+	placementSwarm: null,
+	ports: [],
+	projectId: "",
+	publishDirectory: null,
+	redirects: [],
+	refreshToken: "",
+	registry: null,
+	registryId: null,
+	replicas: 1,
+	repository: null,
+	restartPolicySwarm: null,
+	rollbackConfigSwarm: null,
+	security: [],
+	sourceType: "git",
+	subtitle: null,
+	title: null,
+	updateConfigSwarm: null,
+	username: null,
+	dockerContextPath: null,
+};
 
+vi.mock("@dokploy/server/dist/constants", async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		// @ts-ignore
+		...actual,
+		paths: () => ({
+			APPLICATIONS_PATH: "./__test__/drop/zips/output",
+		}),
+	};
+});
 describe("unzipDrop using real zip files", () => {
+	// const { APPLICATIONS_PATH } = paths();
 	beforeAll(async () => {
 		await fs.rm(APPLICATIONS_PATH, { recursive: true, force: true });
 	});
@@ -25,39 +103,46 @@ describe("unzipDrop using real zip files", () => {
 	});
 
 	it("should correctly extract a zip with a single root folder", async () => {
-		const appName = "single-file";
-		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, appName);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-		expect(files.some((f) => f.name === "test.txt")).toBe(true);
+		baseApp.appName = "single-file";
+		// const appName = "single-file";
+		try {
+			const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+			const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
+			console.log(`Output Path: ${outputPath}`);
+			const zipBuffer = zip.toBuffer();
+			const file = new File([zipBuffer], "single.zip");
+			await unzipDrop(file, baseApp);
+			const files = await fs.readdir(outputPath, { withFileTypes: true });
+			expect(files.some((f) => f.name === "test.txt")).toBe(true);
+		} catch (err) {
+			console.log(err);
+		} finally {
+		}
 	});
 
 	it("should correctly extract a zip with a single root folder and a subfolder", async () => {
-		const appName = "folderwithfile";
-		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
+		baseApp.appName = "folderwithfile";
+		// const appName = "folderwithfile";
+		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 		const zip = new AdmZip("./__test__/drop/zips/folder-with-file.zip");
 
 		const zipBuffer = zip.toBuffer();
 		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, appName);
+		await unzipDrop(file, baseApp);
 
 		const files = await fs.readdir(outputPath, { withFileTypes: true });
 		expect(files.some((f) => f.name === "folder1.txt")).toBe(true);
 	});
 
 	it("should correctly extract a zip with multiple root folders", async () => {
-		const appName = "two-folders";
-		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
+		baseApp.appName = "two-folders";
+		// const appName = "two-folders";
+		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 		const zip = new AdmZip("./__test__/drop/zips/two-folders.zip");
 
 		const zipBuffer = zip.toBuffer();
 		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, appName);
+		await unzipDrop(file, baseApp);
 
 		const files = await fs.readdir(outputPath, { withFileTypes: true });
 
@@ -66,13 +151,14 @@ describe("unzipDrop using real zip files", () => {
 	});
 
 	it("should correctly extract a zip with a single root with a file", async () => {
-		const appName = "nested";
-		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
+		baseApp.appName = "nested";
+		// const appName = "nested";
+		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 		const zip = new AdmZip("./__test__/drop/zips/nested.zip");
 
 		const zipBuffer = zip.toBuffer();
 		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, appName);
+		await unzipDrop(file, baseApp);
 
 		const files = await fs.readdir(outputPath, { withFileTypes: true });
 
@@ -82,13 +168,14 @@ describe("unzipDrop using real zip files", () => {
 	});
 
 	it("should correctly extract a zip with a single root with a folder", async () => {
-		const appName = "folder-with-sibling-file";
-		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
+		baseApp.appName = "folder-with-sibling-file";
+		// const appName = "folder-with-sibling-file";
+		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 		const zip = new AdmZip("./__test__/drop/zips/folder-with-sibling-file.zip");
 
 		const zipBuffer = zip.toBuffer();
 		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, appName);
+		await unzipDrop(file, baseApp);
 
 		const files = await fs.readdir(outputPath, { withFileTypes: true });
 

apps/dokploy/__test__/requests/request.test.ts

@@ -1,4 +1,4 @@
-import { parseRawConfig, processLogs } from "@/server/utils/access-log/utils";
+import { parseRawConfig, processLogs } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
 

apps/dokploy/__test__/traefik/server/update-server-config.test.ts

@@ -5,11 +5,12 @@ vi.mock("node:fs", () => ({
 	default: fs,
 }));
 
-import type { Admin } from "@/server/api/services/admin";
-import { createDefaultServerTraefikConfig } from "@/server/setup/traefik-setup";
-import { loadOrCreateConfig } from "@/server/utils/traefik/application";
-import type { FileConfig } from "@/server/utils/traefik/file-types";
-import { updateServerTraefik } from "@/server/utils/traefik/web-server";
+import type { Admin, FileConfig } from "@dokploy/server";
+import {
+	createDefaultServerTraefikConfig,
+	loadOrCreateConfig,
+	updateServerTraefik,
+} from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: Admin = {

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

@@ -1,7 +1,7 @@
-import type { Domain } from "@/server/api/services/domain";
-import type { Redirect } from "@/server/api/services/redirect";
-import type { ApplicationNested } from "@/server/utils/builders";
-import { createRouterConfig } from "@/server/utils/traefik/domain";
+import type { Domain } from "@dokploy/server";
+import type { Redirect } from "@dokploy/server";
+import type { ApplicationNested } from "@dokploy/server";
+import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
@@ -9,6 +9,7 @@ const baseApp: ApplicationNested = {
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
+	serverId: "",
 	branch: null,
 	dockerBuildStage: "",
 	buildArgs: null,

apps/dokploy/__test__/vitest.config.ts

@@ -13,4 +13,9 @@ export default defineConfig({
 		exclude: ["**/node_modules/**", "**/dist/**", "**/.docker/**"],
 		pool: "forks",
 	},
+	define: {
+		"process.env": {
+			NODE: "test",
+		},
+	},
 });

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

@@ -278,6 +278,12 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<div className="px-4">
+					<AlertBlock type="info">
+						Changing settings such as placements may cause the logs/monitoring
+						to be unavailable.
+					</AlertBlock>
+				</div>
 
 				<Form {...form}>
 					<form

apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx

@@ -17,7 +17,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -125,28 +125,14 @@ export const UpdatePort = ({ portId }: Props) => {
 									<FormItem>
 										<FormLabel>Published Port</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="1-65535"
-												{...field}
-												value={field.value?.toString() || ""}
-												onChange={(e) => {
-													const value = e.target.value;
-													if (value === "") {
-														field.onChange(0);
-													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
-													}
-												}}
-											/>
+											<NumberInput placeholder="1-65535" {...field} />
 										</FormControl>
 
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
+
 							<FormField
 								control={form.control}
 								name="targetPort"
@@ -154,22 +140,7 @@ export const UpdatePort = ({ portId }: Props) => {
 									<FormItem>
 										<FormLabel>Target Port</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="1-65535"
-												{...field}
-												value={field.value?.toString() || ""}
-												onChange={(e) => {
-													const value = e.target.value;
-													if (value === "") {
-														field.onChange(0);
-													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
-													}
-												}}
-											/>
+											<Input placeholder="1-65535" {...field} />
 										</FormControl>
 
 										<FormMessage />

apps/dokploy/components/dashboard/application/advanced/redirects/add-redirect.tsx

@@ -19,6 +19,15 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -36,6 +45,36 @@ const AddRedirectchema = z.object({
 
 type AddRedirect = z.infer<typeof AddRedirectchema>;
 
+// Default presets
+const redirectPresets = [
+	// {
+	// 	label: "Allow www & non-www.",
+	// 	redirect: {
+	// 		regex: "",
+	// 		permanent: false,
+	// 		replacement: "",
+	// 	},
+	// },
+	{
+		id: "to-www",
+		label: "Redirect to www",
+		redirect: {
+			regex: "^https?://(?:www.)?(.+)",
+			permanent: true,
+			replacement: "https://www.$${1}",
+		},
+	},
+	{
+		id: "to-non-www",
+		label: "Redirect to non-www",
+		redirect: {
+			regex: "^https?://www.(.+)",
+			permanent: true,
+			replacement: "https://$${1}",
+		},
+	},
+];
+
 interface Props {
 	applicationId: string;
 	children?: React.ReactNode;
@@ -43,9 +82,10 @@ interface Props {
 
 export const AddRedirect = ({
 	applicationId,
-	children = <PlusIcon className="h-4 w-4" />,
+	children = <PlusIcon className="w-4 h-4" />,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
+	const [presetSelected, setPresetSelected] = useState("");
 	const utils = api.useUtils();
 
 	const { mutateAsync, isLoading, error, isError } =
@@ -81,19 +121,36 @@ export const AddRedirect = ({
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
-				setIsOpen(false);
+				onDialogToggle(false);
 			})
 			.catch(() => {
 				toast.error("Error to create the redirect");
 			});
 	};
 
+	const onDialogToggle = (open: boolean) => {
+		setIsOpen(open);
+		// commented for the moment because not reseting the form if accidentally closed the dialog can be considered as a feature instead of a bug
+		// setPresetSelected("");
+		// form.reset();
+	};
+
+	const onPresetSelect = (presetId: string) => {
+		const redirectPreset = redirectPresets.find(
+			(preset) => preset.id === presetId,
+		)?.redirect;
+		if (!redirectPreset) return;
+		const { regex, permanent, replacement } = redirectPreset;
+		form.reset({ regex, permanent, replacement }, { keepDefaultValues: true });
+		setPresetSelected(presetId);
+	};
+
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+		<Dialog open={isOpen} onOpenChange={onDialogToggle}>
 			<DialogTrigger asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Redirects</DialogTitle>
 					<DialogDescription>
@@ -102,6 +159,24 @@ export const AddRedirect = ({
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
+				<div className="md:col-span-2">
+					<Label>Presets</Label>
+					<Select onValueChange={onPresetSelect} value={presetSelected}>
+						<SelectTrigger>
+							<SelectValue placeholder="No preset selected" />
+						</SelectTrigger>
+						<SelectContent>
+							{redirectPresets.map((preset) => (
+								<SelectItem key={preset.label} value={preset.id}>
+									{preset.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<Separator />
+
 				<Form {...form}>
 					<form
 						id="hook-form-add-redirect"
@@ -142,7 +217,7 @@ export const AddRedirect = ({
 								control={form.control}
 								name="permanent"
 								render={({ field }) => (
-									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+									<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
 										<div className="space-y-0.5">
 											<FormLabel>Permanent</FormLabel>
 											<FormDescription>

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

@@ -80,7 +80,7 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/application/advanced/traefik/show-traefik-config.tsx

@@ -7,7 +7,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { File } from "lucide-react";
+import { File, Loader2 } from "lucide-react";
 import React from "react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
 }
 
 export const ShowTraefikConfig = ({ applicationId }: Props) => {
-	const { data } = api.application.readTraefikConfig.useQuery(
+	const { data, isLoading } = api.application.readTraefikConfig.useQuery(
 		{
 			applicationId,
 		},
@@ -35,7 +35,12 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 				</div>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				{data === null ? (
+				{isLoading ? (
+					<span className="text-base text-muted-foreground flex flex-row gap-3 items-center justify-center min-h-[10vh]">
+						Loading...
+						<Loader2 className="animate-spin" />
+					</span>
+				) : !data ? (
 					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 						<File className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">

apps/dokploy/components/dashboard/application/advanced/volumes/show-volumes.tsx

@@ -7,7 +7,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { AlertTriangle, Package } from "lucide-react";
+import { Package } from "lucide-react";
 import React from "react";
 import { AddVolumes } from "./add-volumes";
 import { DeleteVolume } from "./delete-volume";

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -11,24 +11,42 @@ interface Props {
 	logPath: string | null;
 	open: boolean;
 	onClose: () => void;
+	serverId?: string;
 }
-export const ShowDeployment = ({ logPath, open, onClose }: Props) => {
+export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}`;
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}${serverId ? `&serverId=${serverId}` : ""}`;
 		const ws = new WebSocket(wsUrl);
+		wsRef.current = ws; // Store WebSocket instance in ref
 
 		ws.onmessage = (e) => {
 			setData((currentData) => currentData + e.data);
 		};
 
-		return () => ws.close();
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			console.log("WebSocket connection closed");
+			wsRef.current = null; // Clear reference on close
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
 	}, [logPath, open]);
 
 	const scrollToBottom = () => {
@@ -44,7 +62,15 @@ export const ShowDeployment = ({ logPath, open, onClose }: Props) => {
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
 			}}
 		>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>

apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx

@@ -25,7 +25,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 		{ applicationId },
 		{
 			enabled: !!applicationId,
-			refetchInterval: 5000,
+			refetchInterval: 1000,
 		},
 	);
 	const [url, setUrl] = React.useState("");
@@ -110,6 +110,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 					</div>
 				)}
 				<ShowDeployment
+					serverId={data?.serverId || ""}
 					open={activeLog !== null}
 					onClose={() => setActiveLog(null)}
 					logPath={activeLog}

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

@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -140,7 +140,7 @@ export const AddDomain = ({
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
@@ -175,6 +175,7 @@ export const AddDomain = ({
 																onClick={() => {
 																	generateDomain({
 																		appName: application?.appName || "",
+																		serverId: application?.serverId || "",
 																	})
 																		.then((domain) => {
 																			field.onChange(domain);
@@ -227,19 +228,36 @@ export const AddDomain = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
-														placeholder={"3000"}
-														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
-													/>
+													<NumberInput placeholder={"3000"} {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>
 										);
 									}}
 								/>
+
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+
 								{form.getValues().https && (
 									<FormField
 										control={form.control}
@@ -269,38 +287,12 @@ export const AddDomain = ({
 										)}
 									/>
 								)}
-
-								<FormField
-									control={form.control}
-									name="https"
-									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>HTTPS</FormLabel>
-												<FormDescription>
-													Automatically provision SSL Certificate.
-												</FormDescription>
-												<FormMessage />
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
 							</div>
 						</div>
 					</form>
 
 					<DialogFooter>
-						<Button
-							isLoading={form.formState.isSubmitting}
-							form="hook-form"
-							type="submit"
-						>
+						<Button isLoading={isLoading} form="hook-form" type="submit">
 							{dictionary.submit}
 						</Button>
 					</DialogFooter>

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -52,7 +52,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
 						<div className="flex w-full flex-col items-center justify-center gap-3">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To access to the application is required to set at least 1
+								To access the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">

apps/dokploy/components/dashboard/application/general/deploy-application.tsx

@@ -45,14 +45,17 @@ export const DeployApplication = ({ applicationId }: Props) => {
 					<AlertDialogCancel>Cancel</AlertDialogCancel>
 					<AlertDialogAction
 						onClick={async () => {
-							toast.success("Deploying Application....");
-
-							await refetch();
 							await deploy({
 								applicationId,
-							}).catch(() => {
-								toast.error("Error to deploy Application");
-							});
+							})
+								.then(async () => {
+									toast.success("Application deployed succesfully");
+									await refetch();
+								})
+
+								.catch(() => {
+									toast.error("Error to deploy Application");
+								});
 
 							await refetch();
 						}}

apps/dokploy/components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -130,7 +130,7 @@ export const SaveDragNDrop = ({ applicationId }: Props) => {
 						type="submit"
 						className="w-fit"
 						isLoading={isLoading}
-						disabled={!zip}
+						disabled={!zip || isLoading}
 					>
 						Deploy{" "}
 					</Button>

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

@@ -66,7 +66,10 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					) : (
 						<StopApplication applicationId={applicationId} />
 					)}
-					<DockerTerminalModal appName={data?.appName || ""}>
+					<DockerTerminalModal
+						appName={data?.appName || ""}
+						serverId={data?.serverId || ""}
+					>
 						<Button variant="outline">
 							<Terminal />
 							Open Terminal

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

@@ -16,6 +16,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
@@ -30,12 +31,14 @@ export const DockerLogs = dynamic(
 
 interface Props {
 	appName: string;
+	serverId?: string;
 }
 
-export const ShowDockerLogs = ({ appName }: Props) => {
-	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+export const ShowDockerLogs = ({ appName, serverId }: Props) => {
+	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -62,7 +65,14 @@ export const ShowDockerLogs = ({ appName }: Props) => {
 				<Label>Select a container to view logs</Label>
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
-						<SelectValue placeholder="Select a container" />
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<SelectValue placeholder="Select a container" />
+						)}
 					</SelectTrigger>
 					<SelectContent>
 						<SelectGroup>
@@ -79,6 +89,7 @@ export const ShowDockerLogs = ({ appName }: Props) => {
 					</SelectContent>
 				</Select>
 				<DockerLogs
+					serverId={serverId || ""}
 					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>

apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx

@@ -9,26 +9,50 @@ import { useEffect, useRef, useState } from "react";
 
 interface Props {
 	logPath: string | null;
+	serverId?: string;
 	open: boolean;
 	onClose: () => void;
 }
-export const ShowDeploymentCompose = ({ logPath, open, onClose }: Props) => {
+export const ShowDeploymentCompose = ({
+	logPath,
+	open,
+	onClose,
+	serverId,
+}: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}`;
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}&serverId=${serverId}`;
 		const ws = new WebSocket(wsUrl);
 
+		wsRef.current = ws; // Store WebSocket instance in ref
+
 		ws.onmessage = (e) => {
 			setData((currentData) => currentData + e.data);
 		};
 
-		return () => ws.close();
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			console.log("WebSocket connection closed");
+			wsRef.current = null;
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
 	}, [logPath, open]);
 
 	const scrollToBottom = () => {
@@ -44,7 +68,15 @@ export const ShowDeploymentCompose = ({ logPath, open, onClose }: Props) => {
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
 			}}
 		>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>

apps/dokploy/components/dashboard/compose/deployments/show-deployments-compose.tsx

@@ -111,6 +111,7 @@ export const ShowDeploymentsCompose = ({ composeId }: Props) => {
 					</div>
 				)}
 				<ShowDeploymentCompose
+					serverId={data?.serverId || ""}
 					open={activeLog !== null}
 					onClose={() => setActiveLog(null)}
 					logPath={activeLog}

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

@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -161,7 +161,7 @@ export const AddDomainCompose = ({
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
@@ -190,7 +190,7 @@ export const AddDomainCompose = ({
 										{errorServices?.message}
 									</AlertBlock>
 								)}
-								<div className="flex flex-row gap-4 w-full items-end">
+								<div className="flex flex-row items-end w-full gap-4">
 									<FormField
 										control={form.control}
 										name="serviceName"
@@ -310,6 +310,7 @@ export const AddDomainCompose = ({
 																isLoading={isLoadingGenerate}
 																onClick={() => {
 																	generateDomain({
+																		serverId: compose?.serverId || "",
 																		appName: compose?.appName || "",
 																	})
 																		.then((domain) => {
@@ -363,19 +364,36 @@ export const AddDomainCompose = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
-														placeholder={"3000"}
-														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
-													/>
+													<NumberInput placeholder={"3000"} {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>
 										);
 									}}
 								/>
+
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+
 								{https && (
 									<FormField
 										control={form.control}
@@ -405,28 +423,6 @@ export const AddDomainCompose = ({
 										)}
 									/>
 								)}
-
-								<FormField
-									control={form.control}
-									name="https"
-									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>HTTPS</FormLabel>
-												<FormDescription>
-													Automatically provision SSL Certificate.
-												</FormDescription>
-												<FormMessage />
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
 							</div>
 						</div>
 					</form>

apps/dokploy/components/dashboard/compose/domains/show-domains.tsx

@@ -53,7 +53,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 						<div className="flex w-full flex-col items-center justify-center gap-3">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To access to the application is required to set at least 1
+								To access to the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">

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

@@ -75,7 +75,10 @@ export const ComposeActions = ({ composeId }: Props) => {
 				<StopCompose composeId={composeId} />
 			)}
 
-			<DockerTerminalModal appName={data?.appName || ""}>
+			<DockerTerminalModal
+				appName={data?.appName || ""}
+				serverId={data?.serverId || ""}
+			>
 				<Button variant="outline">
 					<Terminal />
 					Open Terminal

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -77,7 +77,6 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 				});
 			})
 			.catch((e) => {
-				console.log(e);
 				toast.error("Error to update the compose config");
 			});
 	};

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

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import { Puzzle, RefreshCw } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
 interface Props {
@@ -34,6 +34,16 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 
 	const { mutateAsync, isLoading } = api.compose.fetchSourceType.useMutation();
 
+	useEffect(() => {
+		if (isOpen) {
+			mutateAsync({ composeId })
+				.then(() => {
+					refetch();
+				})
+				.catch((err) => {});
+		}
+	}, [isOpen]);
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -16,6 +16,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { Loader, Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
@@ -30,14 +31,20 @@ export const DockerLogs = dynamic(
 
 interface Props {
 	appName: string;
+	serverId?: string;
 	appType: "stack" | "docker-compose";
 }
 
-export const ShowDockerLogsCompose = ({ appName, appType }: Props) => {
-	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+export const ShowDockerLogsCompose = ({
+	appName,
+	appType,
+	serverId,
+}: Props) => {
+	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName,
 			appType,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -64,7 +71,14 @@ export const ShowDockerLogsCompose = ({ appName, appType }: Props) => {
 				<Label>Select a container to view logs</Label>
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
-						<SelectValue placeholder="Select a container" />
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<SelectValue placeholder="Select a container" />
+						)}
 					</SelectTrigger>
 					<SelectContent>
 						<SelectGroup>
@@ -81,6 +95,7 @@ export const ShowDockerLogsCompose = ({ appName, appType }: Props) => {
 					</SelectContent>
 				</Select>
 				<DockerLogs
+					serverId={serverId || ""}
 					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>

apps/dokploy/components/dashboard/compose/monitoring/show.tsx

@@ -17,23 +17,27 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { DockerMonitoring } from "../../monitoring/docker/show";
 
 interface Props {
 	appName: string;
+	serverId?: string;
 	appType: "stack" | "docker-compose";
 }
 
 export const ShowMonitoringCompose = ({
 	appName,
 	appType = "stack",
+	serverId,
 }: Props) => {
-	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
 			appName: appName,
 			appType,
+			serverId,
 		},
 		{
 			enabled: !!appName,
@@ -46,7 +50,7 @@ export const ShowMonitoringCompose = ({
 
 	const [containerId, setContainerId] = useState<string | undefined>();
 
-	const { mutateAsync: restart, isLoading } =
+	const { mutateAsync: restart, isLoading: isRestarting } =
 		api.docker.restartContainer.useMutation();
 
 	useEffect(() => {
@@ -77,7 +81,14 @@ export const ShowMonitoringCompose = ({
 							value={containerAppName}
 						>
 							<SelectTrigger>
-								<SelectValue placeholder="Select a container" />
+								{isLoading ? (
+									<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
+										<span>Loading...</span>
+										<Loader2 className="animate-spin size-4" />
+									</div>
+								) : (
+									<SelectValue placeholder="Select a container" />
+								)}
 							</SelectTrigger>
 							<SelectContent>
 								<SelectGroup>
@@ -95,7 +106,7 @@ export const ShowMonitoringCompose = ({
 							</SelectContent>
 						</Select>
 						<Button
-							isLoading={isLoading}
+							isLoading={isRestarting}
 							onClick={async () => {
 								if (!containerId) return;
 								toast.success(`Restarting container ${containerAppName}`);

apps/dokploy/components/dashboard/docker/config/show-container-config.tsx

@@ -11,12 +11,14 @@ import { api } from "@/utils/api";
 
 interface Props {
 	containerId: string;
+	serverId?: string;
 }
 
-export const ShowContainerConfig = ({ containerId }: Props) => {
+export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 	const { data } = api.docker.getConfig.useQuery(
 		{
 			containerId,
+			serverId,
 		},
 		{
 			enabled: !!containerId,

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

@@ -1,24 +1,41 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Terminal } from "@xterm/xterm";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 
 interface Props {
 	id: string;
 	containerId: string;
+	serverId?: string | null;
 }
 
-export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
+export const DockerLogsId: React.FC<Props> = ({
+	id,
+	containerId,
+	serverId,
+}) => {
 	const [term, setTerm] = React.useState<Terminal>();
 	const [lines, setLines] = React.useState<number>(40);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
-	const createTerminal = (): Terminal => {
+	useEffect(() => {
+		// if (containerId === "select-a-container") {
+		// 	return;
+		// }
 		const container = document.getElementById(id);
 		if (container) {
 			container.innerHTML = "";
 		}
+
+		if (wsRef.current) {
+			console.log(wsRef.current);
+			if (wsRef.current.readyState === WebSocket.OPEN) {
+				wsRef.current.close();
+			}
+			wsRef.current = null;
+		}
 		const termi = new Terminal({
 			cursorBlink: true,
 			cols: 80,
@@ -38,9 +55,9 @@ export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}`;
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
 		const ws = new WebSocket(wsUrl);
-
+		wsRef.current = ws;
 		const fitAddon = new FitAddon();
 		termi.loadAddon(fitAddon);
 		// @ts-ignore
@@ -49,6 +66,10 @@ export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
 		termi.focus();
 		setTerm(termi);
 
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
 		ws.onmessage = (e) => {
 			termi.write(e.data);
 		};
@@ -57,12 +78,14 @@ export const DockerLogsId: React.FC<Props> = ({ id, containerId }) => {
 			console.log(e.reason);
 
 			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
+			wsRef.current = null;
+		};
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
 		};
-		return termi;
-	};
-
-	useEffect(() => {
-		createTerminal();
 	}, [lines, containerId]);
 
 	useEffect(() => {

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -22,9 +22,14 @@ export const DockerLogsId = dynamic(
 interface Props {
 	containerId: string;
 	children?: React.ReactNode;
+	serverId?: string | null;
 }
 
-export const ShowDockerModalLogs = ({ containerId, children }: Props) => {
+export const ShowDockerModalLogs = ({
+	containerId,
+	children,
+	serverId,
+}: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -41,7 +46,11 @@ export const ShowDockerModalLogs = ({ containerId, children }: Props) => {
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
-					<DockerLogsId id="terminal" containerId={containerId || ""} />
+					<DockerLogsId
+						id="terminal"
+						containerId={containerId || ""}
+						serverId={serverId}
+					/>
 				</div>
 			</DialogContent>
 		</Dialog>

apps/dokploy/components/dashboard/docker/show/colums.tsx

@@ -114,11 +114,20 @@ export const columns: ColumnDef<Container>[] = [
 					</DropdownMenuTrigger>
 					<DropdownMenuContent align="end">
 						<DropdownMenuLabel>Actions</DropdownMenuLabel>
-						<ShowDockerModalLogs containerId={container.containerId}>
+						<ShowDockerModalLogs
+							containerId={container.containerId}
+							serverId={container.serverId}
+						>
 							View Logs
 						</ShowDockerModalLogs>
-						<ShowContainerConfig containerId={container.containerId} />
-						<DockerTerminalModal containerId={container.containerId}>
+						<ShowContainerConfig
+							containerId={container.containerId}
+							serverId={container.serverId || ""}
+						/>
+						<DockerTerminalModal
+							containerId={container.containerId}
+							serverId={container.serverId || ""}
+						>
 							Terminal
 						</DockerTerminalModal>
 					</DropdownMenuContent>

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -34,8 +34,15 @@ export type Container = NonNullable<
 	RouterOutputs["docker"]["getContainers"]
 >[0];
 
-export const ShowContainers = () => {
-	const { data, isLoading } = api.docker.getContainers.useQuery();
+interface Props {
+	serverId?: string;
+}
+
+export const ShowContainers = ({ serverId }: Props) => {
+	const { data, isLoading } = api.docker.getContainers.useQuery({
+		serverId,
+	});
+
 	const [sorting, setSorting] = React.useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
 		[],
@@ -103,83 +110,99 @@ export const ShowContainers = () => {
 					</DropdownMenu>
 				</div>
 				<div className="rounded-md border">
-					<Table>
-						<TableHeader>
-							{table.getHeaderGroups().map((headerGroup) => (
-								<TableRow key={headerGroup.id}>
-									{headerGroup.headers.map((header) => {
-										return (
-											<TableHead key={header.id}>
-												{header.isPlaceholder
-													? null
-													: flexRender(
-															header.column.columnDef.header,
-															header.getContext(),
-														)}
-											</TableHead>
-										);
-									})}
-								</TableRow>
-							))}
-						</TableHeader>
-						<TableBody>
-							{table.getRowModel().rows?.length ? (
-								table.getRowModel().rows.map((row) => (
-									<TableRow
-										key={row.id}
-										data-state={row.getIsSelected() && "selected"}
-									>
-										{row.getVisibleCells().map((cell) => (
-											<TableCell key={cell.id}>
-												{flexRender(
-													cell.column.columnDef.cell,
-													cell.getContext(),
-												)}
-											</TableCell>
-										))}
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
 									</TableRow>
-								))
-							) : (
-								<TableRow>
-									<TableCell
-										colSpan={columns.length}
-										className="h-24 text-center"
-									>
-										{isLoading ? (
-											<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-												<span className="text-muted-foreground text-lg font-medium">
-													Loading...
-												</span>
-											</div>
-										) : (
-											<>No results.</>
-										)}
-									</TableCell>
-								</TableRow>
-							)}
-						</TableBody>
-					</Table>
+								))}
+							</TableHeader>
+							<TableBody>
+								{table?.getRowModel()?.rows?.length ? (
+									table.getRowModel().rows.map((row) => (
+										<TableRow
+											key={row.id}
+											data-state={row.getIsSelected() && "selected"}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<TableCell key={cell.id}>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</TableCell>
+											))}
+										</TableRow>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											{isLoading ? (
+												<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<span className="text-muted-foreground text-lg font-medium">
+														Loading...
+													</span>
+												</div>
+											) : (
+												<>No results.</>
+											)}
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					)}
 				</div>
-				<div className="flex items-center justify-end space-x-2 py-4">
-					<div className="space-x-2 flex flex-wrap">
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.previousPage()}
-							disabled={!table.getCanPreviousPage()}
-						>
-							Previous
-						</Button>
-						<Button
-							variant="outline"
-							size="sm"
-							onClick={() => table.nextPage()}
-							disabled={!table.getCanNextPage()}
-						>
-							Next
-						</Button>
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
 					</div>
-				</div>
+				)}
 			</div>
 		</div>
 	);

apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -18,10 +18,15 @@ const Terminal = dynamic(
 
 interface Props {
 	containerId: string;
+	serverId?: string;
 	children?: React.ReactNode;
 }
 
-export const DockerTerminalModal = ({ children, containerId }: Props) => {
+export const DockerTerminalModal = ({
+	children,
+	containerId,
+	serverId,
+}: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -40,7 +45,11 @@ export const DockerTerminalModal = ({ children, containerId }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 
-				<Terminal id="terminal" containerId={containerId} />
+				<Terminal
+					id="terminal"
+					containerId={containerId}
+					serverId={serverId || ""}
+				/>
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx

@@ -8,9 +8,14 @@ import { AttachAddon } from "@xterm/addon-attach";
 interface Props {
 	id: string;
 	containerId: string;
+	serverId?: string;
 }
 
-export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => {
+export const DockerTerminal: React.FC<Props> = ({
+	id,
+	containerId,
+	serverId,
+}) => {
 	const termRef = useRef(null);
 	const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
 	useEffect(() => {
@@ -33,7 +38,7 @@ export const DockerTerminal: React.FC<Props> = ({ id, containerId }) => {
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}`;
+		const wsUrl = `${protocol}//${window.location.host}/docker-container-terminal?containerId=${containerId}&activeWay=${activeWay}${serverId ? `&serverId=${serverId}` : ""}`;
 
 		const ws = new WebSocket(wsUrl);
 

apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -29,12 +30,18 @@ type UpdateServerMiddlewareConfig = z.infer<
 
 interface Props {
 	path: string;
+	serverId?: string;
 }
 
-export const ShowTraefikFile = ({ path }: Props) => {
-	const { data, refetch } = api.settings.readTraefikFile.useQuery(
+export const ShowTraefikFile = ({ path, serverId }: Props) => {
+	const {
+		data,
+		refetch,
+		isLoading: isLoadingFile,
+	} = api.settings.readTraefikFile.useQuery(
 		{
 			path,
+			serverId,
 		},
 		{
 			enabled: !!path,
@@ -54,11 +61,9 @@ export const ShowTraefikFile = ({ path }: Props) => {
 	});
 
 	useEffect(() => {
-		if (data) {
-			form.reset({
-				traefikConfig: data || "",
-			});
-		}
+		form.reset({
+			traefikConfig: data || "",
+		});
 	}, [form, form.reset, data]);
 
 	const onSubmit = async (data: UpdateServerMiddlewareConfig) => {
@@ -74,6 +79,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
 		await mutateAsync({
 			traefikConfig: data.traefikConfig,
 			path,
+			serverId,
 		})
 			.then(async () => {
 				toast.success("Traefik config Updated");
@@ -93,20 +99,28 @@ export const ShowTraefikFile = ({ path }: Props) => {
 					className="w-full relative z-[5]"
 				>
 					<div className="flex flex-col overflow-auto">
-						<FormField
-							control={form.control}
-							name="traefikConfig"
-							render={({ field }) => (
-								<FormItem className="relative">
-									<FormLabel>Traefik config</FormLabel>
-									<FormDescription className="break-all">
-										{path}
-									</FormDescription>
-									<FormControl>
-										<CodeEditor
-											lineWrapping
-											wrapperClassName="h-[35rem] font-mono"
-											placeholder={`http:
+						{isLoadingFile ? (
+							<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+								<span className="text-muted-foreground text-lg font-medium">
+									Loading...
+								</span>
+								<Loader2 className="animate-spin size-8 text-muted-foreground" />
+							</div>
+						) : (
+							<FormField
+								control={form.control}
+								name="traefikConfig"
+								render={({ field }) => (
+									<FormItem className="relative">
+										<FormLabel>Traefik config</FormLabel>
+										<FormDescription className="break-all">
+											{path}
+										</FormDescription>
+										<FormControl>
+											<CodeEditor
+												lineWrapping
+												wrapperClassName="h-[35rem] font-mono"
+												placeholder={`http:
 routers:
     router-name:
         rule: Host('domain.com')
@@ -116,31 +130,36 @@ routers:
         tls: false
         middlewares: []
                                                     `}
-											{...field}
-										/>
-									</FormControl>
+												{...field}
+											/>
+										</FormControl>
 
-									<pre>
-										<FormMessage />
-									</pre>
-									<div className="flex justify-end absolute z-50 right-6 top-8">
-										<Button
-											className="shadow-sm"
-											variant="secondary"
-											type="button"
-											onClick={async () => {
-												setCanEdit(!canEdit);
-											}}
-										>
-											{canEdit ? "Unlock" : "Lock"}
-										</Button>
-									</div>
-								</FormItem>
-							)}
-						/>
+										<pre>
+											<FormMessage />
+										</pre>
+										<div className="flex justify-end absolute z-50 right-6 top-8">
+											<Button
+												className="shadow-sm"
+												variant="secondary"
+												type="button"
+												onClick={async () => {
+													setCanEdit(!canEdit);
+												}}
+											>
+												{canEdit ? "Unlock" : "Lock"}
+											</Button>
+										</div>
+									</FormItem>
+								)}
+							/>
+						)}
 					</div>
 					<div className="flex justify-end">
-						<Button isLoading={isLoading} disabled={canEdit} type="submit">
+						<Button
+							isLoading={isLoading}
+							disabled={canEdit || isLoading}
+							type="submit"
+						>
 							Update
 						</Button>
 					</div>

apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx

@@ -1,20 +1,47 @@
-import React from "react";
-
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Tree } from "@/components/ui/file-tree";
-import { api } from "@/utils/api";
-import { FileIcon, Folder, Workflow } from "lucide-react";
-
 import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
+import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 
-export const ShowTraefikSystem = () => {
+interface Props {
+	serverId?: string;
+}
+export const ShowTraefikSystem = ({ serverId }: Props) => {
 	const [file, setFile] = React.useState<null | string>(null);
 
-	const { data: directories } = api.settings.readDirectories.useQuery();
+	const {
+		data: directories,
+		isLoading,
+		error,
+		isError,
+	} = api.settings.readDirectories.useQuery(
+		{
+			serverId,
+		},
+		{
+			retry: 2,
+		},
+	);
 
 	return (
 		<div className={cn("mt-6 md:grid gap-4")}>
 			<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
+				{isError && (
+					<AlertBlock type="error" className="w-full">
+						{error?.message}
+					</AlertBlock>
+				)}
+				{isLoading && (
+					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+						<span className="text-muted-foreground text-lg font-medium">
+							Loading...
+						</span>
+						<Loader2 className="animate-spin size-8 text-muted-foreground" />
+					</div>
+				)}
 				{directories?.length === 0 && (
 					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
 						<span className="text-muted-foreground text-lg font-medium">
@@ -34,7 +61,7 @@ export const ShowTraefikSystem = () => {
 						/>
 						<div className="w-full">
 							{file ? (
-								<ShowTraefikFile path={file} />
+								<ShowTraefikFile path={file} serverId={serverId} />
 							) : (
 								<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
 									<span className="text-muted-foreground text-lg font-medium">

apps/dokploy/components/dashboard/mariadb/advanced/show-mariadb-resources.tsx

@@ -79,7 +79,7 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>