Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Siumauricio merged 2 commits into from
Apr 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9de050
fix(templates): add optional chaining to prevent errors when accessin…
Siumauricio Apr 3, 2025
9a839de
feat(templates): add username and email generation using faker
Siumauricio Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions apps/dokploy/components/dashboard/project/add-template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,15 +307,15 @@ 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]",
viewMode === "detailed" && "h-[400px]",
)}
>
<Badge className="absolute top-2 right-2" variant="blue">
{template.version}
{template?.version}
</Badge>
<div
className={cn(
Expand All @@ -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"
Expand All @@ -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>
)}
Expand All @@ -372,25 +372,27 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
>
{viewMode === "detailed" && (
<div className="flex gap-2">
<Link
href={template.links.github}
target="_blank"
className="text-muted-foreground hover:text-foreground transition-colors"
>
<GithubIcon className="size-5" />
</Link>
{template.links.website && (
{template?.links?.github && (
<Link
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?.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"
>
Expand Down Expand Up @@ -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>

Expand Down
32 changes: 28 additions & 4 deletions packages/server/src/templates/processors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { faker } from "@faker-js/faker";
import type { Schema } from "./index";
import {
generateBase64,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
});
Expand Down Expand Up @@ -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
Expand All @@ -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)) {
Expand Down Expand Up @@ -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),
Expand Down