Merge branch 'canary' into feat/enhancement-script

2025-06-26 18:27:59 +00:00 · 2024-12-08 15:03:12 -06:00
parent ddf95d87bd 30eb1719b0
commit d0be2a2090
55 changed files with 7123 additions and 105 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -99,14 +99,14 @@ workflows:
              only:
                - main
                - canary
-                - refactor/enhancement-languages
+                - 379-preview-deployment
      - build-arm64:
          filters:
            branches:
              only:
                - main
                - canary
-                - refactor/enhancement-languages
+                - 379-preview-deployment
      - combine-manifests:
          requires:
            - build-amd64
@@ -116,4 +116,4 @@ workflows:
              only:
                - main
                - canary
-                - refactor/enhancement-languages
+                - 379-preview-deployment
--- a/LICENSE.MD
+++ b/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, 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:
+The following additional terms apply to the multi-node support, Docker Compose file, Preview Deployments 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, 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.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support, Preview Deployments 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, Preview Deployments 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, Preview Deployments 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.
--- a/apps/dokploy/LICENSE.MD
+++ b/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, 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:
+The following additional terms apply to the multi-node support, Docker Compose file, Preview Deployments 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, 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.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support, Preview Deployments 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, Preview Deployments 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, Preview Deployments 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.
--- a/apps/dokploy/test/compose/domain/labels.test.ts
+++ b/apps/dokploy/test/compose/domain/labels.test.ts
@@ -17,6 +17,7 @@ describe("createDomainLabels", () => {
 		domainId: "",
 		path: "/",
 		createdAt: "",
+		previewDeploymentId: "",
 	};

 	it("should create basic labels for web entrypoint", async () => {
--- a/apps/dokploy/test/drop/drop.test.test.ts
+++ b/apps/dokploy/test/drop/drop.test.test.ts
@@ -34,6 +34,15 @@ const baseApp: ApplicationNested = {
 	registryUrl: "",
 	branch: null,
 	dockerBuildStage: "",
+	isPreviewDeploymentsActive: false,
+	previewBuildArgs: null,
+	previewCertificateType: "none",
+	previewEnv: null,
+	previewHttps: false,
+	previewPath: "/",
+	previewPort: 3000,
+	previewLimit: 0,
+	previewWildcard: "",
 	project: {
 		env: "",
 		adminId: "",
--- a/apps/dokploy/test/traefik/traefik.test.ts
+++ b/apps/dokploy/test/traefik/traefik.test.ts
@@ -15,6 +15,15 @@ const baseApp: ApplicationNested = {
 	dockerBuildStage: "",
 	registryUrl: "",
 	buildArgs: null,
+	isPreviewDeploymentsActive: false,
+	previewBuildArgs: null,
+	previewCertificateType: "none",
+	previewEnv: null,
+	previewHttps: false,
+	previewPath: "/",
+	previewPort: 3000,
+	previewLimit: 0,
+	previewWildcard: "",
 	project: {
 		env: "",
 		adminId: "",
@@ -96,6 +105,7 @@ const baseDomain: Domain = {
 	composeId: "",
 	domainType: "application",
 	uniqueConfigKey: 1,
+	previewDeploymentId: "",
 };

 const baseRedirect: Redirect = {
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployments.tsx
@@ -28,6 +28,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 			refetchInterval: 1000,
 		},
 	);
+
 	const [url, setUrl] = React.useState("");
 	useEffect(() => {
 		setUrl(document.location.origin);
--- a/apps/dokploy/components/dashboard/application/environment/show.tsx
+++ b/apps/dokploy/components/dashboard/application/environment/show.tsx
@@ -61,7 +61,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				onSubmit={form.handleSubmit(onSubmit)}
 				className="flex w-full flex-col gap-5 "
 			>
-				<Card className="bg-background">
+				<Card className="bg-background p-6">
 					<Secrets
 						name="env"
 						title="Environment Settings"
--- a/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx
@@ -0,0 +1,304 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input, NumberInput } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import { domain } from "@/server/db/validations/domain";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dices } from "lucide-react";
+import type z from "zod";
+
+type Domain = z.infer<typeof domain>;
+
+interface Props {
+	previewDeploymentId: string;
+	domainId?: string;
+	children: React.ReactNode;
+}
+
+export const AddPreviewDomain = ({
+	previewDeploymentId,
+	domainId = "",
+	children,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { data, refetch } = api.domain.one.useQuery(
+		{
+			domainId,
+		},
+		{
+			enabled: !!domainId,
+		},
+	);
+
+	const { data: previewDeployment } = api.previewDeployment.one.useQuery(
+		{
+			previewDeploymentId,
+		},
+		{
+			enabled: !!previewDeploymentId,
+		},
+	);
+
+	const { mutateAsync, isError, error, isLoading } = domainId
+		? api.domain.update.useMutation()
+		: api.domain.create.useMutation();
+
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
+	const form = useForm<Domain>({
+		resolver: zodResolver(domain),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				...data,
+				/* Convert null to undefined */
+				path: data?.path || undefined,
+				port: data?.port || undefined,
+			});
+		}
+
+		if (!domainId) {
+			form.reset({});
+		}
+	}, [form, form.reset, data, isLoading]);
+
+	const dictionary = {
+		success: domainId ? "Domain Updated" : "Domain Created",
+		error: domainId
+			? "Error to update the domain"
+			: "Error to create the domain",
+		submit: domainId ? "Update" : "Create",
+		dialogDescription: domainId
+			? "In this section you can edit a domain"
+			: "In this section you can add domains",
+	};
+
+	const onSubmit = async (data: Domain) => {
+		await mutateAsync({
+			domainId,
+			previewDeploymentId,
+			...data,
+		})
+			.then(async () => {
+				toast.success(dictionary.success);
+				await utils.previewDeployment.all.invalidate({
+					applicationId: previewDeployment?.applicationId,
+				});
+
+				if (domainId) {
+					refetch();
+				}
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error(dictionary.error);
+			});
+	};
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger className="" asChild>
+				{children}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Domain</DialogTitle>
+					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host</FormLabel>
+											<div className="flex gap-2">
+												<FormControl>
+													<Input placeholder="api.dokploy.com" {...field} />
+												</FormControl>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingGenerate}
+																onClick={() => {
+																	generateDomain({
+																		appName: previewDeployment?.appName || "",
+																		serverId:
+																			previewDeployment?.application
+																				?.serverId || "",
+																	})
+																		.then((domain) => {
+																			field.onChange(domain);
+																		})
+																		.catch((err) => {
+																			toast.error(err.message);
+																		});
+																}}
+															>
+																<Dices className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>Generate traefik.me domain</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="path"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Path</FormLabel>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormControl>
+													<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}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Letsencrypt (Default)
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button isLoading={isLoading} form="hook-form" type="submit">
+							{dictionary.submit}
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
@@ -0,0 +1,87 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+
+import type { RouterOutputs } from "@/utils/api";
+import { useState } from "react";
+import { ShowDeployment } from "../deployments/show-deployment";
+
+interface Props {
+	deployments: RouterOutputs["deployment"]["all"];
+	serverId?: string;
+}
+
+export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">View Builds</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
+				<DialogHeader>
+					<DialogTitle>Preview Builds</DialogTitle>
+					<DialogDescription>
+						See all the preview builds for this application on this Pull Request
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					{deployments?.map((deployment) => (
+						<div
+							key={deployment.deploymentId}
+							className="flex items-center justify-between rounded-lg border p-4 gap-2"
+						>
+							<div className="flex flex-col">
+								<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+									{deployment.status}
+
+									<StatusTooltip
+										status={deployment?.status}
+										className="size-2.5"
+									/>
+								</span>
+								<span className="text-sm text-muted-foreground">
+									{deployment.title}
+								</span>
+								{deployment.description && (
+									<span className="break-all text-sm text-muted-foreground">
+										{deployment.description}
+									</span>
+								)}
+							</div>
+							<div className="flex flex-col items-end gap-2">
+								<div className="text-sm capitalize text-muted-foreground">
+									<DateTooltip date={deployment.createdAt} />
+								</div>
+
+								<Button
+									onClick={() => {
+										setActiveLog(deployment.logPath);
+									}}
+								>
+									View
+								</Button>
+							</div>
+						</div>
+					))}
+				</div>
+			</DialogContent>
+			<ShowDeployment
+				serverId={serverId || ""}
+				open={activeLog !== null}
+				onClose={() => setActiveLog(null)}
+				logPath={activeLog}
+			/>
+		</Dialog>
+	);
+};
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
@@ -0,0 +1,212 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { Pencil, RocketIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ShowDeployment } from "../deployments/show-deployment";
+import Link from "next/link";
+import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { AddPreviewDomain } from "./add-preview-domain";
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { ShowPreviewSettings } from "./show-preview-settings";
+import { ShowPreviewBuilds } from "./show-preview-builds";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowPreviewDeployments = ({ applicationId }: Props) => {
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const { data } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync: deletePreviewDeployment, isLoading } =
+		api.previewDeployment.delete.useMutation();
+	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+		api.previewDeployment.all.useQuery(
+			{ applicationId },
+			{
+				enabled: !!applicationId,
+			},
+		);
+	// const [url, setUrl] = React.useState("");
+	// useEffect(() => {
+	// 	setUrl(document.location.origin);
+	// }, []);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Preview Deployments</CardTitle>
+					<CardDescription>See all the preview deployments</CardDescription>
+				</div>
+				{data?.isPreviewDeploymentsActive && (
+					<ShowPreviewSettings applicationId={applicationId} />
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.isPreviewDeploymentsActive ? (
+					<>
+						<div className="flex flex-col gap-2 text-sm">
+							<span>
+								Preview deployments are a way to test your application before it
+								is deployed to production. It will create a new deployment for
+								each pull request you create.
+							</span>
+						</div>
+						{data?.previewDeployments?.length === 0 ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<RocketIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No preview deployments found
+								</span>
+							</div>
+						) : (
+							<div className="flex flex-col gap-4">
+								{previewDeployments?.map((previewDeployment) => {
+									const { deployments, domain } = previewDeployment;
+
+									return (
+										<div
+											key={previewDeployment?.previewDeploymentId}
+											className="flex flex-col  justify-between rounded-lg border p-4 gap-2"
+										>
+											<div className="flex justify-between gap-2 max-sm:flex-wrap">
+												<div className="flex flex-col gap-2">
+													{deployments?.length === 0 ? (
+														<div>
+															<span className="text-sm text-muted-foreground">
+																No deployments found
+															</span>
+														</div>
+													) : (
+														<div className="flex items-center gap-2">
+															<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+																{previewDeployment?.pullRequestTitle}
+															</span>
+															<StatusTooltip
+																status={previewDeployment.previewStatus}
+																className="size-2.5"
+															/>
+														</div>
+													)}
+													<div className="flex flex-col gap-1">
+														{previewDeployment?.pullRequestTitle && (
+															<div className="flex items-center gap-2">
+																<span className="break-all text-sm text-muted-foreground w-fit">
+																	Title: {previewDeployment?.pullRequestTitle}
+																</span>
+															</div>
+														)}
+
+														{previewDeployment?.pullRequestURL && (
+															<div className="flex items-center gap-2">
+																<GithubIcon />
+																<Link
+																	target="_blank"
+																	href={previewDeployment?.pullRequestURL}
+																	className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
+																>
+																	Pull Request URL
+																</Link>
+															</div>
+														)}
+													</div>
+													<div className="flex flex-col ">
+														<span>Domain </span>
+														<div className="flex flex-row items-center gap-4">
+															<Link
+																target="_blank"
+																href={`http://${domain?.host}`}
+																className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
+															>
+																{domain?.host}
+															</Link>
+															<AddPreviewDomain
+																previewDeploymentId={
+																	previewDeployment.previewDeploymentId
+																}
+																domainId={domain?.domainId}
+															>
+																<Button variant="outline" size="sm">
+																	<Pencil className="size-4 text-muted-foreground" />
+																</Button>
+															</AddPreviewDomain>
+														</div>
+													</div>
+												</div>
+
+												<div className="flex flex-col sm:items-end gap-2 max-sm:w-full">
+													{previewDeployment?.createdAt && (
+														<div className="text-sm capitalize text-muted-foreground">
+															<DateTooltip
+																date={previewDeployment?.createdAt}
+															/>
+														</div>
+													)}
+													<ShowPreviewBuilds
+														deployments={previewDeployment?.deployments || []}
+														serverId={data?.serverId || ""}
+													/>
+
+													<ShowModalLogs
+														appName={previewDeployment.appName}
+														serverId={data?.serverId || ""}
+													>
+														<Button variant="outline">View Logs</Button>
+													</ShowModalLogs>
+
+													<DialogAction
+														title="Delete Preview"
+														description="Are you sure you want to delete this preview?"
+														onClick={() => {
+															deletePreviewDeployment({
+																previewDeploymentId:
+																	previewDeployment.previewDeploymentId,
+															})
+																.then(() => {
+																	refetchPreviewDeployments();
+																	toast.success("Preview deployment deleted");
+																})
+																.catch((error) => {
+																	toast.error(error.message);
+																});
+														}}
+													>
+														<Button variant="destructive" isLoading={isLoading}>
+															Delete Preview
+														</Button>
+													</DialogAction>
+												</div>
+											</div>
+										</div>
+									);
+								})}
+							</div>
+						)}
+					</>
+				) : (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<RocketIcon className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							Preview deployments are disabled for this application, please
+							enable it
+						</span>
+						<ShowPreviewSettings applicationId={applicationId} />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
@@ -0,0 +1,351 @@
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input, NumberInput } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Secrets } from "@/components/ui/secrets";
+import { toast } from "sonner";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+const schema = z.object({
+	env: z.string(),
+	buildArgs: z.string(),
+	wildcardDomain: z.string(),
+	port: z.number(),
+	previewLimit: z.number(),
+	previewHttps: z.boolean(),
+	previewPath: z.string(),
+	previewCertificateType: z.enum(["letsencrypt", "none"]),
+});
+
+type Schema = z.infer<typeof schema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowPreviewSettings = ({ applicationId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isEnabled, setIsEnabled] = useState(false);
+	const { mutateAsync: updateApplication, isLoading } =
+		api.application.update.useMutation();
+
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			env: "",
+			wildcardDomain: "*.traefik.me",
+			port: 3000,
+			previewLimit: 3,
+			previewHttps: false,
+			previewPath: "/",
+			previewCertificateType: "none",
+		},
+		resolver: zodResolver(schema),
+	});
+
+	const previewHttps = form.watch("previewHttps");
+
+	useEffect(() => {
+		setIsEnabled(data?.isPreviewDeploymentsActive || false);
+	}, [data?.isPreviewDeploymentsActive]);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.previewEnv || "",
+				buildArgs: data.previewBuildArgs || "",
+				wildcardDomain: data.previewWildcard || "*.traefik.me",
+				port: data.previewPort || 3000,
+				previewLimit: data.previewLimit || 3,
+				previewHttps: data.previewHttps || false,
+				previewPath: data.previewPath || "/",
+				previewCertificateType: data.previewCertificateType || "none",
+			});
+		}
+	}, [data]);
+
+	const onSubmit = async (formData: Schema) => {
+		updateApplication({
+			previewEnv: formData.env,
+			previewBuildArgs: formData.buildArgs,
+			previewWildcard: formData.wildcardDomain,
+			previewPort: formData.port,
+			applicationId,
+			previewLimit: formData.previewLimit,
+			previewHttps: formData.previewHttps,
+			previewPath: formData.previewPath,
+			previewCertificateType: formData.previewCertificateType,
+		})
+			.then(() => {
+				toast.success("Preview Deployments settings updated");
+			})
+			.catch((error) => {
+				toast.error(error.message);
+			});
+	};
+	return (
+		<div>
+			<Dialog open={isOpen} onOpenChange={setIsOpen}>
+				<DialogTrigger asChild>
+					<Button variant="outline">View Settings</Button>
+				</DialogTrigger>
+				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
+					<DialogHeader>
+						<DialogTitle>Preview Deployment Settings</DialogTitle>
+						<DialogDescription>
+							Adjust the settings for preview deployments of this application,
+							including environment variables, build options, and deployment
+							rules.
+						</DialogDescription>
+					</DialogHeader>
+					<div className="grid gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-delete-application"
+								className="grid w-full gap-4"
+							>
+								<div className="grid gap-4 lg:grid-cols-2">
+									<FormField
+										control={form.control}
+										name="wildcardDomain"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Wildcard Domain</FormLabel>
+												<FormControl>
+													<Input placeholder="*.traefik.me" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="previewPath"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Preview Path</FormLabel>
+												<FormControl>
+													<Input placeholder="/" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="port"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Port</FormLabel>
+												<FormControl>
+													<NumberInput placeholder="3000" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="previewLimit"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Preview Limit</FormLabel>
+												{/* <FormDescription>
+													Set the limit of preview deployments that can be
+													created for this app.
+												</FormDescription> */}
+												<FormControl>
+													<NumberInput placeholder="3000" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+									<FormField
+										control={form.control}
+										name="previewHttps"
+										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>
+										)}
+									/>
+									{previewHttps && (
+										<FormField
+											control={form.control}
+											name="previewCertificateType"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Certificate</FormLabel>
+													<Select
+														onValueChange={field.onChange}
+														defaultValue={field.value || ""}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue placeholder="Select a certificate" />
+															</SelectTrigger>
+														</FormControl>
+
+														<SelectContent>
+															<SelectItem value="none">None</SelectItem>
+															<SelectItem value={"letsencrypt"}>
+																Letsencrypt (Default)
+															</SelectItem>
+														</SelectContent>
+													</Select>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									)}
+								</div>
+								<div className="grid gap-4 lg:grid-cols-2">
+									<div className="flex flex-row items-center justify-between rounded-lg border p-4 col-span-2">
+										<div className="space-y-0.5">
+											<FormLabel className="text-base">
+												Enable preview deployments
+											</FormLabel>
+											<FormDescription>
+												Enable or disable preview deployments for this
+												application.
+											</FormDescription>
+										</div>
+										<Switch
+											checked={isEnabled}
+											onCheckedChange={(checked) => {
+												updateApplication({
+													isPreviewDeploymentsActive: checked,
+													applicationId,
+												})
+													.then(() => {
+														refetch();
+														toast.success("Preview deployments enabled");
+													})
+													.catch((error) => {
+														toast.error(error.message);
+													});
+											}}
+										/>
+									</div>
+								</div>
+
+								<FormField
+									control={form.control}
+									name="env"
+									render={({ field }) => (
+										<FormItem>
+											<FormControl>
+												<Secrets
+													name="env"
+													title="Environment Settings"
+													description="You can add environment variables to your resource."
+													placeholder={[
+														"NODE_ENV=production",
+														"PORT=3000",
+													].join("\n")}
+												/>
+												{/* <CodeEditor
+													lineWrapping
+													language="properties"
+													wrapperClassName="h-[25rem] font-mono"
+													placeholder={`NODE_ENV=production
+PORT=3000
+
+                                                    `}
+													{...field}
+												/> */}
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{data?.buildType === "dockerfile" && (
+									<Secrets
+										name="buildArgs"
+										title="Build-time Variables"
+										description={
+											<span>
+												Available only at build-time. See documentation&nbsp;
+												<a
+													className="text-primary"
+													href="https://docs.docker.com/build/guide/build-args/"
+													target="_blank"
+													rel="noopener noreferrer"
+												>
+													here
+												</a>
+												.
+											</span>
+										}
+										placeholder="NPM_TOKEN=xyz"
+									/>
+								)}
+							</form>
+						</Form>
+					</div>
+					<DialogFooter>
+						<Button
+							variant="secondary"
+							onClick={() => {
+								setIsOpen(false);
+							}}
+						>
+							Cancel
+						</Button>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-delete-application"
+							type="submit"
+						>
+							Save
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+			{/* */}
+		</div>
+	);
+};
--- a/apps/dokploy/components/ui/secrets.tsx
+++ b/apps/dokploy/components/ui/secrets.tsx
@@ -29,7 +29,7 @@ export const Secrets = (props: Props) => {

 	return (
 		<>
-			<CardHeader className="flex flex-row w-full items-center justify-between">
+			<CardHeader className="flex flex-row w-full items-center justify-between px-0">
 				<div>
 					<CardTitle className="text-xl">{props.title}</CardTitle>
 					<CardDescription>{props.description}</CardDescription>
@@ -47,7 +47,7 @@ export const Secrets = (props: Props) => {
 					)}
 				</Toggle>
 			</CardHeader>
-			<CardContent className="w-full space-y-4">
+			<CardContent className="w-full space-y-4 p-0">
 				<FormField
 					control={form.control}
 					name={props.name}
--- a/apps/dokploy/drizzle/0049_dark_leopardon.sql
+++ b/apps/dokploy/drizzle/0049_dark_leopardon.sql
@@ -0,0 +1,53 @@
+ALTER TYPE "domainType" ADD VALUE 'preview';--> statement-breakpoint
+CREATE TABLE IF NOT EXISTS "preview_deployments" (
+	"previewDeploymentId" text PRIMARY KEY NOT NULL,
+	"branch" text NOT NULL,
+	"pullRequestId" text NOT NULL,
+	"pullRequestNumber" text NOT NULL,
+	"pullRequestURL" text NOT NULL,
+	"pullRequestTitle" text NOT NULL,
+	"pullRequestCommentId" text NOT NULL,
+	"previewStatus" "applicationStatus" DEFAULT 'idle' NOT NULL,
+	"appName" text NOT NULL,
+	"applicationId" text NOT NULL,
+	"domainId" text,
+	"createdAt" text NOT NULL,
+	"expiresAt" text,
+	CONSTRAINT "preview_deployments_appName_unique" UNIQUE("appName")
+);
+--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewEnv" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewBuildArgs" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewWildcard" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewPort" integer DEFAULT 3000;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewHttps" boolean DEFAULT false NOT NULL;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewPath" text DEFAULT '/';--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "certificateType" "certificateType" DEFAULT 'none' NOT NULL;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "previewLimit" integer DEFAULT 3;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "isPreviewDeploymentsActive" boolean DEFAULT false;--> statement-breakpoint
+ALTER TABLE "domain" ADD COLUMN "previewDeploymentId" text;--> statement-breakpoint
+ALTER TABLE "deployment" ADD COLUMN "isPreviewDeployment" boolean DEFAULT false;--> statement-breakpoint
+ALTER TABLE "deployment" ADD COLUMN "previewDeploymentId" text;--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "preview_deployments" ADD CONSTRAINT "preview_deployments_applicationId_application_applicationId_fk" FOREIGN KEY ("applicationId") REFERENCES "public"."application"("applicationId") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "preview_deployments" ADD CONSTRAINT "preview_deployments_domainId_domain_domainId_fk" FOREIGN KEY ("domainId") REFERENCES "public"."domain"("domainId") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "domain" ADD CONSTRAINT "domain_previewDeploymentId_preview_deployments_previewDeploymentId_fk" FOREIGN KEY ("previewDeploymentId") REFERENCES "public"."preview_deployments"("previewDeploymentId") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "deployment" ADD CONSTRAINT "deployment_previewDeploymentId_preview_deployments_previewDeploymentId_fk" FOREIGN KEY ("previewDeploymentId") REFERENCES "public"."preview_deployments"("previewDeploymentId") ON DELETE cascade ON UPDATE no action;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
--- a/apps/dokploy/drizzle/meta/0049_snapshot.json
+++ b/apps/dokploy/drizzle/meta/0049_snapshot.json
--- a/apps/dokploy/drizzle/meta/_journal.json
+++ b/apps/dokploy/drizzle/meta/_journal.json
@@ -344,6 +344,13 @@
      "when": 1733599163710,
      "tag": "0048_flat_expediter",
      "breakpoints": true
+    },
+    {
+      "idx": 49,
+      "version": "6",
+      "when": 1733628762978,
+      "tag": "0049_dark_leopardon",
+      "breakpoints": true
    }
  ]
 }
--- a/apps/dokploy/package.json
+++ b/apps/dokploy/package.json
@@ -11,7 +11,8 @@
 		"build-next": "next build",
 		"setup": "tsx -r dotenv/config setup.ts && sleep 5 && pnpm run migration:run",
 		"reset-password": "node -r dotenv/config dist/reset-password.mjs",
-		"dev": "TURBOPACK=1 tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json ",
+		"dev": "tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json ",
+		"dev-turbopack": "TURBOPACK=1 tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json",
 		"studio": "drizzle-kit studio --config ./server/db/drizzle.config.ts",
 		"migration:generate": "drizzle-kit generate --config ./server/db/drizzle.config.ts",
 		"migration:run": "tsx -r dotenv/config migration.ts",
--- a/apps/dokploy/pages/api/deploy/github.ts
+++ b/apps/dokploy/pages/api/deploy/github.ts
@@ -3,11 +3,19 @@ import { applications, compose, github } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
-import { IS_CLOUD } from "@dokploy/server";
+import {
+	createPreviewDeployment,
+	type Domain,
+	findPreviewDeploymentByApplicationId,
+	findPreviewDeploymentsByPullRequestId,
+	IS_CLOUD,
+	removePreviewDeployment,
+} from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { extractCommitMessage, extractHash } from "./[refreshToken]";
+import { generateRandomDomain } from "@/templates/utils";

 export default async function handler(
 	req: NextApiRequest,
@@ -53,36 +61,183 @@ export default async function handler(
 		return;
 	}

-	if (req.headers["x-github-event"] !== "push") {
-		res.status(400).json({ message: "We only accept push events" });
+	if (
+		req.headers["x-github-event"] !== "push" &&
+		req.headers["x-github-event"] !== "pull_request"
+	) {
+		res
+			.status(400)
+			.json({ message: "We only accept push events or pull_request events" });
 		return;
 	}

-	try {
-		const branchName = githubBody?.ref?.replace("refs/heads/", "");
+	if (req.headers["x-github-event"] === "push") {
+		try {
+			const branchName = githubBody?.ref?.replace("refs/heads/", "");
+			const repository = githubBody?.repository?.name;
+			const deploymentTitle = extractCommitMessage(req.headers, req.body);
+			const deploymentHash = extractHash(req.headers, req.body);
+			const owner = githubBody?.repository?.owner?.name;
+
+			const apps = await db.query.applications.findMany({
+				where: and(
+					eq(applications.sourceType, "github"),
+					eq(applications.autoDeploy, true),
+					eq(applications.branch, branchName),
+					eq(applications.repository, repository),
+					eq(applications.owner, owner),
+				),
+			});
+
+			for (const app of apps) {
+				const jobData: DeploymentJob = {
+					applicationId: app.applicationId as string,
+					titleLog: deploymentTitle,
+					descriptionLog: `Hash: ${deploymentHash}`,
+					type: "deploy",
+					applicationType: "application",
+					server: !!app.serverId,
+				};
+
+				if (IS_CLOUD && app.serverId) {
+					jobData.serverId = app.serverId;
+					await deploy(jobData);
+					return true;
+				}
+				await myQueue.add(
+					"deployments",
+					{ ...jobData },
+					{
+						removeOnComplete: true,
+						removeOnFail: true,
+					},
+				);
+			}
+
+			const composeApps = await db.query.compose.findMany({
+				where: and(
+					eq(compose.sourceType, "github"),
+					eq(compose.autoDeploy, true),
+					eq(compose.branch, branchName),
+					eq(compose.repository, repository),
+					eq(compose.owner, owner),
+				),
+			});
+
+			for (const composeApp of composeApps) {
+				const jobData: DeploymentJob = {
+					composeId: composeApp.composeId as string,
+					titleLog: deploymentTitle,
+					type: "deploy",
+					applicationType: "compose",
+					descriptionLog: `Hash: ${deploymentHash}`,
+					server: !!composeApp.serverId,
+				};
+
+				if (IS_CLOUD && composeApp.serverId) {
+					jobData.serverId = composeApp.serverId;
+					await deploy(jobData);
+					return true;
+				}
+
+				await myQueue.add(
+					"deployments",
+					{ ...jobData },
+					{
+						removeOnComplete: true,
+						removeOnFail: true,
+					},
+				);
+			}
+
+			const totalApps = apps.length + composeApps.length;
+			const emptyApps = totalApps === 0;
+
+			if (emptyApps) {
+				res.status(200).json({ message: "No apps to deploy" });
+				return;
+			}
+			res.status(200).json({ message: `Deployed ${totalApps} apps` });
+		} catch (error) {
+			res.status(400).json({ message: "Error To Deploy Application", error });
+		}
+	} else if (req.headers["x-github-event"] === "pull_request") {
+		const prId = githubBody?.pull_request?.id;
+
+		if (githubBody?.action === "closed") {
+			const previewDeploymentResult =
+				await findPreviewDeploymentsByPullRequestId(prId);
+
+			if (previewDeploymentResult.length > 0) {
+				for (const previewDeployment of previewDeploymentResult) {
+					try {
+						await removePreviewDeployment(
+							previewDeployment.previewDeploymentId,
+						);
+					} catch (error) {
+						console.log(error);
+					}
+				}
+			}
+			res.status(200).json({ message: "Preview Deployment Closed" });
+			return;
+		}
+		// opened or synchronize or reopened
 		const repository = githubBody?.repository?.name;
-		const deploymentTitle = extractCommitMessage(req.headers, req.body);
-		const deploymentHash = extractHash(req.headers, req.body);
-		const owner = githubBody?.repository?.owner?.name;
+		const deploymentHash = githubBody?.pull_request?.head?.sha;
+		const branch = githubBody?.pull_request?.base?.ref;
+		const owner = githubBody?.repository?.owner?.login;

 		const apps = await db.query.applications.findMany({
 			where: and(
 				eq(applications.sourceType, "github"),
-				eq(applications.autoDeploy, true),
-				eq(applications.branch, branchName),
 				eq(applications.repository, repository),
+				eq(applications.branch, branch),
+				eq(applications.isPreviewDeploymentsActive, true),
 				eq(applications.owner, owner),
 			),
+			with: {
+				previewDeployments: true,
+			},
 		});

+		const prBranch = githubBody?.pull_request?.head?.ref;
+
+		const prNumber = githubBody?.pull_request?.number;
+		const prTitle = githubBody?.pull_request?.title;
+		const prURL = githubBody?.pull_request?.html_url;
+
 		for (const app of apps) {
+			const previewLimit = app?.previewLimit || 0;
+			if (app?.previewDeployments?.length > previewLimit) {
+				continue;
+			}
+			const previewDeploymentResult =
+				await findPreviewDeploymentByApplicationId(app.applicationId, prId);
+
+			let previewDeploymentId =
+				previewDeploymentResult?.previewDeploymentId || "";
+
+			if (!previewDeploymentResult) {
+				const previewDeployment = await createPreviewDeployment({
+					applicationId: app.applicationId as string,
+					branch: prBranch,
+					pullRequestId: prId,
+					pullRequestNumber: prNumber,
+					pullRequestTitle: prTitle,
+					pullRequestURL: prURL,
+				});
+				previewDeploymentId = previewDeployment.previewDeploymentId;
+			}
+
 			const jobData: DeploymentJob = {
 				applicationId: app.applicationId as string,
-				titleLog: deploymentTitle,
+				titleLog: "Preview Deployment",
 				descriptionLog: `Hash: ${deploymentHash}`,
 				type: "deploy",
-				applicationType: "application",
+				applicationType: "application-preview",
 				server: !!app.serverId,
+				previewDeploymentId,
 			};

 			if (IS_CLOUD && app.serverId) {
@@ -99,52 +254,8 @@ export default async function handler(
 				},
 			);
 		}
-
-		const composeApps = await db.query.compose.findMany({
-			where: and(
-				eq(compose.sourceType, "github"),
-				eq(compose.autoDeploy, true),
-				eq(compose.branch, branchName),
-				eq(compose.repository, repository),
-				eq(compose.owner, owner),
-			),
-		});
-
-		for (const composeApp of composeApps) {
-			const jobData: DeploymentJob = {
-				composeId: composeApp.composeId as string,
-				titleLog: deploymentTitle,
-				type: "deploy",
-				applicationType: "compose",
-				descriptionLog: `Hash: ${deploymentHash}`,
-				server: !!composeApp.serverId,
-			};
-
-			if (IS_CLOUD && composeApp.serverId) {
-				jobData.serverId = composeApp.serverId;
-				await deploy(jobData);
-				return true;
-			}
-
-			await myQueue.add(
-				"deployments",
-				{ ...jobData },
-				{
-					removeOnComplete: true,
-					removeOnFail: true,
-				},
-			);
-		}
-
-		const totalApps = apps.length + composeApps.length;
-		const emptyApps = totalApps === 0;
-
-		if (emptyApps) {
-			res.status(200).json({ message: "No apps to deploy" });
-			return;
-		}
-		res.status(200).json({ message: `Deployed ${totalApps} apps` });
-	} catch (error) {
-		res.status(400).json({ message: "Error To Deploy Application", error });
+		return res.status(200).json({ message: "Apps Deployed" });
 	}
+
+	return res.status(400).json({ message: "No Actions matched" });
 }
--- a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx
@@ -12,6 +12,7 @@ import { ShowDomains } from "@/components/dashboard/application/domains/show-dom
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show";
 import { ShowGeneralApplication } from "@/components/dashboard/application/general/show";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
+import { ShowPreviewDeployments } from "@/components/dashboard/application/preview-deployments/show-preview-deployments";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
 import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
 import { ProjectLayout } from "@/components/layouts/project-layout";
@@ -51,7 +52,8 @@ type TabState =
 	| "advanced"
 	| "deployments"
 	| "domains"
-	| "monitoring";
+	| "monitoring"
+	| "preview-deployments";

 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
@@ -191,8 +193,8 @@ const Service = (
 					<div className="flex flex-row items-center justify-between  w-full gap-4">
 						<TabsList
 							className={cn(
-								"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-								data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7",
+								"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
+								data?.serverId ? "md:grid-cols-7" : "md:grid-cols-8",
 							)}
 						>
 							<TabsTrigger value="general">General</TabsTrigger>
@@ -202,6 +204,9 @@ const Service = (
 							)}
 							<TabsTrigger value="logs">Logs</TabsTrigger>
 							<TabsTrigger value="deployments">Deployments</TabsTrigger>
+							<TabsTrigger value="preview-deployments">
+								Preview Deployments
+							</TabsTrigger>
 							<TabsTrigger value="domains">Domains</TabsTrigger>
 							<TabsTrigger value="advanced">Advanced</TabsTrigger>
 						</TabsList>
@@ -244,6 +249,11 @@ const Service = (
 							<ShowDeployments applicationId={applicationId} />
 						</div>
 					</TabsContent>
+					<TabsContent value="preview-deployments" className="w-full">
+						<div className="flex flex-col gap-4 pt-2.5">
+							<ShowPreviewDeployments applicationId={applicationId} />
+						</div>
+					</TabsContent>
 					<TabsContent value="domains" className="w-full">
 						<div className="flex flex-col gap-4 pt-2.5">
 							<ShowDomains applicationId={applicationId} />
--- a/apps/dokploy/public/templates/browserless.svg
+++ b/apps/dokploy/public/templates/browserless.svg
@@ -0,0 +1,13 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
+	<title>favicon</title>
+	<defs>
+		<linearGradient id="g1" x1="220.3" y1="854.7" x2="760.4" y2="517.2" gradientUnits="userSpaceOnUse">
+			<stop offset="0" stop-color="#ff3c95"/>
+			<stop offset="1" stop-color="#ffc550"/>
+		</linearGradient>
+	</defs>
+	<style>
+		.s0 { fill: url(#g1) } 
+	</style>
+	<path id="Path 0" class="s0" d="m243.9 0c0.3 0.1 26.4 15 115.1 66.5v411.8c0 391.6 0.1 411.7 1.8 411.2 0.9-0.3 69.7-34 304.1-149l0.1-61.8c0-48.9-0.3-61.6-1.3-61.3-0.6 0.2-43.6 20-95.5 44-51.8 24-94.4 43.5-94.7 43.3-0.2-0.1-0.3-128.3 0-569.6l115.5 68 1.1 256.4 191.4 111.4 0.5 243.6-213.1 104.5c-117.2 57.5-213.9 104.6-214.8 104.8-0.9 0.2-26.5-16.3-112.2-73.3l0.1-296.5c0-163.1 0.3-376.9 0.7-475.2 0.3-98.4 0.9-178.8 1.2-178.8z"/>
+</svg>
--- a/apps/dokploy/public/templates/budibase.svg
+++ b/apps/dokploy/public/templates/budibase.svg
@@ -0,0 +1,13 @@
+<svg width="265" height="265" viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_1799)">
+<path d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z" fill="#FF4E4E"/>
+<path d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z" fill="#6E56FF"/>
+<path d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z" fill="#F97777"/>
+<path d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z" fill="#9F8FFF"/>
+</g>
+<defs>
+<clipPath id="clip0_1_1799">
+<rect width="265" height="265" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/apps/dokploy/public/templates/drawio.svg
+++ b/apps/dokploy/public/templates/drawio.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 161.6 161.6" style="enable-background:new 0 0 161.6 161.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F08705;}
+	.st1{fill:#DF6C0C;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#333333;}
+</style>
+<g>
+	<path class="st0" d="M161.6,154.7c0,3.9-3.2,6.9-6.9,6.9H6.9c-3.9,0-6.9-3.2-6.9-6.9V6.9C0,3,3.2,0,6.9,0h147.8   c3.9,0,6.9,3.2,6.9,6.9L161.6,154.7L161.6,154.7z"/>
+	<g>
+		<path class="st1" d="M161.6,154.7c0,3.9-3.2,6.9-6.9,6.9H55.3l-32.2-32.7l20-32.7l59.4-73.8l58.9,60.7L161.6,154.7z"/>
+	</g>
+	<path class="st2" d="M132.7,90.3h-17l-18-30.6c4-0.8,7-4.4,7-8.6V28c0-4.9-3.9-8.8-8.8-8.8h-30c-4.9,0-8.8,3.9-8.8,8.8v23.1   c0,4.3,3,7.8,6.9,8.6L46,90.4H29c-4.9,0-8.8,3.9-8.8,8.8v23.1c0,4.9,3.9,8.8,8.8,8.8h30c4.9,0,8.8-3.9,8.8-8.8V99.2   c0-4.9-3.9-8.8-8.8-8.8h-2.9L73.9,60h13.9l17.9,30.4h-3c-4.9,0-8.8,3.9-8.8,8.8v23.1c0,4.9,3.9,8.8,8.8,8.8h30   c4.9,0,8.8-3.9,8.8-8.8V99.2C141.5,94.3,137.6,90.3,132.7,90.3z"/>
+</g>
+</svg>
--- a/apps/dokploy/public/templates/kimai.svg
+++ b/apps/dokploy/public/templates/kimai.svg
@@ -0,0 +1 @@
+<svg cursor="default" enable-background="new" height="512" viewBox="0 0 440 440" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="611" cy="41.266644" gradientTransform="matrix(1.1673343 0 0 1.4196623 -102.24121 -19.722475)" gradientUnits="userSpaceOnUse" r="160.5"><stop offset="0" stop-color="#01fd00"/><stop offset="1" stop-color="#009d39"/></radialGradient><radialGradient id="b" cx="873.78265" cy="-16.37981" gradientTransform="matrix(1.9295131 -1.1140049 1.1550268 2.0005649 -1087.6858 1104.8947)" gradientUnits="userSpaceOnUse" r="55.747124"><stop offset="0" stop-color="#f9f9f9"/><stop offset="1" stop-color="#fff"/></radialGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="611.14288" x2="610.57141" y1="234.57143" y2="-110.91601"><stop offset="0" stop-color="#f2f2f2"/><stop offset="1" stop-color="#f2f2f2"/></linearGradient><g transform="translate(-390.56693 181.56689)"><g><path d="m391.020508-182.838852h439.95895v439.95895h-439.95895z" fill="#fff" stroke="#58dd58" stroke-linejoin="round" stroke-width=".040996" visibility="hidden"/><circle cx="611" cy="38" fill="url(#c)" r="187.776825"/><circle cx="611" cy="38" fill="url(#a)" r="166.285645" stroke="#fff" stroke-linejoin="round" stroke-width="3"/><path d="m571.156433 108.308197 110-63.999998-110-64z" fill="url(#b)" fill-rule="evenodd"/></g><g fill="#c7efc4" fill-rule="evenodd"><rect height="32" opacity=".5" ry="7" transform="matrix(-.83616052 -.5484848 .5484848 -.83616052 0 0)" width="14" x="-542.46875" y="419.410309"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.45720822 -.88935968 .88935968 -.45720822 0 0)" width="14" x="-320.158203" y="642.978027"/><rect height="41" opacity=".5" ry="9" transform="rotate(-90)" width="18" x="-48.536366" y="718.754395"/><rect height="32" opacity=".5" ry="7" transform="matrix(.47159375 -.88181593 .88181593 .47159375 0 0)" width="14" x="244.405457" y="673.798523"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.8503618 .52619845 -.52619845 -.8503618 0 0)" width="14" x="-505.884949" y="-503.867859"/><rect height="41" opacity=".5" ry="9" transform="scale(-1)" width="18" x="-620.297424" y="-187.942719"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.84033379 -.54206929 .54206929 -.84033379 0 0)" width="14" x="-539.16571" y="148.581909"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.45720822 -.88935968 .88935968 -.45720822 0 0)" width="14" x="-319.728088" y="374.804901"/><rect height="41" opacity=".5" ry="9" transform="rotate(-90)" width="18" x="-48.536366" y="460.964569"/><rect height="32" opacity=".5" ry="7" transform="matrix(.47159375 -.88181593 .88181593 .47159375 0 0)" width="14" x="250.841736" y="406.195648"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.849305 .52790248 -.52790248 -.849305 0 0)" width="14" x="-505.957611" y="-236.959518"/><g transform="scale(-1)"><rect height="41" opacity=".5" ry="9" width="18" x="-633.02533" y="69.120789"/><rect height="41" opacity=".5" ry="9" width="18" x="-606.761353" y="69.120789"/></g></g></g></svg>
--- a/apps/dokploy/server/api/root.ts
+++ b/apps/dokploy/server/api/root.ts
@@ -31,6 +31,7 @@ import { settingsRouter } from "./routers/settings";
 import { sshRouter } from "./routers/ssh-key";
 import { stripeRouter } from "./routers/stripe";
 import { userRouter } from "./routers/user";
+import { previewDeploymentRouter } from "./routers/preview-deployment";

 /**
 * This is the primary router for your server.
@@ -55,6 +56,7 @@ export const appRouter = createTRPCRouter({
 	destination: destinationRouter,
 	backup: backupRouter,
 	deployment: deploymentRouter,
+	previewDeployment: previewDeploymentRouter,
 	mounts: mountRouter,
 	certificates: certificateRouter,
 	settings: settingsRouter,
--- a/apps/dokploy/server/api/routers/domain.ts
+++ b/apps/dokploy/server/api/routers/domain.ts
@@ -13,6 +13,7 @@ import {
 	findDomainById,
 	findDomainsByApplicationId,
 	findDomainsByComposeId,
+	findPreviewDeploymentById,
 	generateTraefikMeDomain,
 	manageDomain,
 	removeDomain,
@@ -108,12 +109,33 @@ export const domainRouter = createTRPCRouter({
 						message: "You are not authorized to access this compose",
 					});
 				}
+			} else if (currentDomain.previewDeploymentId) {
+				const newPreviewDeployment = await findPreviewDeploymentById(
+					currentDomain.previewDeploymentId,
+				);
+				if (
+					newPreviewDeployment.application.project.adminId !== ctx.user.adminId
+				) {
+					throw new TRPCError({
+						code: "UNAUTHORIZED",
+						message: "You are not authorized to access this preview deployment",
+					});
+				}
 			}
 			const result = await updateDomainById(input.domainId, input);
 			const domain = await findDomainById(input.domainId);
 			if (domain.applicationId) {
 				const application = await findApplicationById(domain.applicationId);
 				await manageDomain(application, domain);
+			} else if (domain.previewDeploymentId) {
+				const previewDeployment = await findPreviewDeploymentById(
+					domain.previewDeploymentId,
+				);
+				const application = await findApplicationById(
+					previewDeployment.applicationId,
+				);
+				application.appName = previewDeployment.appName;
+				await manageDomain(application, domain);
 			}
 			return result;
 		}),
--- a/apps/dokploy/server/api/routers/preview-deployment.ts
+++ b/apps/dokploy/server/api/routers/preview-deployment.ts
@@ -0,0 +1,54 @@
+import { apiFindAllByApplication } from "@/server/db/schema";
+import {
+	findApplicationById,
+	findPreviewDeploymentById,
+	findPreviewDeploymentsByApplicationId,
+	removePreviewDeployment,
+} from "@dokploy/server";
+import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import { createTRPCRouter, protectedProcedure } from "../trpc";
+
+export const previewDeploymentRouter = createTRPCRouter({
+	all: protectedProcedure
+		.input(apiFindAllByApplication)
+		.query(async ({ input, ctx }) => {
+			const application = await findApplicationById(input.applicationId);
+			if (application.project.adminId !== ctx.user.adminId) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to access this application",
+				});
+			}
+			return await findPreviewDeploymentsByApplicationId(input.applicationId);
+		}),
+	delete: protectedProcedure
+		.input(z.object({ previewDeploymentId: z.string() }))
+		.mutation(async ({ input, ctx }) => {
+			const previewDeployment = await findPreviewDeploymentById(
+				input.previewDeploymentId,
+			);
+			if (previewDeployment.application.project.adminId !== ctx.user.adminId) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to delete this preview deployment",
+				});
+			}
+			await removePreviewDeployment(input.previewDeploymentId);
+			return true;
+		}),
+	one: protectedProcedure
+		.input(z.object({ previewDeploymentId: z.string() }))
+		.query(async ({ input, ctx }) => {
+			const previewDeployment = await findPreviewDeploymentById(
+				input.previewDeploymentId,
+			);
+			if (previewDeployment.application.project.adminId !== ctx.user.adminId) {
+				throw new TRPCError({
+					code: "UNAUTHORIZED",
+					message: "You are not authorized to access this preview deployment",
+				});
+			}
+			return previewDeployment;
+		}),
+});
--- a/apps/dokploy/server/queues/deployments-queue.ts
+++ b/apps/dokploy/server/queues/deployments-queue.ts
@@ -1,14 +1,17 @@
 import {
 	deployApplication,
 	deployCompose,
+	deployPreviewApplication,
 	deployRemoteApplication,
 	deployRemoteCompose,
+	deployRemotePreviewApplication,
 	rebuildApplication,
 	rebuildCompose,
 	rebuildRemoteApplication,
 	rebuildRemoteCompose,
 	updateApplicationStatus,
 	updateCompose,
+	updatePreviewDeployment,
 } from "@dokploy/server";
 import { type Job, Worker } from "bullmq";
 import type { DeploymentJob } from "./queue-types";
@@ -18,8 +21,11 @@ export const deploymentWorker = new Worker(
 	"deployments",
 	async (job: Job<DeploymentJob>) => {
 		try {
+			console.log(job.data);
+
 			if (job.data.applicationType === "application") {
 				await updateApplicationStatus(job.data.applicationId, "running");
+
 				if (job.data.server) {
 					if (job.data.type === "redeploy") {
 						await rebuildRemoteApplication({
@@ -83,6 +89,29 @@ export const deploymentWorker = new Worker(
 						});
 					}
 				}
+			} else if (job.data.applicationType === "application-preview") {
+				await updatePreviewDeployment(job.data.previewDeploymentId, {
+					previewStatus: "running",
+				});
+				if (job.data.server) {
+					if (job.data.type === "deploy") {
+						await deployRemotePreviewApplication({
+							applicationId: job.data.applicationId,
+							titleLog: job.data.titleLog,
+							descriptionLog: job.data.descriptionLog,
+							previewDeploymentId: job.data.previewDeploymentId,
+						});
+					}
+				} else {
+					if (job.data.type === "deploy") {
+						await deployPreviewApplication({
+							applicationId: job.data.applicationId,
+							titleLog: job.data.titleLog,
+							descriptionLog: job.data.descriptionLog,
+							previewDeploymentId: job.data.previewDeploymentId,
+						});
+					}
+				}
 			}
 		} catch (error) {
 			console.log("Error", error);
--- a/apps/dokploy/server/queues/queue-types.ts
+++ b/apps/dokploy/server/queues/queue-types.ts
@@ -16,6 +16,16 @@ type DeployJob =
 			type: "deploy" | "redeploy";
 			applicationType: "compose";
 			serverId?: string;
+	  }
+	| {
+			applicationId: string;
+			titleLog: string;
+			descriptionLog: string;
+			server?: boolean;
+			type: "deploy";
+			applicationType: "application-preview";
+			previewDeploymentId: string;
+			serverId?: string;
 	  };

 export type DeploymentJob = DeployJob;
--- a/apps/dokploy/server/server.ts
+++ b/apps/dokploy/server/server.ts
@@ -24,7 +24,7 @@ import { setupTerminalWebSocketServer } from "./wss/terminal";
 config({ path: ".env" });
 const PORT = Number.parseInt(process.env.PORT || "3000", 10);
 const dev = process.env.NODE_ENV !== "production";
-const app = next({ dev, turbopack: dev });
+const app = next({ dev, turbopack: process.env.TURBOPACK === "1" });
 const handle = app.getRequestHandler();
 void app.prepare().then(async () => {
 	try {
--- a/apps/dokploy/templates/browserless/docker-compose.yml
+++ b/apps/dokploy/templates/browserless/docker-compose.yml
@@ -0,0 +1,16 @@
+services:
+  browserless:
+    image: ghcr.io/browserless/chromium:v2.23.0
+    environment:
+      TOKEN: ${BROWSERLESS_TOKEN}
+    expose:
+      - 3000
+    healthcheck:
+      test:
+        - CMD
+        - curl
+        - '-f'
+        - 'http://127.0.0.1:3000/docs'
+      interval: 2s
+      timeout: 10s
+      retries: 15
--- a/apps/dokploy/templates/browserless/index.ts
+++ b/apps/dokploy/templates/browserless/index.ts
@@ -0,0 +1,28 @@
+import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generatePassword,
+	generateRandomDomain,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+	const mainHost = generateRandomDomain(schema);
+
+	const domains: DomainSchema[] = [
+		{
+			host: mainHost,
+			port: 3000,
+			serviceName: "browserless",
+		},
+	];
+	const envs = [
+		`BROWERLESS_HOST=${mainHost}`,
+		`BROWSERLESS_TOKEN=${generatePassword(16)}`,
+	];
+
+	return {
+		envs,
+		domains,
+	};
+}
--- a/apps/dokploy/templates/budibase/docker-compose.yml
+++ b/apps/dokploy/templates/budibase/docker-compose.yml
@@ -0,0 +1,199 @@
+services:
+  apps:
+    image: budibase.docker.scarf.sh/budibase/apps:3.2.25
+    restart: unless-stopped
+    networks:
+      - dokploy-network
+    environment:
+      SELF_HOSTED: 1
+      LOG_LEVEL: info
+      PORT: 4002
+      INTERNAL_API_KEY: ${BB_INTERNAL_API_KEY}
+      API_ENCRYPTION_KEY: ${BB_API_ENCRYPTION_KEY}
+      JWT_SECRET: ${BB_JWT_SECRET}
+      MINIO_ACCESS_KEY: ${BB_MINIO_ACCESS_KEY}
+      MINIO_SECRET_KEY: ${BB_MINIO_SECRET_KEY}
+      MINIO_URL: http://minio:9000
+      REDIS_URL: redis:6379
+      REDIS_PASSWORD: ${BB_REDIS_PASSWORD}
+      WORKER_URL: http://worker:4003
+      COUCH_DB_USERNAME: budibase
+      COUCH_DB_PASSWORD: ${BB_COUCHDB_PASSWORD}
+      COUCH_DB_URL: http://budibase:${BB_COUCHDB_PASSWORD}@couchdb:5984
+      BUDIBASE_ENVIRONMENT: ${BUDIBASE_ENVIRONMENT:-PRODUCTION}
+      ENABLE_ANALYTICS: ${ENABLE_ANALYTICS:-true}
+      BB_ADMIN_USER_EMAIL: ''
+      BB_ADMIN_USER_PASSWORD: ''
+    depends_on:
+      worker:
+        condition: service_healthy
+      redis:
+        condition: service_healthy
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - '--spider'
+        - '-qO-'
+        - 'http://localhost:4002/health'
+      interval: 15s
+      timeout: 15s
+      retries: 5
+      start_period: 10s
+  worker:
+    image: budibase.docker.scarf.sh/budibase/worker:3.2.25
+    restart: unless-stopped
+    networks:
+      - dokploy-network
+    environment:
+      SELF_HOSTED: 1
+      LOG_LEVEL: info
+      PORT: 4003
+      CLUSTER_PORT: 10000
+      INTERNAL_API_KEY: ${BB_INTERNAL_API_KEY}
+      API_ENCRYPTION_KEY: ${BB_API_ENCRYPTION_KEY}
+      JWT_SECRET: ${BB_JWT_SECRET}
+      MINIO_ACCESS_KEY: ${BB_MINIO_ACCESS_KEY}
+      MINIO_SECRET_KEY: ${BB_MINIO_SECRET_KEY}
+      APPS_URL: http://apps:4002
+      MINIO_URL: http://minio:9000
+      REDIS_URL: redis:6379
+      REDIS_PASSWORD: ${BB_REDIS_PASSWORD}
+      COUCH_DB_USERNAME: budibase
+      COUCH_DB_PASSWORD: ${BB_COUCHDB_PASSWORD}
+      COUCH_DB_URL: http://budibase:${BB_COUCHDB_PASSWORD}@couchdb:5984
+      BUDIBASE_ENVIRONMENT: ${BUDIBASE_ENVIRONMENT:-PRODUCTION}
+      ENABLE_ANALYTICS: ${ENABLE_ANALYTICS:-true}
+    depends_on:
+      redis:
+        condition: service_healthy
+      minio:
+        condition: service_healthy
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - '--spider'
+        - '-qO-'
+        - 'http://localhost:4003/health'
+      interval: 15s
+      timeout: 15s
+      retries: 5
+      start_period: 10s
+  minio:
+    image: minio/minio:RELEASE.2024-11-07T00-52-20Z
+    restart: unless-stopped
+    networks:
+      - dokploy-network
+    volumes:
+      - 'minio_data:/data'
+    environment:
+      MINIO_ROOT_USER: ${BB_MINIO_ACCESS_KEY}
+      MINIO_ROOT_PASSWORD: ${BB_MINIO_SECRET_KEY}
+      MINIO_BROWSER: off
+    command: 'server /data --console-address ":9001"'
+    healthcheck:
+      test:
+        - CMD
+        - curl
+        - '-f'
+        - 'http://localhost:9000/minio/health/live'
+      interval: 30s
+      timeout: 20s
+      retries: 3
+  proxy:
+    image: budibase/proxy:3.2.25
+    restart: unless-stopped
+    networks:
+      - dokploy-network
+    environment:
+      PROXY_RATE_LIMIT_WEBHOOKS_PER_SECOND: 10
+      PROXY_RATE_LIMIT_API_PER_SECOND: 20
+      APPS_UPSTREAM_URL: http://apps:4002
+      WORKER_UPSTREAM_URL: http://worker:4003
+      MINIO_UPSTREAM_URL: http://minio:9000
+      COUCHDB_UPSTREAM_URL: http://couchdb:5984
+      WATCHTOWER_UPSTREAM_URL: http://watchtower:8080
+      RESOLVER: 127.0.0.11
+    depends_on:
+      minio:
+        condition: service_healthy
+      worker:
+        condition: service_healthy
+      apps:
+        condition: service_healthy
+      couchdb:
+        condition: service_healthy
+    healthcheck:
+      test:
+        - CMD
+        - curl
+        - '-f'
+        - 'http://localhost:10000/'
+      interval: 15s
+      timeout: 15s
+      retries: 5
+      start_period: 10s
+  couchdb:
+    image: budibase/couchdb:v3.3.3
+    restart: unless-stopped
+    networks:
+      - dokploy-network
+    environment:
+      COUCHDB_USER: budibase
+      COUCHDB_PASSWORD: ${BB_COUCHDB_PASSWORD}
+      TARGETBUILD: docker-compose
+    healthcheck:
+      test:
+        - CMD
+        - curl
+        - '-f'
+        - 'http://localhost:5984/'
+      interval: 15s
+      timeout: 15s
+      retries: 5
+      start_period: 10s
+    volumes:
+      - 'couchdb3_data:/opt/couchdb/data'
+  redis:
+    image: redis:7.2-alpine
+    networks:
+      - dokploy-network
+    restart: unless-stopped
+    command: 'redis-server --requirepass "${BB_REDIS_PASSWORD}"'
+    volumes:
+      - 'redis_data:/data'
+    healthcheck:
+      test:
+        - CMD
+        - redis-cli
+        - '-a'
+        - ${BB_REDIS_PASSWORD}
+        - ping
+      interval: 15s
+      timeout: 15s
+      retries: 5
+      start_period: 10s
+  watchtower:
+    restart: unless-stopped   
+    networks:
+      - dokploy-network 
+    image: containrrr/watchtower:1.7.1
+    volumes:
+      - '/var/run/docker.sock:/var/run/docker.sock'
+    command: '--debug --http-api-update bbapps bbworker bbproxy'
+    environment:
+      WATCHTOWER_HTTP_API: true
+      WATCHTOWER_HTTP_API_TOKEN: ${BB_WATCHTOWER_PASSWORD}
+      WATCHTOWER_CLEANUP: true
+    labels:
+      - com.centurylinklabs.watchtower.enable=false
+
+networks:
+  dokploy-network:
+    external: true
+
+volumes:
+  minio_data:
+  couchdb3_data:
+  redis_data: 
--- a/apps/dokploy/templates/budibase/index.ts
+++ b/apps/dokploy/templates/budibase/index.ts
@@ -0,0 +1,45 @@
+import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generatePassword,
+	generateRandomDomain,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+	const mainDomain = generateRandomDomain(schema);
+
+	const apiKey = generatePassword(32);
+	const encryptionKey = generatePassword(32);
+	const jwtSecret = generatePassword(32);
+	const couchDbPassword = generatePassword(32);
+	const redisPassword = generatePassword(32);
+	const minioAccessKey = generatePassword(32);
+	const minioSecretKey = generatePassword(32);
+	const watchtowerPassword = generatePassword(32);
+
+	const domains: DomainSchema[] = [
+		{
+			host: mainDomain,
+			port: 10000,
+			serviceName: "proxy",
+		},
+	];
+
+	const envs = [
+		`BB_HOST=${mainDomain}`,
+		`BB_INTERNAL_API_KEY=${apiKey}`,
+		`BB_API_ENCRYPTION_KEY=${encryptionKey}`,
+		`BB_JWT_SECRET=${jwtSecret}`,
+		`BB_COUCHDB_PASSWORD=${couchDbPassword}`,
+		`BB_REDIS_PASSWORD=${redisPassword}`,
+		`BB_WATCHTOWER_PASSWORD=${watchtowerPassword}`,
+		`BB_MINIO_ACCESS_KEY=${minioAccessKey}`,
+		`BB_MINIO_SECRET_KEY=${minioSecretKey}`,
+	];
+
+	return {
+		domains,
+		envs,
+	};
+}
--- a/apps/dokploy/templates/drawio/docker-compose.yml
+++ b/apps/dokploy/templates/drawio/docker-compose.yml
@@ -0,0 +1,62 @@
+version: '3'
+services:
+  plantuml-server:
+    image: plantuml/plantuml-server
+    ports:
+      - "8080"
+    networks:
+      - dokploy-network
+    volumes:
+      - fonts_volume:/usr/share/fonts/drawio
+  image-export:
+    image: jgraph/export-server
+    ports:
+      - "8000"
+    networks:
+      - dokploy-network
+    volumes:
+      - fonts_volume:/usr/share/fonts/drawio
+    environment:
+      - DRAWIO_BASE_URL=${DRAWIO_BASE_URL}
+  drawio:
+    image: jgraph/drawio:24.7.17
+    ports:
+      - "8080"
+    links:
+      - plantuml-server:plantuml-server
+      - image-export:image-export
+    depends_on:
+      - plantuml-server
+      - image-export
+    networks:
+      - dokploy-network
+    environment:
+      RAWIO_SELF_CONTAINED: 1
+      DRAWIO_USE_HTTP: 1
+      PLANTUML_URL: http://plantuml-server:8080/
+      EXPORT_URL: http://image-export:8000/
+      DRAWIO_BASE_URL: ${DRAWIO_BASE_URL}
+      DRAWIO_SERVER_URL: ${DRAWIO_SERVER_URL}
+      DRAWIO_CSP_HEADER: ${DRAWIO_CSP_HEADER}
+      DRAWIO_VIEWER_URL: ${DRAWIO_VIEWER_URL}
+      DRAWIO_LIGHTBOX_URL: ${DRAWIO_LIGHTBOX_URL}
+      DRAWIO_CONFIG: ${DRAWIO_CONFIG}
+      DRAWIO_GOOGLE_CLIENT_ID: ${DRAWIO_GOOGLE_CLIENT_ID}
+      DRAWIO_GOOGLE_APP_ID: ${DRAWIO_GOOGLE_APP_ID}
+      DRAWIO_GOOGLE_CLIENT_SECRET: ${DRAWIO_GOOGLE_CLIENT_SECRET}
+      DRAWIO_GOOGLE_VIEWER_CLIENT_ID: ${DRAWIO_GOOGLE_VIEWER_CLIENT_ID}
+      DRAWIO_GOOGLE_VIEWER_APP_ID: ${DRAWIO_GOOGLE_VIEWER_APP_ID}
+      DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET: ${DRAWIO_GOOGLE_VIEWER_CLIENT_SECRET}
+      DRAWIO_MSGRAPH_CLIENT_ID: ${DRAWIO_MSGRAPH_CLIENT_ID}
+      DRAWIO_MSGRAPH_CLIENT_SECRET: ${DRAWIO_MSGRAPH_CLIENT_SECRET}
+      DRAWIO_MSGRAPH_TENANT_ID: ${DRAWIO_MSGRAPH_TENANT_ID}
+      DRAWIO_GITLAB_ID: ${DRAWIO_GITLAB_ID}
+      DRAWIO_GITLAB_SECRET: ${DRAWIO_GITLAB_SECRET}
+      DRAWIO_GITLAB_URL: ${DRAWIO_GITLAB_URL}
+      DRAWIO_CLOUD_CONVERT_APIKEY: ${DRAWIO_CLOUD_CONVERT_APIKEY}
+networks:
+  dokploy-network:
+    external: true
+
+volumes:
+  fonts_volume:
--- a/apps/dokploy/templates/drawio/index.ts
+++ b/apps/dokploy/templates/drawio/index.ts
@@ -0,0 +1,31 @@
+import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generateBase64,
+	generateRandomDomain,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+	const mainDomain = generateRandomDomain(schema);
+	const secretKeyBase = generateBase64(64);
+
+	const domains: DomainSchema[] = [
+		{
+			host: mainDomain,
+			port: 8080,
+			serviceName: "drawio",
+		},
+	];
+
+	const envs = [
+		`DRAWIO_HOST=${mainDomain}`,
+		`DRAWIO_BASE_URL=https://${mainDomain}`,
+		`DRAWIO_SERVER_URL=https://${mainDomain}/`,
+	];
+
+	return {
+		envs,
+		domains,
+	};
+}
--- a/apps/dokploy/templates/kimai/docker-compose.yml
+++ b/apps/dokploy/templates/kimai/docker-compose.yml
@@ -0,0 +1,51 @@
+services:
+  app:
+    image: kimai/kimai2:apache-2.26.0
+    restart: unless-stopped
+    environment:
+      APP_ENV: prod
+      DATABASE_URL: mysql://kimai:${KI_MYSQL_PASSWORD:-kimai}@db/kimai
+      TRUSTED_PROXIES: localhost
+      APP_SECRET: ${KI_APP_SECRET}
+      MAILER_FROM: ${KI_MAILER_FROM:-admin@kimai.local}
+      MAILER_URL: ${KI_MAILER_URL:-null://null}
+      ADMINMAIL: ${KI_ADMINMAIL:-admin@kimai.local}
+      ADMINPASS: ${KI_ADMINPASS}
+    volumes:
+      - kimai-data:/opt/kimai/var
+    depends_on:
+      db:
+        condition: service_healthy
+    networks:
+      - dokploy-network
+  db:
+    image: mariadb:10.11
+    restart: unless-stopped
+    environment:
+      - MYSQL_DATABASE=kimai
+      - MYSQL_USER=kimai
+      - MYSQL_PASSWORD=${KI_MYSQL_PASSWORD}
+      - MYSQL_ROOT_PASSWORD=${KI_MYSQL_ROOT_PASSWORD}
+    volumes:
+      - mysql-data:/var/lib/mysql
+    command:
+      - --character-set-server=utf8mb4
+      - --collation-server=utf8mb4_unicode_ci
+      - --innodb-buffer-pool-size=256M
+      - --innodb-flush-log-at-trx-commit=2
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "kimai", "-p${KI_MYSQL_PASSWORD}"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 30s
+    networks:
+      - dokploy-network
+
+networks:
+  dokploy-network:
+    external: true
+
+volumes:
+  kimai-data:
+  mysql-data:
--- a/apps/dokploy/templates/kimai/index.ts
+++ b/apps/dokploy/templates/kimai/index.ts
@@ -0,0 +1,37 @@
+import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generatePassword,
+	generateRandomDomain,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+	const domain = generateRandomDomain(schema);
+	const domains: DomainSchema[] = [
+		{
+			host: domain,
+			port: 8001,
+			serviceName: "app",
+		},
+	];
+
+	const adminPassword = generatePassword(32);
+	const mysqlPassword = generatePassword(32);
+	const mysqlRootPassword = generatePassword(32);
+	const appSecret = generatePassword(32);
+
+	const envs = [
+		`KI_HOST=${domain}`,
+		"KI_ADMINMAIL=admin@kimai.local",
+		`KI_ADMINPASS=${adminPassword}`,
+		`KI_MYSQL_ROOT_PASSWORD=${mysqlRootPassword}`,
+		`KI_MYSQL_PASSWORD=${mysqlPassword}`,
+		`KI_APP_SECRET=${appSecret}`,
+	];
+
+	return {
+		envs,
+		domains,
+	};
+}
--- a/apps/dokploy/templates/templates.ts
+++ b/apps/dokploy/templates/templates.ts
@@ -107,6 +107,21 @@ export const templates: TemplateData[] = [
 		tags: ["database"],
 		load: () => import("./baserow/index").then((m) => m.generate),
 	},
+	{
+		id: "budibase",
+		name: "Budibase",
+		version: "3.2.25",
+		description:
+			"Budibase is an open-source low-code platform that saves engineers 100s of hours building forms, portals, and approval apps, securely.",
+		logo: "budibase.svg",
+		links: {
+			github: "https://github.com/Budibase/budibase",
+			website: "https://budibase.com/",
+			docs: "https://docs.budibase.com/docs/",
+		},
+		tags: ["database", "low-code", "nocode", "applications"],
+		load: () => import("./budibase/index").then((m) => m.generate),
+	},
 	{
 		id: "ghost",
 		name: "Ghost",
@@ -987,4 +1002,49 @@ export const templates: TemplateData[] = [
 		tags: ["event-driven", "applications"],
 		load: () => import("./triggerdotdev/index").then((m) => m.generate),
 	},
+	{
+		id: "browserless",
+		name: "Browserless",
+		version: "2.23.0",
+		description:
+			"Browserless allows remote clients to connect and execute headless work, all inside of docker. It supports the standard, unforked Puppeteer and Playwright libraries, as well offering REST-based APIs for common actions like data collection, PDF generation and more.",
+		logo: "browserless.svg",
+		links: {
+			github: "https://github.com/browserless/browserless",
+			website: "https://www.browserless.io/",
+			docs: "https://docs.browserless.io/",
+		},
+		tags: ["browser", "automation"],
+		load: () => import("./browserless/index").then((m) => m.generate),
+  },
+    {
+		id: "drawio",
+		name: "draw.io",
+		version: "24.7.17",
+		description:
+			"draw.io is a configurable diagramming/whiteboarding visualization application.",
+		logo: "drawio.svg",
+		links: {
+			github: "https://github.com/jgraph/drawio",
+			website: "https://draw.io/",
+			docs: "https://www.drawio.com/doc/",
+		},
+		tags: ["drawing", "diagrams"],
+		load: () => import("./drawio/index").then((m) => m.generate),
+  },
+  {
+		id: "kimai",
+		name: "Kimai",
+		version: "2.26.0",
+		description:
+			"Kimai is a web-based multi-user time-tracking application. Works great for everyone: freelancers, companies, organizations - everyone can track their times, generate reports, create invoices and do so much more.",
+		logo: "kimai.svg",
+		links: {
+			github: "https://github.com/kimai/kimai",
+			website: "https://www.kimai.org",
+			docs: "https://www.kimai.org/documentation",
+		},
+		tags: ["invoice", "business", "finance"],
+		load: () => import("./kimai/index").then((m) => m.generate),
+	},
 ];
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
 	"scripts": {
 		"dokploy:setup": "pnpm --filter=dokploy run setup",
 		"dokploy:dev": "pnpm --filter=dokploy run dev",
+		"dokploy:dev:turbopack": "pnpm --filter=dokploy run dev-turbopack",
 		"dokploy:build": "pnpm --filter=dokploy run build",
 		"dokploy:start": "pnpm --filter=dokploy run start",
 		"test": "pnpm --filter=dokploy run test",
--- a/packages/server/src/db/schema/application.ts
+++ b/packages/server/src/db/schema/application.ts
@@ -22,9 +22,10 @@ import { redirects } from "./redirects";
 import { registry } from "./registry";
 import { security } from "./security";
 import { server } from "./server";
-import { applicationStatus } from "./shared";
+import { applicationStatus, certificateType } from "./shared";
 import { sshKeys } from "./ssh-key";
 import { generateAppName } from "./utils";
+import { previewDeployments } from "./preview-deployments";

 export const sourceType = pgEnum("sourceType", [
 	"docker",
@@ -114,6 +115,19 @@ export const applications = pgTable("application", {
 		.unique(),
 	description: text("description"),
 	env: text("env"),
+	previewEnv: text("previewEnv"),
+	previewBuildArgs: text("previewBuildArgs"),
+	previewWildcard: text("previewWildcard"),
+	previewPort: integer("previewPort").default(3000),
+	previewHttps: boolean("previewHttps").notNull().default(false),
+	previewPath: text("previewPath").default("/"),
+	previewCertificateType: certificateType("certificateType")
+		.notNull()
+		.default("none"),
+	previewLimit: integer("previewLimit").default(3),
+	isPreviewDeploymentsActive: boolean("isPreviewDeploymentsActive").default(
+		false,
+	),
 	buildArgs: text("buildArgs"),
 	memoryReservation: integer("memoryReservation"),
 	memoryLimit: integer("memoryLimit"),
@@ -240,6 +254,7 @@ export const applicationsRelations = relations(
 			fields: [applications.serverId],
 			references: [server.serverId],
 		}),
+		previewDeployments: many(previewDeployments),
 	}),
 );

@@ -349,6 +364,7 @@ const createSchema = createInsertSchema(applications, {
 	subtitle: z.string().optional(),
 	dockerImage: z.string().optional(),
 	username: z.string().optional(),
+	isPreviewDeploymentsActive: z.boolean().optional(),
 	password: z.string().optional(),
 	registryUrl: z.string().optional(),
 	customGitSSHKeyId: z.string().optional(),
@@ -380,6 +396,14 @@ const createSchema = createInsertSchema(applications, {
 	modeSwarm: ServiceModeSwarmSchema.nullable(),
 	labelsSwarm: LabelsSwarmSchema.nullable(),
 	networkSwarm: NetworkSwarmSchema.nullable(),
+	previewPort: z.number().optional(),
+	previewEnv: z.string().optional(),
+	previewBuildArgs: z.string().optional(),
+	previewWildcard: z.string().optional(),
+	previewLimit: z.number().optional(),
+	previewHttps: z.boolean().optional(),
+	previewPath: z.string().optional(),
+	previewCertificateType: z.enum(["letsencrypt", "none"]).optional(),
 });

 export const apiCreateApplication = createSchema.pick({
--- a/packages/server/src/db/schema/deployment.ts
+++ b/packages/server/src/db/schema/deployment.ts
@@ -1,11 +1,18 @@
-import { relations } from "drizzle-orm";
-import { pgEnum, pgTable, text } from "drizzle-orm/pg-core";
+import { is, relations } from "drizzle-orm";
+import {
+	type AnyPgColumn,
+	boolean,
+	pgEnum,
+	pgTable,
+	text,
+} from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import { nanoid } from "nanoid";
 import { z } from "zod";
 import { applications } from "./application";
 import { compose } from "./compose";
 import { server } from "./server";
+import { previewDeployments } from "./preview-deployments";

 export const deploymentStatus = pgEnum("deploymentStatus", [
 	"running",
@@ -32,6 +39,11 @@ export const deployments = pgTable("deployment", {
 	serverId: text("serverId").references(() => server.serverId, {
 		onDelete: "cascade",
 	}),
+	isPreviewDeployment: boolean("isPreviewDeployment").default(false),
+	previewDeploymentId: text("previewDeploymentId").references(
+		(): AnyPgColumn => previewDeployments.previewDeploymentId,
+		{ onDelete: "cascade" },
+	),
 	createdAt: text("createdAt")
 		.notNull()
 		.$defaultFn(() => new Date().toISOString()),
@@ -50,6 +62,10 @@ export const deploymentsRelations = relations(deployments, ({ one }) => ({
 		fields: [deployments.serverId],
 		references: [server.serverId],
 	}),
+	previewDeployment: one(previewDeployments, {
+		fields: [deployments.previewDeploymentId],
+		references: [previewDeployments.previewDeploymentId],
+	}),
 }));

 const schema = createInsertSchema(deployments, {
@@ -59,6 +75,7 @@ const schema = createInsertSchema(deployments, {
 	applicationId: z.string(),
 	composeId: z.string(),
 	description: z.string().optional(),
+	previewDeploymentId: z.string(),
 });

 export const apiCreateDeployment = schema
@@ -68,11 +85,24 @@ export const apiCreateDeployment = schema
 		logPath: true,
 		applicationId: true,
 		description: true,
+		previewDeploymentId: true,
 	})
 	.extend({
 		applicationId: z.string().min(1),
 	});

+export const apiCreateDeploymentPreview = schema
+	.pick({
+		title: true,
+		status: true,
+		logPath: true,
+		description: true,
+		previewDeploymentId: true,
+	})
+	.extend({
+		previewDeploymentId: z.string().min(1),
+	});
+
 export const apiCreateDeploymentCompose = schema
 	.pick({
 		title: true,
--- a/packages/server/src/db/schema/domain.ts
+++ b/packages/server/src/db/schema/domain.ts
@@ -1,5 +1,6 @@
 import { relations } from "drizzle-orm";
 import {
+	type AnyPgColumn,
 	boolean,
 	integer,
 	pgEnum,
@@ -14,8 +15,13 @@ import { domain } from "../validations/domain";
 import { applications } from "./application";
 import { compose } from "./compose";
 import { certificateType } from "./shared";
+import { previewDeployments } from "./preview-deployments";

-export const domainType = pgEnum("domainType", ["compose", "application"]);
+export const domainType = pgEnum("domainType", [
+	"compose",
+	"application",
+	"preview",
+]);

 export const domains = pgTable("domain", {
 	domainId: text("domainId")
@@ -39,6 +45,10 @@ export const domains = pgTable("domain", {
 		() => applications.applicationId,
 		{ onDelete: "cascade" },
 	),
+	previewDeploymentId: text("previewDeploymentId").references(
+		(): AnyPgColumn => previewDeployments.previewDeploymentId,
+		{ onDelete: "cascade" },
+	),
 	certificateType: certificateType("certificateType").notNull().default("none"),
 });

@@ -51,6 +61,10 @@ export const domainsRelations = relations(domains, ({ one }) => ({
 		fields: [domains.composeId],
 		references: [compose.composeId],
 	}),
+	previewDeployment: one(previewDeployments, {
+		fields: [domains.previewDeploymentId],
+		references: [previewDeployments.previewDeploymentId],
+	}),
 }));

 const createSchema = createInsertSchema(domains, domain._def.schema.shape);
@@ -65,6 +79,7 @@ export const apiCreateDomain = createSchema.pick({
 	composeId: true,
 	serviceName: true,
 	domainType: true,
+	previewDeploymentId: true,
 });

 export const apiFindDomain = createSchema
--- a/packages/server/src/db/schema/index.ts
+++ b/packages/server/src/db/schema/index.ts
@@ -29,3 +29,4 @@ export * from "./github";
 export * from "./gitlab";
 export * from "./server";
 export * from "./utils";
+export * from "./preview-deployments";
--- a/packages/server/src/db/schema/preview-deployments.ts
+++ b/packages/server/src/db/schema/preview-deployments.ts
@@ -0,0 +1,74 @@
+import { relations } from "drizzle-orm";
+import { pgTable, text } from "drizzle-orm/pg-core";
+import { nanoid } from "nanoid";
+import { applications } from "./application";
+import { domains } from "./domain";
+import { deployments } from "./deployment";
+import { createInsertSchema } from "drizzle-zod";
+import { z } from "zod";
+import { generateAppName } from "./utils";
+import { applicationStatus } from "./shared";
+
+export const previewDeployments = pgTable("preview_deployments", {
+	previewDeploymentId: text("previewDeploymentId")
+		.notNull()
+		.primaryKey()
+		.$defaultFn(() => nanoid()),
+	branch: text("branch").notNull(),
+	pullRequestId: text("pullRequestId").notNull(),
+	pullRequestNumber: text("pullRequestNumber").notNull(),
+	pullRequestURL: text("pullRequestURL").notNull(),
+	pullRequestTitle: text("pullRequestTitle").notNull(),
+	pullRequestCommentId: text("pullRequestCommentId").notNull(),
+	previewStatus: applicationStatus("previewStatus").notNull().default("idle"),
+	appName: text("appName")
+		.notNull()
+		.$defaultFn(() => generateAppName("preview"))
+		.unique(),
+	applicationId: text("applicationId")
+		.notNull()
+		.references(() => applications.applicationId, {
+			onDelete: "cascade",
+		}),
+	domainId: text("domainId").references(() => domains.domainId, {
+		onDelete: "cascade",
+	}),
+	createdAt: text("createdAt")
+		.notNull()
+		.$defaultFn(() => new Date().toISOString()),
+	expiresAt: text("expiresAt"),
+});
+
+export const previewDeploymentsRelations = relations(
+	previewDeployments,
+	({ one, many }) => ({
+		deployments: many(deployments),
+		domain: one(domains, {
+			fields: [previewDeployments.domainId],
+			references: [domains.domainId],
+		}),
+		application: one(applications, {
+			fields: [previewDeployments.applicationId],
+			references: [applications.applicationId],
+		}),
+	}),
+);
+
+export const createSchema = createInsertSchema(previewDeployments, {
+	applicationId: z.string(),
+});
+
+export const apiCreatePreviewDeployment = createSchema
+	.pick({
+		applicationId: true,
+		domainId: true,
+		branch: true,
+		pullRequestId: true,
+		pullRequestNumber: true,
+		pullRequestURL: true,
+		pullRequestTitle: true,
+	})
+	.extend({
+		applicationId: z.string().min(1),
+		// deploymentId: z.string().min(1),
+	});
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -20,6 +20,7 @@ export * from "./services/mount";
 export * from "./services/certificate";
 export * from "./services/redirect";
 export * from "./services/security";
+export * from "./services/preview-deployment";
 export * from "./services/port";
 export * from "./services/redis";
 export * from "./services/compose";
--- a/packages/server/src/services/application.ts
+++ b/packages/server/src/services/application.ts
@@ -28,6 +28,7 @@ import {
 	getCustomGitCloneCommand,
 } from "@dokploy/server/utils/providers/git";
 import {
+	authGithub,
 	cloneGithubRepository,
 	getGithubCloneCommand,
 } from "@dokploy/server/utils/providers/github";
@@ -40,8 +41,23 @@ import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
 import { encodeBase64 } from "../utils/docker/utils";
 import { getDokployUrl } from "./admin";
-import { createDeployment, updateDeploymentStatus } from "./deployment";
+import {
+	createDeployment,
+	createDeploymentPreview,
+	updateDeploymentStatus,
+} from "./deployment";
 import { validUniqueServerAppName } from "./project";
+import {
+	findPreviewDeploymentById,
+	updatePreviewDeployment,
+} from "./preview-deployment";
+import {
+	createPreviewDeploymentComment,
+	getIssueComment,
+	issueCommentExists,
+	updateIssueComment,
+} from "./github";
+import { type Domain, getDomainHost } from "./domain";
 export type Application = typeof applications.$inferSelect;

 export const createApplication = async (
@@ -100,6 +116,7 @@ export const findApplicationById = async (applicationId: string) => {
 			github: true,
 			bitbucket: true,
 			server: true,
+			previewDeployments: true,
 		},
 	});
 	if (!application) {
@@ -168,7 +185,10 @@ export const deployApplication = async ({

 	try {
 		if (application.sourceType === "github") {
-			await cloneGithubRepository(application, deployment.logPath);
+			await cloneGithubRepository({
+				...application,
+				logPath: deployment.logPath,
+			});
 			await buildApplication(application, deployment.logPath);
 		} else if (application.sourceType === "gitlab") {
 			await cloneGitlabRepository(application, deployment.logPath);
@@ -276,7 +296,11 @@ export const deployRemoteApplication = async ({
 		if (application.serverId) {
 			let command = "set -e;";
 			if (application.sourceType === "github") {
-				command += await getGithubCloneCommand(application, deployment.logPath);
+				command += await getGithubCloneCommand({
+					...application,
+					serverId: application.serverId,
+					logPath: deployment.logPath,
+				});
 			} else if (application.sourceType === "gitlab") {
 				command += await getGitlabCloneCommand(application, deployment.logPath);
 			} else if (application.sourceType === "bitbucket") {
@@ -348,6 +372,225 @@ export const deployRemoteApplication = async ({
 	return true;
 };

+export const deployPreviewApplication = async ({
+	applicationId,
+	titleLog = "Preview Deployment",
+	descriptionLog = "",
+	previewDeploymentId,
+}: {
+	applicationId: string;
+	titleLog: string;
+	descriptionLog: string;
+	previewDeploymentId: string;
+}) => {
+	const application = await findApplicationById(applicationId);
+	const deployment = await createDeploymentPreview({
+		title: titleLog,
+		description: descriptionLog,
+		previewDeploymentId: previewDeploymentId,
+	});
+
+	const previewDeployment =
+		await findPreviewDeploymentById(previewDeploymentId);
+
+	await updatePreviewDeployment(previewDeploymentId, {
+		createdAt: new Date().toISOString(),
+	});
+
+	const previewDomain = getDomainHost(previewDeployment?.domain as Domain);
+	const issueParams = {
+		owner: application?.owner || "",
+		repository: application?.repository || "",
+		issue_number: previewDeployment.pullRequestNumber,
+		comment_id: Number.parseInt(previewDeployment.pullRequestCommentId),
+		githubId: application?.githubId || "",
+	};
+	try {
+		const commentExists = await issueCommentExists({
+			...issueParams,
+		});
+		if (!commentExists) {
+			const result = await createPreviewDeploymentComment({
+				...issueParams,
+				previewDomain,
+				appName: previewDeployment.appName,
+				githubId: application?.githubId || "",
+				previewDeploymentId,
+			});
+
+			if (!result) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "Pull request comment not found",
+				});
+			}
+
+			issueParams.comment_id = Number.parseInt(result?.pullRequestCommentId);
+		}
+		const buildingComment = getIssueComment(
+			application.name,
+			"running",
+			previewDomain,
+		);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${buildingComment}`,
+		});
+		application.appName = previewDeployment.appName;
+		application.env = application.previewEnv;
+		application.buildArgs = application.previewBuildArgs;
+
+		if (application.sourceType === "github") {
+			await cloneGithubRepository({
+				...application,
+				appName: previewDeployment.appName,
+				branch: previewDeployment.branch,
+				logPath: deployment.logPath,
+			});
+			await buildApplication(application, deployment.logPath);
+		}
+		// 4eef09efc46009187d668cf1c25f768d0bde4f91
+		const successComment = getIssueComment(
+			application.name,
+			"success",
+			previewDomain,
+		);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${successComment}`,
+		});
+		await updateDeploymentStatus(deployment.deploymentId, "done");
+		await updatePreviewDeployment(previewDeploymentId, {
+			previewStatus: "done",
+		});
+	} catch (error) {
+		const comment = getIssueComment(application.name, "error", previewDomain);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${comment}`,
+		});
+		await updateDeploymentStatus(deployment.deploymentId, "error");
+		await updatePreviewDeployment(previewDeploymentId, {
+			previewStatus: "error",
+		});
+		throw error;
+	}
+
+	return true;
+};
+
+export const deployRemotePreviewApplication = async ({
+	applicationId,
+	titleLog = "Preview Deployment",
+	descriptionLog = "",
+	previewDeploymentId,
+}: {
+	applicationId: string;
+	titleLog: string;
+	descriptionLog: string;
+	previewDeploymentId: string;
+}) => {
+	const application = await findApplicationById(applicationId);
+	const deployment = await createDeploymentPreview({
+		title: titleLog,
+		description: descriptionLog,
+		previewDeploymentId: previewDeploymentId,
+	});
+
+	const previewDeployment =
+		await findPreviewDeploymentById(previewDeploymentId);
+
+	await updatePreviewDeployment(previewDeploymentId, {
+		createdAt: new Date().toISOString(),
+	});
+
+	const previewDomain = getDomainHost(previewDeployment?.domain as Domain);
+	const issueParams = {
+		owner: application?.owner || "",
+		repository: application?.repository || "",
+		issue_number: previewDeployment.pullRequestNumber,
+		comment_id: Number.parseInt(previewDeployment.pullRequestCommentId),
+		githubId: application?.githubId || "",
+	};
+	try {
+		const commentExists = await issueCommentExists({
+			...issueParams,
+		});
+		if (!commentExists) {
+			const result = await createPreviewDeploymentComment({
+				...issueParams,
+				previewDomain,
+				appName: previewDeployment.appName,
+				githubId: application?.githubId || "",
+				previewDeploymentId,
+			});
+
+			if (!result) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "Pull request comment not found",
+				});
+			}
+
+			issueParams.comment_id = Number.parseInt(result?.pullRequestCommentId);
+		}
+		const buildingComment = getIssueComment(
+			application.name,
+			"running",
+			previewDomain,
+		);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${buildingComment}`,
+		});
+		application.appName = previewDeployment.appName;
+		application.env = application.previewEnv;
+		application.buildArgs = application.previewBuildArgs;
+
+		if (application.serverId) {
+			let command = "set -e;";
+			if (application.sourceType === "github") {
+				command += await getGithubCloneCommand({
+					...application,
+					serverId: application.serverId,
+					logPath: deployment.logPath,
+				});
+			}
+
+			command += getBuildCommand(application, deployment.logPath);
+			await execAsyncRemote(application.serverId, command);
+			await mechanizeDockerContainer(application);
+		}
+
+		const successComment = getIssueComment(
+			application.name,
+			"success",
+			previewDomain,
+		);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${successComment}`,
+		});
+		await updateDeploymentStatus(deployment.deploymentId, "done");
+		await updatePreviewDeployment(previewDeploymentId, {
+			previewStatus: "done",
+		});
+	} catch (error) {
+		const comment = getIssueComment(application.name, "error", previewDomain);
+		await updateIssueComment({
+			...issueParams,
+			body: `### Dokploy Preview Deployment\n\n${comment}`,
+		});
+		await updateDeploymentStatus(deployment.deploymentId, "error");
+		await updatePreviewDeployment(previewDeploymentId, {
+			previewStatus: "error",
+		});
+		throw error;
+	}
+
+	return true;
+};
+
 export const rebuildRemoteApplication = async ({
 	applicationId,
 	titleLog = "Rebuild deployment",
--- a/packages/server/src/services/compose.ts
+++ b/packages/server/src/services/compose.ts
@@ -214,7 +214,11 @@ export const deployCompose = async ({

 	try {
 		if (compose.sourceType === "github") {
-			await cloneGithubRepository(compose, deployment.logPath, true);
+			await cloneGithubRepository({
+				...compose,
+				logPath: deployment.logPath,
+				type: "compose",
+			});
 		} else if (compose.sourceType === "gitlab") {
 			await cloneGitlabRepository(compose, deployment.logPath, true);
 		} else if (compose.sourceType === "bitbucket") {
@@ -314,11 +318,12 @@ export const deployRemoteCompose = async ({
 			let command = "set -e;";

 			if (compose.sourceType === "github") {
-				command += await getGithubCloneCommand(
-					compose,
-					deployment.logPath,
-					true,
-				);
+				command += await getGithubCloneCommand({
+					...compose,
+					logPath: deployment.logPath,
+					type: "compose",
+					serverId: compose.serverId,
+				});
 			} else if (compose.sourceType === "gitlab") {
 				command += await getGitlabCloneCommand(
 					compose,
--- a/packages/server/src/services/deployment.ts
+++ b/packages/server/src/services/deployment.ts
@@ -5,13 +5,14 @@ import { db } from "@dokploy/server/db";
 import {
 	type apiCreateDeployment,
 	type apiCreateDeploymentCompose,
+	type apiCreateDeploymentPreview,
 	type apiCreateDeploymentServer,
 	deployments,
 } from "@dokploy/server/db/schema";
 import { removeDirectoryIfExistsContent } from "@dokploy/server/utils/filesystem/directory";
 import { TRPCError } from "@trpc/server";
 import { format } from "date-fns";
-import { desc, eq } from "drizzle-orm";
+import { and, desc, eq, isNull } from "drizzle-orm";
 import {
 	type Application,
 	findApplicationById,
@@ -21,6 +22,11 @@ import { type Compose, findComposeById, updateCompose } from "./compose";
 import { type Server, findServerById } from "./server";

 import { execAsyncRemote } from "@dokploy/server/utils/process/execAsync";
+import {
+	findPreviewDeploymentById,
+	type PreviewDeployment,
+	updatePreviewDeployment,
+} from "./preview-deployment";

 export type Deployment = typeof deployments.$inferSelect;

@@ -101,6 +107,74 @@ export const createDeployment = async (
 	}
 };

+export const createDeploymentPreview = async (
+	deployment: Omit<
+		typeof apiCreateDeploymentPreview._type,
+		"deploymentId" | "createdAt" | "status" | "logPath"
+	>,
+) => {
+	const previewDeployment = await findPreviewDeploymentById(
+		deployment.previewDeploymentId,
+	);
+	try {
+		await removeLastTenPreviewDeploymenById(
+			deployment.previewDeploymentId,
+			previewDeployment?.application?.serverId,
+		);
+
+		const appName = `${previewDeployment.appName}`;
+		const { LOGS_PATH } = paths(!!previewDeployment?.application?.serverId);
+		const formattedDateTime = format(new Date(), "yyyy-MM-dd:HH:mm:ss");
+		const fileName = `${appName}-${formattedDateTime}.log`;
+		const logFilePath = path.join(LOGS_PATH, appName, fileName);
+
+		if (previewDeployment?.application?.serverId) {
+			const server = await findServerById(
+				previewDeployment?.application?.serverId,
+			);
+
+			const command = `
+				mkdir -p ${LOGS_PATH}/${appName};
+            	echo "Initializing deployment" >> ${logFilePath};
+			`;
+
+			await execAsyncRemote(server.serverId, command);
+		} else {
+			await fsPromises.mkdir(path.join(LOGS_PATH, appName), {
+				recursive: true,
+			});
+			await fsPromises.writeFile(logFilePath, "Initializing deployment");
+		}
+
+		const deploymentCreate = await db
+			.insert(deployments)
+			.values({
+				title: deployment.title || "Deployment",
+				status: "running",
+				logPath: logFilePath,
+				description: deployment.description || "",
+				previewDeploymentId: deployment.previewDeploymentId,
+			})
+			.returning();
+		if (deploymentCreate.length === 0 || !deploymentCreate[0]) {
+			throw new TRPCError({
+				code: "BAD_REQUEST",
+				message: "Error to create the deployment",
+			});
+		}
+		return deploymentCreate[0];
+	} catch (error) {
+		await updatePreviewDeployment(deployment.previewDeploymentId, {
+			previewStatus: "error",
+		});
+		console.log(error);
+		throw new TRPCError({
+			code: "BAD_REQUEST",
+			message: "Error to create the deployment",
+		});
+	}
+};
+
 export const createDeploymentCompose = async (
 	deployment: Omit<
 		typeof apiCreateDeploymentCompose._type,
@@ -257,6 +331,41 @@ const removeLastTenComposeDeployments = async (
 	}
 };

+export const removeLastTenPreviewDeploymenById = async (
+	previewDeploymentId: string,
+	serverId: string | null,
+) => {
+	const deploymentList = await db.query.deployments.findMany({
+		where: eq(deployments.previewDeploymentId, previewDeploymentId),
+		orderBy: desc(deployments.createdAt),
+	});
+
+	if (deploymentList.length > 10) {
+		const deploymentsToDelete = deploymentList.slice(10);
+		if (serverId) {
+			let command = "";
+			for (const oldDeployment of deploymentsToDelete) {
+				const logPath = path.join(oldDeployment.logPath);
+
+				command += `
+				rm -rf ${logPath};
+				`;
+				await removeDeployment(oldDeployment.deploymentId);
+			}
+
+			await execAsyncRemote(serverId, command);
+		} else {
+			for (const oldDeployment of deploymentsToDelete) {
+				const logPath = path.join(oldDeployment.logPath);
+				if (existsSync(logPath)) {
+					await fsPromises.unlink(logPath);
+				}
+				await removeDeployment(oldDeployment.deploymentId);
+			}
+		}
+	}
+};
+
 export const removeDeployments = async (application: Application) => {
 	const { appName, applicationId } = application;
 	const { LOGS_PATH } = paths(!!application.serverId);
@@ -269,6 +378,30 @@ export const removeDeployments = async (application: Application) => {
 	await removeDeploymentsByApplicationId(applicationId);
 };

+export const removeDeploymentsByPreviewDeploymentId = async (
+	previewDeployment: PreviewDeployment,
+	serverId: string | null,
+) => {
+	const { appName } = previewDeployment;
+	const { LOGS_PATH } = paths(!!serverId);
+	const logsPath = path.join(LOGS_PATH, appName);
+	if (serverId) {
+		await execAsyncRemote(serverId, `rm -rf ${logsPath}`);
+	} else {
+		await removeDirectoryIfExistsContent(logsPath);
+	}
+
+	await db
+		.delete(deployments)
+		.where(
+			eq(
+				deployments.previewDeploymentId,
+				previewDeployment.previewDeploymentId,
+			),
+		)
+		.returning();
+};
+
 export const removeDeploymentsByComposeId = async (compose: Compose) => {
 	const { appName } = compose;
 	const { LOGS_PATH } = paths(!!compose.serverId);
--- a/packages/server/src/services/docker.ts
+++ b/packages/server/src/services/docker.ts
@@ -110,7 +110,7 @@ export const getContainersByAppNameMatch = async (
 		const command =
 			appType === "docker-compose"
 				? `${cmd} --filter='label=com.docker.compose.project=${appName}'`
-				: `${cmd} | grep ${appName}`;
+				: `${cmd} | grep '^.*Name: ${appName}'`;
 		if (serverId) {
 			const { stdout, stderr } = await execAsyncRemote(serverId, command);

--- a/packages/server/src/services/domain.ts
+++ b/packages/server/src/services/domain.ts
@@ -134,3 +134,7 @@ export const removeDomainById = async (domainId: string) => {

 	return result[0];
 };
+
+export const getDomainHost = (domain: Domain) => {
+	return `${domain.https ? "https" : "http"}://${domain.host}`;
+};
--- a/packages/server/src/services/github.ts
+++ b/packages/server/src/services/github.ts
@@ -6,6 +6,8 @@ import {
 } from "@dokploy/server/db/schema";
 import { TRPCError } from "@trpc/server";
 import { eq } from "drizzle-orm";
+import { authGithub } from "../utils/providers/github";
+import { updatePreviewDeployment } from "./preview-deployment";

 export type Github = typeof github.$inferSelect;
 export const createGithub = async (
@@ -72,3 +74,119 @@ export const updateGithub = async (
 		.returning()
 		.then((response) => response[0]);
 };
+
+export const getIssueComment = (
+	appName: string,
+	status: "success" | "error" | "running" | "initializing",
+	previewDomain: string,
+) => {
+	let statusMessage = "";
+	if (status === "success") {
+		statusMessage = "✅ Done";
+	} else if (status === "error") {
+		statusMessage = "❌ Failed";
+	} else if (status === "initializing") {
+		statusMessage = "🔄 Building";
+	} else {
+		statusMessage = "🔄 Building";
+	}
+	const finished = `
+| Name       | Status       | Preview                             | Updated (UTC)         |
+|------------|--------------|-------------------------------------|-----------------------|
+| ${appName}  | ${statusMessage} | [Preview URL](${previewDomain}) | ${new Date().toISOString()} |
+`;
+
+	return finished;
+};
+interface CommentExists {
+	owner: string;
+	repository: string;
+	comment_id: number;
+	githubId: string;
+}
+export const issueCommentExists = async ({
+	owner,
+	repository,
+	comment_id,
+	githubId,
+}: CommentExists) => {
+	const github = await findGithubById(githubId);
+	const octokit = authGithub(github);
+	try {
+		await octokit.rest.issues.getComment({
+			owner: owner || "",
+			repo: repository || "",
+			comment_id: comment_id,
+		});
+		return true;
+	} catch (error) {
+		return false;
+	}
+};
+interface Comment {
+	owner: string;
+	repository: string;
+	issue_number: string;
+	body: string;
+	comment_id: number;
+	githubId: string;
+}
+export const updateIssueComment = async ({
+	owner,
+	repository,
+	issue_number,
+	body,
+	comment_id,
+	githubId,
+}: Comment) => {
+	const github = await findGithubById(githubId);
+	const octokit = authGithub(github);
+
+	await octokit.rest.issues.updateComment({
+		owner: owner || "",
+		repo: repository || "",
+		issue_number: issue_number,
+		body,
+		comment_id: comment_id,
+	});
+};
+
+interface CommentCreate {
+	appName: string;
+	owner: string;
+	repository: string;
+	issue_number: string;
+	previewDomain: string;
+	githubId: string;
+	previewDeploymentId: string;
+}
+
+export const createPreviewDeploymentComment = async ({
+	owner,
+	repository,
+	issue_number,
+	previewDomain,
+	appName,
+	githubId,
+	previewDeploymentId,
+}: CommentCreate) => {
+	const github = await findGithubById(githubId);
+	const octokit = authGithub(github);
+
+	const runningComment = getIssueComment(
+		appName,
+		"initializing",
+		previewDomain,
+	);
+
+	const issue = await octokit.rest.issues.createComment({
+		owner: owner || "",
+		repo: repository || "",
+		issue_number: Number.parseInt(issue_number),
+		body: `### Dokploy Preview Deployment\n\n${runningComment}`,
+	});
+
+	return await updatePreviewDeployment(previewDeploymentId, {
+		pullRequestCommentId: `${issue.data.id}`,
+	}).then((response) => response[0]);
+};
--- a/packages/server/src/services/preview-deployment.ts
+++ b/packages/server/src/services/preview-deployment.ts
@@ -0,0 +1,283 @@
+import { db } from "@dokploy/server/db";
+import {
+	type apiCreatePreviewDeployment,
+	deployments,
+	previewDeployments,
+} from "@dokploy/server/db/schema";
+import { TRPCError } from "@trpc/server";
+import { and, desc, eq } from "drizzle-orm";
+import { slugify } from "../setup/server-setup";
+import { findApplicationById } from "./application";
+import { createDomain } from "./domain";
+import { generatePassword, generateRandomDomain } from "../templates/utils";
+import { manageDomain } from "../utils/traefik/domain";
+import {
+	removeDeployments,
+	removeDeploymentsByPreviewDeploymentId,
+} from "./deployment";
+import { removeDirectoryCode } from "../utils/filesystem/directory";
+import { removeTraefikConfig } from "../utils/traefik/application";
+import { removeService } from "../utils/docker/utils";
+import { authGithub } from "../utils/providers/github";
+import { getIssueComment, type Github } from "./github";
+import { findAdminById } from "./admin";
+
+export type PreviewDeployment = typeof previewDeployments.$inferSelect;
+
+export const findPreviewDeploymentById = async (
+	previewDeploymentId: string,
+) => {
+	const application = await db.query.previewDeployments.findFirst({
+		where: eq(previewDeployments.previewDeploymentId, previewDeploymentId),
+		with: {
+			domain: true,
+			application: {
+				with: {
+					server: true,
+					project: true,
+				},
+			},
+		},
+	});
+	if (!application) {
+		throw new TRPCError({
+			code: "NOT_FOUND",
+			message: "Preview Deployment not found",
+		});
+	}
+	return application;
+};
+
+export const findApplicationByPreview = async (applicationId: string) => {
+	const application = await db.query.applications.findFirst({
+		with: {
+			previewDeployments: {
+				where: eq(previewDeployments.applicationId, applicationId),
+			},
+			project: true,
+			domains: true,
+			deployments: true,
+			mounts: true,
+			redirects: true,
+			security: true,
+			ports: true,
+			registry: true,
+			gitlab: true,
+			github: true,
+			bitbucket: true,
+			server: true,
+		},
+	});
+
+	if (!application) {
+		throw new TRPCError({
+			code: "NOT_FOUND",
+			message: "Applicationnot found",
+		});
+	}
+	return application;
+};
+
+export const removePreviewDeployment = async (previewDeploymentId: string) => {
+	try {
+		const application = await findApplicationByPreview(previewDeploymentId);
+		const previewDeployment =
+			await findPreviewDeploymentById(previewDeploymentId);
+
+		const deployment = await db
+			.delete(previewDeployments)
+			.where(eq(previewDeployments.previewDeploymentId, previewDeploymentId))
+			.returning();
+
+		application.appName = previewDeployment.appName;
+		const cleanupOperations = [
+			async () =>
+				await removeDeploymentsByPreviewDeploymentId(
+					previewDeployment,
+					application.serverId,
+				),
+			async () =>
+				await removeDirectoryCode(application.appName, application.serverId),
+			async () =>
+				await removeTraefikConfig(application.appName, application.serverId),
+			async () =>
+				await removeService(application?.appName, application.serverId),
+		];
+		for (const operation of cleanupOperations) {
+			try {
+				await operation();
+			} catch (error) {}
+		}
+		return deployment[0];
+	} catch (error) {
+		throw new TRPCError({
+			code: "BAD_REQUEST",
+			message: "Error to delete this preview deployment",
+		});
+	}
+};
+// testing-tesoitnmg-ddq0ul-preview-ihl44o
+export const updatePreviewDeployment = async (
+	previewDeploymentId: string,
+	previewDeploymentData: Partial<PreviewDeployment>,
+) => {
+	const application = await db
+		.update(previewDeployments)
+		.set({
+			...previewDeploymentData,
+		})
+		.where(eq(previewDeployments.previewDeploymentId, previewDeploymentId))
+		.returning();
+
+	return application;
+};
+
+export const findPreviewDeploymentsByApplicationId = async (
+	applicationId: string,
+) => {
+	const deploymentsList = await db.query.previewDeployments.findMany({
+		where: eq(previewDeployments.applicationId, applicationId),
+		orderBy: desc(previewDeployments.createdAt),
+		with: {
+			deployments: {
+				orderBy: desc(deployments.createdAt),
+			},
+			domain: true,
+		},
+	});
+	return deploymentsList;
+};
+
+export const createPreviewDeployment = async (
+	schema: typeof apiCreatePreviewDeployment._type,
+) => {
+	const application = await findApplicationById(schema.applicationId);
+	const appName = `preview-${application.appName}-${generatePassword(6)}`;
+
+	const generateDomain = await generateWildcardDomain(
+		application.previewWildcard || "*.traefik.me",
+		appName,
+		application.server?.ipAddress || "",
+		application.project.adminId,
+	);
+
+	const octokit = authGithub(application?.github as Github);
+
+	const runningComment = getIssueComment(
+		application.name,
+		"initializing",
+		generateDomain,
+	);
+
+	const issue = await octokit.rest.issues.createComment({
+		owner: application?.owner || "",
+		repo: application?.repository || "",
+		issue_number: Number.parseInt(schema.pullRequestNumber),
+		body: `### Dokploy Preview Deployment\n\n${runningComment}`,
+	});
+
+	const previewDeployment = await db
+		.insert(previewDeployments)
+		.values({
+			...schema,
+			appName: appName,
+			pullRequestCommentId: `${issue.data.id}`,
+		})
+		.returning()
+		.then((value) => value[0]);
+
+	if (!previewDeployment) {
+		throw new TRPCError({
+			code: "BAD_REQUEST",
+			message: "Error to create the preview deployment",
+		});
+	}
+
+	const newDomain = await createDomain({
+		host: generateDomain,
+		path: application.previewPath,
+		port: application.previewPort,
+		https: application.previewHttps,
+		certificateType: application.previewCertificateType,
+		domainType: "preview",
+		previewDeploymentId: previewDeployment.previewDeploymentId,
+	});
+
+	application.appName = appName;
+
+	await manageDomain(application, newDomain);
+
+	await db
+		.update(previewDeployments)
+		.set({
+			domainId: newDomain.domainId,
+		})
+		.where(
+			eq(
+				previewDeployments.previewDeploymentId,
+				previewDeployment.previewDeploymentId,
+			),
+		);
+
+	return previewDeployment;
+};
+
+export const findPreviewDeploymentsByPullRequestId = async (
+	pullRequestId: string,
+) => {
+	const previewDeploymentResult = await db.query.previewDeployments.findMany({
+		where: eq(previewDeployments.pullRequestId, pullRequestId),
+	});
+
+	return previewDeploymentResult;
+};
+
+export const findPreviewDeploymentByApplicationId = async (
+	applicationId: string,
+	pullRequestId: string,
+) => {
+	const previewDeploymentResult = await db.query.previewDeployments.findFirst({
+		where: and(
+			eq(previewDeployments.applicationId, applicationId),
+			eq(previewDeployments.pullRequestId, pullRequestId),
+		),
+	});
+
+	return previewDeploymentResult;
+};
+
+const generateWildcardDomain = async (
+	baseDomain: string,
+	appName: string,
+	serverIp: string,
+	adminId: string,
+): Promise<string> => {
+	if (!baseDomain.startsWith("*.")) {
+		throw new Error('The base domain must start with "*."');
+	}
+	const hash = `${appName}`;
+	if (baseDomain.includes("traefik.me")) {
+		let ip = "";
+
+		if (process.env.NODE_ENV === "development") {
+			ip = "127.0.0.1";
+		}
+
+		if (serverIp) {
+			ip = serverIp;
+		}
+
+		if (!ip) {
+			const admin = await findAdminById(adminId);
+			ip = admin?.serverIp || "";
+		}
+
+		const slugIp = ip.replaceAll(".", "-");
+		return baseDomain.replace(
+			"*",
+			`${hash}${slugIp === "" ? "" : `-${slugIp}`}`,
+		);
+	}
+
+	return baseDomain.replace("*", hash);
+};
--- a/packages/server/src/utils/builders/index.ts
+++ b/packages/server/src/utils/builders/index.ts
@@ -17,6 +17,7 @@ import { buildHeroku, getHerokuCommand } from "./heroku";
 import { buildNixpacks, getNixpacksCommand } from "./nixpacks";
 import { buildPaketo, getPaketoCommand } from "./paketo";
 import { buildStatic, getStaticCommand } from "./static";
+import { nanoid } from "nanoid";

 // NIXPACKS codeDirectory = where is the path of the code directory
 // HEROKU codeDirectory = where is the path of the code directory
@@ -33,6 +34,7 @@ export type ApplicationNested = InferResultType<
 		project: true;
 	}
 >;
+
 export const buildApplication = async (
 	application: ApplicationNested,
 	logPath: string,
--- a/packages/server/src/utils/builders/nixpacks.ts
+++ b/packages/server/src/utils/builders/nixpacks.ts
@@ -14,7 +14,7 @@ export const buildNixpacks = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName, publishDirectory, serverId } = application;
+	const { env, appName, publishDirectory } = application;

 	const buildAppDirectory = getBuildAppDirectory(application);
 	const buildContainerId = `${appName}-${nanoid(10)}`;
--- a/packages/server/src/utils/providers/github.ts
+++ b/packages/server/src/utils/providers/github.ts
@@ -74,11 +74,22 @@ export type ApplicationWithGithub = InferResultType<
 >;

 export type ComposeWithGithub = InferResultType<"compose", { github: true }>;
-export const cloneGithubRepository = async (
-	entity: ApplicationWithGithub | ComposeWithGithub,
-	logPath: string,
-	isCompose = false,
-) => {
+
+interface CloneGithubRepository {
+	appName: string;
+	owner: string | null;
+	branch: string | null;
+	githubId: string | null;
+	repository: string | null;
+	logPath: string;
+	type?: "application" | "compose";
+}
+export const cloneGithubRepository = async ({
+	logPath,
+	type = "application",
+	...entity
+}: CloneGithubRepository) => {
+	const isCompose = type === "compose";
 	const { APPLICATIONS_PATH, COMPOSE_PATH } = paths();
 	const writeStream = createWriteStream(logPath, { flags: "a" });
 	const { appName, repository, owner, branch, githubId } = entity;
@@ -145,13 +156,13 @@ export const cloneGithubRepository = async (
 	}
 };

-export const getGithubCloneCommand = async (
-	entity: ApplicationWithGithub | ComposeWithGithub,
-	logPath: string,
-	isCompose = false,
-) => {
+export const getGithubCloneCommand = async ({
+	logPath,
+	type = "application",
+	...entity
+}: CloneGithubRepository & { serverId: string }) => {
 	const { appName, repository, owner, branch, githubId, serverId } = entity;
-
+	const isCompose = type === "compose";
 	if (!serverId) {
 		throw new TRPCError({
 			code: "NOT_FOUND",
				`@@ -0,0 +1 @@`
				<svg cursor="default" enable-background="new" height="512" viewBox="0 0 440 440" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><radialGradient id="a" cx="611" cy="41.266644" gradientTransform="matrix(1.1673343 0 0 1.4196623 -102.24121 -19.722475)" gradientUnits="userSpaceOnUse" r="160.5"><stop offset="0" stop-color="#01fd00"/><stop offset="1" stop-color="#009d39"/></radialGradient><radialGradient id="b" cx="873.78265" cy="-16.37981" gradientTransform="matrix(1.9295131 -1.1140049 1.1550268 2.0005649 -1087.6858 1104.8947)" gradientUnits="userSpaceOnUse" r="55.747124"><stop offset="0" stop-color="#f9f9f9"/><stop offset="1" stop-color="#fff"/></radialGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="611.14288" x2="610.57141" y1="234.57143" y2="-110.91601"><stop offset="0" stop-color="#f2f2f2"/><stop offset="1" stop-color="#f2f2f2"/></linearGradient><g transform="translate(-390.56693 181.56689)"><g><path d="m391.020508-182.838852h439.95895v439.95895h-439.95895z" fill="#fff" stroke="#58dd58" stroke-linejoin="round" stroke-width=".040996" visibility="hidden"/><circle cx="611" cy="38" fill="url(#c)" r="187.776825"/><circle cx="611" cy="38" fill="url(#a)" r="166.285645" stroke="#fff" stroke-linejoin="round" stroke-width="3"/><path d="m571.156433 108.308197 110-63.999998-110-64z" fill="url(#b)" fill-rule="evenodd"/></g><g fill="#c7efc4" fill-rule="evenodd"><rect height="32" opacity=".5" ry="7" transform="matrix(-.83616052 -.5484848 .5484848 -.83616052 0 0)" width="14" x="-542.46875" y="419.410309"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.45720822 -.88935968 .88935968 -.45720822 0 0)" width="14" x="-320.158203" y="642.978027"/><rect height="41" opacity=".5" ry="9" transform="rotate(-90)" width="18" x="-48.536366" y="718.754395"/><rect height="32" opacity=".5" ry="7" transform="matrix(.47159375 -.88181593 .88181593 .47159375 0 0)" width="14" x="244.405457" y="673.798523"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.8503618 .52619845 -.52619845 -.8503618 0 0)" width="14" x="-505.884949" y="-503.867859"/><rect height="41" opacity=".5" ry="9" transform="scale(-1)" width="18" x="-620.297424" y="-187.942719"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.84033379 -.54206929 .54206929 -.84033379 0 0)" width="14" x="-539.16571" y="148.581909"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.45720822 -.88935968 .88935968 -.45720822 0 0)" width="14" x="-319.728088" y="374.804901"/><rect height="41" opacity=".5" ry="9" transform="rotate(-90)" width="18" x="-48.536366" y="460.964569"/><rect height="32" opacity=".5" ry="7" transform="matrix(.47159375 -.88181593 .88181593 .47159375 0 0)" width="14" x="250.841736" y="406.195648"/><rect height="32" opacity=".5" ry="7" transform="matrix(-.849305 .52790248 -.52790248 -.849305 0 0)" width="14" x="-505.957611" y="-236.959518"/><g transform="scale(-1)"><rect height="41" opacity=".5" ry="9" width="18" x="-633.02533" y="69.120789"/><rect height="41" opacity=".5" ry="9" width="18" x="-606.761353" y="69.120789"/></g></g></g></svg>