feat: add build server configuration to application dashboard

- Introduced a new component for configuring build servers in the application dashboard.
- Implemented form validation using Zod and integrated API calls for updating build server settings.
- Enhanced server and application schemas to support build server and registry associations.
- Updated UI to display build server options and provide user feedback on updates.

apps/dokploy/components/dashboard/application/advanced/show-build-server.tsx

@@ -0,0 +1,240 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Server } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+interface Props {
+	applicationId: string;
+}
+
+const schema = z.object({
+	buildServerId: z.string().min(1, "Build server is required"),
+	buildRegistryId: z.string().min(1, "Build registry is required"),
+});
+
+type Schema = z.infer<typeof schema>;
+
+export const ShowBuildServer = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{ applicationId },
+		{ enabled: !!applicationId },
+	);
+	const { data: buildServers } = api.server.buildServers.useQuery();
+	const { data: registries } = api.registry.all.useQuery();
+
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			buildServerId: data?.buildServerId || "",
+			buildRegistryId: data?.buildRegistryId || "",
+		},
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				buildServerId: data?.buildServerId || "",
+				buildRegistryId: data?.buildRegistryId || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (formData: Schema) => {
+		await mutateAsync({
+			applicationId,
+			buildServerId:
+				formData?.buildServerId === "none" || !formData?.buildServerId
+					? null
+					: formData?.buildServerId,
+			buildRegistryId:
+				formData?.buildRegistryId === "none" || !formData?.buildRegistryId
+					? null
+					: formData?.buildRegistryId,
+		})
+			.then(async () => {
+				toast.success("Build Server Settings Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error updating build server settings");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<div className="flex flex-row items-center gap-2">
+					<Server className="size-6 text-muted-foreground" />
+					<div>
+						<CardTitle className="text-xl">Build Server</CardTitle>
+						<CardDescription>
+							Configure a dedicated server for building your application.
+						</CardDescription>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Build servers offload the build process from your deployment servers.
+					Select a build server and registry to use for building your
+					application.
+				</AlertBlock>
+
+				{!registries || registries.length === 0 ? (
+					<AlertBlock type="warning">
+						You need to add at least one registry to use build servers. Please
+						go to{" "}
+						<Link
+							href="/dashboard/settings/registry"
+							className="text-primary underline"
+						>
+							Settings
+						</Link>{" "}
+						to add a registry.
+					</AlertBlock>
+				) : null}
+
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="buildServerId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Build Server</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										value={field.value || "none"}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a build server" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectGroup>
+												<SelectItem value="none">
+													<span className="flex items-center gap-2">
+														<span>None</span>
+													</span>
+												</SelectItem>
+												{buildServers?.map((server) => (
+													<SelectItem
+														key={server.serverId}
+														value={server.serverId}
+													>
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs">
+																{server.ipAddress}
+															</span>
+														</span>
+													</SelectItem>
+												))}
+												<SelectLabel>
+													Build Servers ({buildServers?.length || 0})
+												</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormDescription>
+										Select a build server to handle the build process for this
+										application.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="buildRegistryId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Build Registry</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										value={field.value || "none"}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a registry" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectGroup>
+												<SelectItem value="none">
+													<span className="flex items-center gap-2">
+														<span>None</span>
+													</span>
+												</SelectItem>
+												{registries?.map((registry) => (
+													<SelectItem
+														key={registry.registryId}
+														value={registry.registryId}
+													>
+														{registry.registryName}
+													</SelectItem>
+												))}
+												<SelectLabel>
+													Registries ({registries?.length || 0})
+												</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormDescription>
+										Select a registry to store the built images from the build
+										server.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -52,6 +52,7 @@ const Schema = z.object({
 	sshKeyId: z.string().min(1, {
 		message: "SSH Key is required",
 	}),
+	serverType: z.enum(["deploy", "build"]).default("deploy"),
 });
 
 type Schema = z.infer<typeof Schema>;
@@ -89,6 +90,7 @@ export const HandleServers = ({ serverId }: Props) => {
 			port: 22,
 			username: "root",
 			sshKeyId: "",
+			serverType: "deploy",
 		},
 		resolver: zodResolver(Schema),
 	});
@@ -101,6 +103,7 @@ export const HandleServers = ({ serverId }: Props) => {
 			port: data?.port || 22,
 			username: data?.username || "root",
 			sshKeyId: data?.sshKeyId || "",
+			serverType: data?.serverType || "deploy",
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
@@ -116,6 +119,7 @@ export const HandleServers = ({ serverId }: Props) => {
 			port: data.port || 22,
 			username: data.username || "root",
 			sshKeyId: data.sshKeyId || "",
+			serverType: data.serverType || "deploy",
 			serverId: serverId || "",
 		})
 			.then(async (_data) => {
@@ -266,6 +270,44 @@ export const HandleServers = ({ serverId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="serverType"
+							render={({ field }) => {
+								const serverTypeValue = form.watch("serverType");
+								return (
+									<FormItem>
+										<FormLabel>Server Type</FormLabel>
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a server type" />
+											</SelectTrigger>
+											<SelectContent>
+												<SelectGroup>
+													<SelectItem value="deploy">Deploy Server</SelectItem>
+													<SelectItem value="build">Build Server</SelectItem>
+													<SelectLabel>Server Type</SelectLabel>
+												</SelectGroup>
+											</SelectContent>
+										</Select>
+										<FormMessage />
+										{serverTypeValue === "deploy" && (
+											<AlertBlock type="info" className="mt-2">
+												Deploy servers are used to run your applications, databases, and services. They handle the deployment and execution of your projects.
+											</AlertBlock>
+										)}
+										{serverTypeValue === "build" && (
+											<AlertBlock type="info" className="mt-2">
+												Build servers are dedicated to building your applications. They handle the compilation and build process, offloading this work from your deployment servers. Build servers won't appear in deployment options.
+											</AlertBlock>
+										)}
+									</FormItem>
+								);
+							}}
+						/>
 						<FormField
 							control={form.control}
 							name="sshKeyId"

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -51,6 +51,7 @@ export const SetupServer = ({ serverId }: Props) => {
 
 	const [activeLog, setActiveLog] = useState<string | null>(null);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const isBuildServer = server?.serverType === "build";
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const [isDeploying, setIsDeploying] = useState(false);
@@ -117,17 +118,26 @@ export const SetupServer = ({ serverId }: Props) => {
 							<TabsList
 								className={cn(
 									"grid  w-[700px]",
-									isCloud ? "grid-cols-6" : "grid-cols-5",
+									isBuildServer
+										? "grid-cols-3"
+										: isCloud
+											? "grid-cols-6"
+											: "grid-cols-5",
 								)}
 							>
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
 								<TabsTrigger value="validate">Validate</TabsTrigger>
-								<TabsTrigger value="audit">Security</TabsTrigger>
+
-								{isCloud && (
+								{!isBuildServer && (
-									<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+									<>
+										<TabsTrigger value="audit">Security</TabsTrigger>
+										{isCloud && (
+											<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+										)}
+										<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
+									</>
 								)}
-								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
 								value="ssh-keys"
@@ -311,32 +321,36 @@ export const SetupServer = ({ serverId }: Props) => {
 									<ValidateServer serverId={serverId} />
 								</div>
 							</TabsContent>
-							<TabsContent
+							{!isBuildServer && (
-								value="audit"
+								<>
-								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+									<TabsContent
-							>
+										value="audit"
-								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+										className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-									<SecurityAudit serverId={serverId} />
+									>
-								</div>
+										<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
-							</TabsContent>
+											<SecurityAudit serverId={serverId} />
-							<TabsContent
+										</div>
-								value="monitoring"
+									</TabsContent>
-								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+									<TabsContent
-							>
+										value="monitoring"
-								<div className="flex flex-col gap-2 text-sm pt-3">
+										className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-									<div className="rounded-xl bg-background shadow-md border">
+									>
-										<SetupMonitoring serverId={serverId} />
+										<div className="flex flex-col gap-2 text-sm pt-3">
-									</div>
+											<div className="rounded-xl bg-background shadow-md border">
-								</div>
+												<SetupMonitoring serverId={serverId} />
-							</TabsContent>
+											</div>
-							<TabsContent
+										</div>
-								value="gpu-setup"
+									</TabsContent>
-								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+									<TabsContent
-							>
+										value="gpu-setup"
-								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+										className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-									<GPUSupport serverId={serverId} />
+									>
-								</div>
+										<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
-							</TabsContent>
+											<GPUSupport serverId={serverId} />
+										</div>
+									</TabsContent>
+								</>
+							)}
 						</Tabs>
 					</div>
 				)}

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

@@ -129,6 +129,9 @@ export const ShowServers = () => {
 																	Status
 																</TableHead>
 															)}
+															<TableHead className="text-center">
+																Type
+															</TableHead>
 															<TableHead className="text-center">
 																IP Address
 															</TableHead>
@@ -153,6 +156,8 @@ export const ShowServers = () => {
 														{data?.map((server) => {
 															const canDelete = server.totalSum === 0;
 															const isActive = server.serverStatus === "active";
+															const isBuildServer =
+																server.serverType === "build";
 															return (
 																<TableRow key={server.serverId}>
 																	<TableCell className="text-left">
@@ -171,6 +176,15 @@ export const ShowServers = () => {
 																			</Badge>
 																		</TableHead>
 																	)}
+																	<TableCell className="text-center">
+																		<Badge
+																			variant={
+																				isBuildServer ? "secondary" : "default"
+																			}
+																		>
+																			{server.serverType}
+																		</Badge>
+																	</TableCell>
 																	<TableCell className="text-center">
 																		<Badge>{server.ipAddress}</Badge>
 																	</TableCell>
@@ -233,11 +247,12 @@ export const ShowServers = () => {
 																							serverId={server.serverId}
 																						/>
 
-																						{server.sshKeyId && (
+																						{server.sshKeyId &&
-																							<ShowServerActions
+																							!isBuildServer && (
-																								serverId={server.serverId}
+																								<ShowServerActions
-																							/>
+																									serverId={server.serverId}
-																						)}
+																								/>
+																							)}
 																					</>
 																				)}
 
@@ -286,41 +301,43 @@ export const ShowServers = () => {
 																					</DropdownMenuItem>
 																				</DialogAction>
 
-																				{isActive && server.sshKeyId && (
+																				{isActive &&
-																					<>
+																					server.sshKeyId &&
-																						<DropdownMenuSeparator />
+																					!isBuildServer && (
-																						<DropdownMenuLabel>
+																						<>
-																							Extra
+																							<DropdownMenuSeparator />
-																						</DropdownMenuLabel>
+																							<DropdownMenuLabel>
+																								Extra
+																							</DropdownMenuLabel>
 
-																						<ShowTraefikFileSystemModal
+																							<ShowTraefikFileSystemModal
-																							serverId={server.serverId}
+																								serverId={server.serverId}
-																						/>
-																						<ShowDockerContainersModal
-																							serverId={server.serverId}
-																						/>
-																						{isCloud && (
-																							<ShowMonitoringModal
-																								url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
-																								token={
-																									server?.metricsConfig?.server
-																										?.token
-																								}
 																							/>
-																						)}
+																							<ShowDockerContainersModal
+																								serverId={server.serverId}
+																							/>
+																							{isCloud && (
+																								<ShowMonitoringModal
+																									url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
+																									token={
+																										server?.metricsConfig
+																											?.server?.token
+																									}
+																								/>
+																							)}
 
-																						<ShowSwarmOverviewModal
+																							<ShowSwarmOverviewModal
-																							serverId={server.serverId}
+																								serverId={server.serverId}
-																						/>
+																							/>
-																						<ShowNodesModal
+																							<ShowNodesModal
-																							serverId={server.serverId}
+																								serverId={server.serverId}
-																						/>
+																							/>
 
-																						<ShowSchedulesModal
+																							<ShowSchedulesModal
-																							serverId={server.serverId}
+																								serverId={server.serverId}
-																						/>
+																							/>
-																					</>
+																						</>
-																				)}
+																					)}
 																			</DropdownMenuContent>
 																		</DropdownMenu>
 																	</TableCell>

apps/dokploy/drizzle/0122_cold_ben_parker.sql

@@ -0,0 +1,2 @@
+CREATE TYPE "public"."serverType" AS ENUM('deploy', 'build');--> statement-breakpoint
+ALTER TABLE "server" ADD COLUMN "serverType" "serverType" DEFAULT 'deploy' NOT NULL;

apps/dokploy/drizzle/0123_careless_odin.sql

@@ -0,0 +1,4 @@
+ALTER TABLE "application" ADD COLUMN "buildServerId" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "buildRegistryId" text;--> statement-breakpoint
+ALTER TABLE "application" ADD CONSTRAINT "application_buildServerId_server_serverId_fk" FOREIGN KEY ("buildServerId") REFERENCES "public"."server"("serverId") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "application" ADD CONSTRAINT "application_buildRegistryId_registry_registryId_fk" FOREIGN KEY ("buildRegistryId") REFERENCES "public"."registry"("registryId") ON DELETE set null ON UPDATE no action;

apps/dokploy/drizzle/meta/_journal.json

@@ -855,6 +855,20 @@
       "when": 1763755037033,
       "tag": "0121_rainy_cargill",
       "breakpoints": true
+    },
+    {
+      "idx": 122,
+      "version": "7",
+      "when": 1764471908821,
+      "tag": "0122_cold_ben_parker",
+      "breakpoints": true
+    },
+    {
+      "idx": 123,
+      "version": "7",
+      "when": 1764472942038,
+      "tag": "0123_careless_odin",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/pages/dashboard/project/[projectId]/environment/[environmentId]/services/application/[applicationId].tsx

@@ -17,6 +17,7 @@ import { AddCommand } from "@/components/dashboard/application/advanced/general/
 import { ShowPorts } from "@/components/dashboard/application/advanced/ports/show-port";
 import { ShowRedirects } from "@/components/dashboard/application/advanced/redirects/show-redirects";
 import { ShowSecurity } from "@/components/dashboard/application/advanced/security/show-security";
+import { ShowBuildServer } from "@/components/dashboard/application/advanced/show-build-server";
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowTraefikConfig } from "@/components/dashboard/application/advanced/traefik/show-traefik-config";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
@@ -348,13 +349,13 @@ const Service = (
 									</TabsContent>
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
-											<AddCommand applicationId={applicationId} />
+										<AddCommand applicationId={applicationId} />
-											<ShowClusterSettings
+										<ShowClusterSettings
-												id={applicationId}
+											id={applicationId}
-												type="application"
+											type="application"
-											/>
+										/>
-
+										<ShowBuildServer applicationId={applicationId} />
-											<ShowResources id={applicationId} type="application" />
+										<ShowResources id={applicationId} type="application" />
 											<ShowVolumes id={applicationId} type="application" />
 											<ShowRedirects applicationId={applicationId} />
 											<ShowSecurity applicationId={applicationId} />

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

@@ -124,10 +124,30 @@ export const serverRouter = createTRPCRouter({
 						isNotNull(server.sshKeyId),
 						eq(server.organizationId, ctx.session.activeOrganizationId),
 						eq(server.serverStatus, "active"),
+						eq(server.serverType, "deploy"),
 					)
 				: and(
 						isNotNull(server.sshKeyId),
 						eq(server.organizationId, ctx.session.activeOrganizationId),
+						eq(server.serverType, "deploy"),
+					),
+		});
+		return result;
+	}),
+	buildServers: protectedProcedure.query(async ({ ctx }) => {
+		const result = await db.query.server.findMany({
+			orderBy: desc(server.createdAt),
+			where: IS_CLOUD
+				? and(
+						isNotNull(server.sshKeyId),
+						eq(server.organizationId, ctx.session.activeOrganizationId),
+						eq(server.serverStatus, "active"),
+						eq(server.serverType, "build"),
+					)
+				: and(
+						isNotNull(server.sshKeyId),
+						eq(server.organizationId, ctx.session.activeOrganizationId),
+						eq(server.serverType, "build"),
 					),
 		});
 		return result;

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

@@ -204,6 +204,15 @@ export const applications = pgTable("application", {
 	serverId: text("serverId").references(() => server.serverId, {
 		onDelete: "cascade",
 	}),
+	buildServerId: text("buildServerId").references(() => server.serverId, {
+		onDelete: "set null",
+	}),
+	buildRegistryId: text("buildRegistryId").references(
+		() => registry.registryId,
+		{
+			onDelete: "set null",
+		},
+	),
 });
 
 export const applicationsRelations = relations(
@@ -247,6 +256,14 @@ export const applicationsRelations = relations(
 			fields: [applications.serverId],
 			references: [server.serverId],
 		}),
+		buildServer: one(server, {
+			fields: [applications.buildServerId],
+			references: [server.serverId],
+		}),
+		buildRegistry: one(registry, {
+			fields: [applications.buildRegistryId],
+			references: [registry.registryId],
+		}),
 		previewDeployments: many(previewDeployments),
 	}),
 );

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

@@ -24,6 +24,7 @@ import { schedules } from "./schedule";
 import { sshKeys } from "./ssh-key";
 import { generateAppName } from "./utils";
 export const serverStatus = pgEnum("serverStatus", ["active", "inactive"]);
+export const serverType = pgEnum("serverType", ["deploy", "build"]);
 
 export const server = pgTable("server", {
 	serverId: text("serverId")
@@ -44,6 +45,7 @@ export const server = pgTable("server", {
 		.notNull()
 		.references(() => organization.id, { onDelete: "cascade" }),
 	serverStatus: serverStatus("serverStatus").notNull().default("active"),
+	serverType: serverType("serverType").notNull().default("deploy"),
 	command: text("command").notNull().default(""),
 	sshKeyId: text("sshKeyId").references(() => sshKeys.sshKeyId, {
 		onDelete: "set null",
@@ -131,6 +133,7 @@ export const apiCreateServer = createSchema
 		port: true,
 		username: true,
 		sshKeyId: true,
+		serverType: true,
 	})
 	.required();
 
@@ -155,6 +158,7 @@ export const apiUpdateServer = createSchema
 		port: true,
 		username: true,
 		sshKeyId: true,
+		serverType: true,
 	})
 	.required()
 	.extend({