Merge pull request #1617 from Dokploy/fix/cover-edge-cases-processor-template

fix(templates): add optional chaining to prevent errors when accessin…

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

@@ -307,7 +307,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 							>
 								{templates?.map((template) => (
 									<div
-										key={template.id}
+										key={template?.id}
 										className={cn(
 											"flex flex-col border rounded-lg overflow-hidden relative",
 											viewMode === "icon" && "h-[200px]",
@@ -315,7 +315,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										)}
 									>
 										<Badge className="absolute top-2 right-2" variant="blue">
-											{template.version}
+											{template?.version}
 										</Badge>
 										<div
 											className={cn(
@@ -324,21 +324,21 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 											)}
 										>
 											<img
-												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
 												className={cn(
 													"object-contain",
 													viewMode === "detailed" ? "size-24" : "size-16",
 												)}
-												alt={template.name}
+												alt={template?.name}
 											/>
 											<div className="flex flex-col items-center gap-2">
 												<span className="text-sm font-medium line-clamp-1">
-													{template.name}
+													{template?.name}
 												</span>
 												{viewMode === "detailed" &&
-													template.tags.length > 0 && (
+													template?.tags?.length > 0 && (
 														<div className="flex flex-wrap justify-center gap-1.5">
-															{template.tags.map((tag) => (
+															{template?.tags?.map((tag) => (
 																<Badge
 																	key={tag}
 																	variant="green"
@@ -356,7 +356,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										{viewMode === "detailed" && (
 											<ScrollArea className="flex-1 p-6">
 												<div className="text-sm text-muted-foreground">
-													{template.description}
+													{template?.description}
 												</div>
 											</ScrollArea>
 										)}
@@ -372,25 +372,27 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										>
 											{viewMode === "detailed" && (
 												<div className="flex gap-2">
-													<Link
+													{template?.links?.github && (
-														href={template.links.github}
-														target="_blank"
-														className="text-muted-foreground hover:text-foreground transition-colors"
-													>
-														<GithubIcon className="size-5" />
-													</Link>
-													{template.links.website && (
 														<Link
-															href={template.links.website}
+															href={template?.links?.github}
+															target="_blank"
+															className="text-muted-foreground hover:text-foreground transition-colors"
+														>
+															<GithubIcon className="size-5" />
+														</Link>
+													)}
+													{template?.links?.website && (
+														<Link
+															href={template?.links?.website}
 															target="_blank"
 															className="text-muted-foreground hover:text-foreground transition-colors"
 														>
 															<Globe className="size-5" />
 														</Link>
 													)}
-													{template.links.docs && (
+													{template?.links?.docs && (
 														<Link
-															href={template.links.docs}
+															href={template?.links?.docs}
 															target="_blank"
 															className="text-muted-foreground hover:text-foreground transition-colors"
 														>
@@ -419,7 +421,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 														</AlertDialogTitle>
 														<AlertDialogDescription>
 															This will create an application from the{" "}
-															{template.name} template and add it to your
+															{template?.name} template and add it to your
 															project.
 														</AlertDialogDescription>
 

packages/server/src/templates/processors.ts

@@ -1,3 +1,4 @@
+import { faker } from "@faker-js/faker";
 import type { Schema } from "./index";
 import {
 	generateBase64,
@@ -70,7 +71,7 @@ function processValue(
 	schema: Schema,
 ): string {
 	// First replace utility functions
-	let processedValue = value.replace(/\${([^}]+)}/g, (match, varName) => {
+	let processedValue = value?.replace(/\${([^}]+)}/g, (match, varName) => {
 		// Handle utility functions
 		if (varName === "domain") {
 			return generateRandomDomain(schema);
@@ -117,6 +118,14 @@ function processValue(
 			return generateJwt(length);
 		}
 
+		if (varName === "username") {
+			return faker.internet.userName().toLowerCase();
+		}
+
+		if (varName === "email") {
+			return faker.internet.email().toLowerCase();
+		}
+
 		// If not a utility function, try to get from variables
 		return variables[varName] || match;
 	});
@@ -177,7 +186,14 @@ export function processDomains(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["domains"] {
-	if (!template?.config?.domains) return [];
+	if (
+		!template?.config?.domains ||
+		template.config.domains.length === 0 ||
+		template.config.domains.every((domain) => !domain.serviceName)
+	) {
+		return [];
+	}
+
 	return template?.config?.domains?.map((domain: DomainConfig) => ({
 		...domain,
 		host: domain.host
@@ -194,7 +210,9 @@ export function processEnvVars(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["envs"] {
-	if (!template?.config?.env) return [];
+	if (!template?.config?.env || Object.keys(template.config.env).length === 0) {
+		return [];
+	}
 
 	// Handle array of env vars
 	if (Array.isArray(template.config.env)) {
@@ -233,7 +251,13 @@ export function processMounts(
 	variables: Record<string, string>,
 	schema: Schema,
 ): Template["mounts"] {
-	if (!template?.config?.mounts) return [];
+	if (
+		!template?.config?.mounts ||
+		template.config.mounts.length === 0 ||
+		template.config.mounts.every((mount) => !mount.filePath && !mount.content)
+	) {
+		return [];
+	}
 
 	return template?.config?.mounts?.map((mount: MountConfig) => ({
 		filePath: processValue(mount.filePath, variables, schema),